roboto-fontface

What is roboto-fontface?

The roboto-fontface npm package provides the Roboto font family as a webfont, allowing developers to easily include and use the Roboto font in their web projects. It includes various font weights and styles, making it versatile for different design needs.

What are roboto-fontface's main functionalities?

Include Roboto Font in CSS

This feature allows you to include the Roboto font in your CSS file using an @import statement. By doing this, you can apply the Roboto font to your entire web project or specific elements.

/* In your CSS file */
@import url('~roboto-fontface/css/roboto/roboto-fontface.css');

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

Use Different Font Weights

This feature demonstrates how to use different font weights provided by the Roboto font family. You can apply different weights to different elements to achieve the desired visual hierarchy.

/* In your CSS file */
@import url('~roboto-fontface/css/roboto/roboto-fontface.css');

h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700; /* Bold */
}
p {
  font-family: 'Roboto', sans-serif;
  font-weight: 300; /* Light */
}

Include Specific Font Styles

This feature shows how to include specific font styles, such as italic, using the Roboto font family. This can be useful for emphasizing certain text elements.

/* In your CSS file */
@import url('~roboto-fontface/css/roboto/roboto-fontface.css');

.italic-text {
  font-family: 'Roboto', sans-serif;
  font-style: italic;
}

Other packages similar to roboto-fontface

typeface-roboto

The typeface-roboto package also provides the Roboto font family as a webfont. It is similar to roboto-fontface but is part of the larger 'typefaces' project, which aims to provide a wide range of fonts in a consistent manner. It includes the same font weights and styles as roboto-fontface.

fontsource-roboto

The fontsource-roboto package is another alternative that provides the Roboto font family. Fontsource is a project that offers self-hosted open-source fonts bundled as NPM packages. It provides a more modern approach with better support for various build tools and frameworks compared to roboto-fontface.

google-fonts

The google-fonts npm package allows you to easily include Google Fonts in your project. While it supports a wide range of fonts, including Roboto, it is more general-purpose compared to roboto-fontface, which is specifically focused on the Roboto font family.

README

Roboto fontface

A simple package providing the Roboto fontface. The font was created by Christian Robertson.

Installing

Assuming you have NodeJS, NPM and Bower installed globally just open up a terminal, navigate to your projects root directory and then execute

# install via NPM
$ npm install roboto-fontface --save

# install via Bower
$ bower install roboto-fontface --save

Usage

There're several files in the css/ subdirectory. Import them in your project to have access to "Roboto" font face:

• css/roboto/roboto-fontface.css - whole font family compiled to CSS

• css/roboto/sass/roboto-fontface.scss - whole font family in SCSS

• css/roboto/less/roboto-fontface.less - whole font family in LESS

• css/roboto-condensed/roboto-condensed-fontface.css - whole font family compiled to CSS

• css/roboto-condensed/sass/roboto-condensed-fontface.scss - whole font family in SCSS

• css/roboto-condensed/less/roboto-condensed-fontface.less - whole font family in LESS

• css/roboto-slab/roboto-slab-fontface.css - whole font family compiled to CSS

• css/roboto-slab/sass/roboto-slab-fontface.scss - whole font family in SCSS

• css/roboto-slab/less/roboto-slab-fontface.less - whole font family in LESS

Importing whole family may be unnecessary and lead to huge build, so if you are using SCSS or LESS, you can import only individual weights by importing for example:

• css/roboto/sass/roboto-fontface-black.scss
• css/roboto/sass/roboto-fontface-black-italic.scss

Hinting

Some of the included font files have hinting.

Files	Hinting
.woff	yes
.woff2	?