[go: nahoru, domu]
❤
npm
Sign UpSign In

@wikiline/webfont-roboto

3.0.1 • Public • Published

WebFont Roboto

Package for integrating Roboto fonts in a web environment.

npm npm npm

Installation

This package can be deployed automatically using NPM:

npm i @wikiline/webfont-roboto

Usage (CSS)

Font files are located in the fonts/ directory. To import all fonts, you can use:

body {
  font-family: 'Roboto', sans-serif;
}

Importing

@import "~@wikiline/webfont-roboto/css/all.css";
@import "~@wikiline/webfont-roboto/css/all-normal.css";
@import "~@wikiline/webfont-roboto/css/all-italic.css";

To import specific fonts, you can use:

@import "~@wikiline/webfont-roboto/css/weight-100.css";
@import "~@wikiline/webfont-roboto/css/weight-100-normal.css";
@import "~@wikiline/webfont-roboto/css/weight-100-italic.css";
@import "~@wikiline/webfont-roboto/css/weight-300.css";
@import "~@wikiline/webfont-roboto/css/weight-300-normal.css";
@import "~@wikiline/webfont-roboto/css/weight-300-italic.css";
@import "~@wikiline/webfont-roboto/css/weight-400.css";
@import "~@wikiline/webfont-roboto/css/weight-400-normal.css";
@import "~@wikiline/webfont-roboto/css/weight-400-italic.css";
@import "~@wikiline/webfont-roboto/css/weight-500.css";
@import "~@wikiline/webfont-roboto/css/weight-500-normal.css";
@import "~@wikiline/webfont-roboto/css/weight-500-italic.css";
@import "~@wikiline/webfont-roboto/css/weight-700.css";
@import "~@wikiline/webfont-roboto/css/weight-700-normal.css";
@import "~@wikiline/webfont-roboto/css/weight-700-italic.css";
@import "~@wikiline/webfont-roboto/css/weight-900.css";
@import "~@wikiline/webfont-roboto/css/weight-900-normal.css";
@import "~@wikiline/webfont-roboto/css/weight-900-italic.css";

Note: Also, each file is presented in a minimized form.

Variables

Each font uses the following CSS variables to set the font display property with the default swap value if CSS variables are not defined:

:root {
  --font-display: swap;
  --font-display-roboto: swap;
}

Usage (LESS)

Font files are located in the fonts/ directory. To import all fonts, you can use:

body {
  font-family: 'Roboto', sans-serif;
}

Importing

@import "~@wikiline/webfont-roboto/less/all";
@import "~@wikiline/webfont-roboto/less/all-normal";
@import "~@wikiline/webfont-roboto/less/all-italic";

To import specific fonts, you can use:

@import "~@wikiline/webfont-roboto/less/_weight-100";
@import "~@wikiline/webfont-roboto/less/_weight-100-normal";
@import "~@wikiline/webfont-roboto/less/_weight-100-italic";
@import "~@wikiline/webfont-roboto/less/_weight-300";
@import "~@wikiline/webfont-roboto/less/_weight-300-normal";
@import "~@wikiline/webfont-roboto/less/_weight-300-italic";
@import "~@wikiline/webfont-roboto/less/_weight-400";
@import "~@wikiline/webfont-roboto/less/_weight-400-normal";
@import "~@wikiline/webfont-roboto/less/_weight-400-italic";
@import "~@wikiline/webfont-roboto/less/_weight-500";
@import "~@wikiline/webfont-roboto/less/_weight-500-normal";
@import "~@wikiline/webfont-roboto/less/_weight-500-italic";
@import "~@wikiline/webfont-roboto/less/_weight-700";
@import "~@wikiline/webfont-roboto/less/_weight-700-normal";
@import "~@wikiline/webfont-roboto/less/_weight-700-italic";
@import "~@wikiline/webfont-roboto/less/_weight-900";
@import "~@wikiline/webfont-roboto/less/_weight-900-normal";
@import "~@wikiline/webfont-roboto/less/_weight-900-italic";

Variables

Each font uses the following LESS variables to set the font display property with the default swap value if SCSS variables are not defined:

@font-display: swap;
@font-display-roboto: swap;

or

@import "~@wikiline/webfont-roboto/less/config/_variables";

Usage (SCSS)

Font files are located in the fonts/ directory. To import all fonts, you can use:

body {
  font-family: 'Roboto', sans-serif;
}

Importing

@import "~@wikiline/webfont-roboto/scss/all";
@import "~@wikiline/webfont-roboto/scss/all-normal";
@import "~@wikiline/webfont-roboto/scss/all-italic";

To import specific fonts, you can use:

@import "~@wikiline/webfont-roboto/scss/weight-100";
@import "~@wikiline/webfont-roboto/scss/weight-100-normal";
@import "~@wikiline/webfont-roboto/scss/weight-100-italic";
@import "~@wikiline/webfont-roboto/scss/weight-300";
@import "~@wikiline/webfont-roboto/scss/weight-300-normal";
@import "~@wikiline/webfont-roboto/scss/weight-300-italic";
@import "~@wikiline/webfont-roboto/scss/weight-400";
@import "~@wikiline/webfont-roboto/scss/weight-400-normal";
@import "~@wikiline/webfont-roboto/scss/weight-400-italic";
@import "~@wikiline/webfont-roboto/scss/weight-500";
@import "~@wikiline/webfont-roboto/scss/weight-500-normal";
@import "~@wikiline/webfont-roboto/scss/weight-500-italic";
@import "~@wikiline/webfont-roboto/scss/weight-700";
@import "~@wikiline/webfont-roboto/scss/weight-700-normal";
@import "~@wikiline/webfont-roboto/scss/weight-700-italic";
@import "~@wikiline/webfont-roboto/scss/weight-900";
@import "~@wikiline/webfont-roboto/scss/weight-900-normal";
@import "~@wikiline/webfont-roboto/scss/weight-900-italic";

Variables

Each font uses the following SCSS variables to set the font display property with the default swap value if SCSS variables are not defined:

$font-display: swap;
$font-display-roboto: swap;

Licensing

It is important to always read the license for every font that you use. Most of the fonts in the collection use the SIL Open Font License, v1.1. Some fonts use the Apache 2 license. The Ubuntu fonts use the Ubuntu Font License v1.0.

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i @wikiline/webfont-roboto

      Repository

      github.com/wikiline/webfont-roboto

      Homepage

      github.com/wikiline/webfont-roboto#readme

      Weekly Downloads

      2

      Version

      3.0.1

      License

      MIT

      Unpacked Size

      852 kB

      Total Files

      113

      Last publish

      Collaborators

      • bu0nq
      Try on RunKit
      Report malware