typeface-roboto

What is typeface-roboto?

The typeface-roboto npm package allows you to easily include the Roboto font in your web projects. It provides a convenient way to load the Roboto font family without needing to manually download and include the font files.

What are typeface-roboto's main functionalities?

Include Roboto Font

This feature allows you to include the Roboto font in your project by simply importing the package. This will make the Roboto font available for use in your CSS.

import 'typeface-roboto';

Use Roboto Font in CSS

After importing the package, you can use the Roboto font in your CSS by specifying it in the font-family property.

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

Other packages similar to typeface-roboto

typeface-open-sans

The typeface-open-sans package provides a similar functionality for the Open Sans font. Like typeface-roboto, it allows you to easily include the Open Sans font in your project by importing the package.

typeface-lato

The typeface-lato package allows you to include the Lato font in your project. It works similarly to typeface-roboto, providing a convenient way to load the Lato font family.

typeface-montserrat

The typeface-montserrat package provides the Montserrat font for use in your web projects. It offers the same ease of use as typeface-roboto, allowing you to import the font and use it in your CSS.

README

The Typefaces project is now deprecated.

@DecliningLotus created FontSource which provides the same functionality as Typefaces but with automated releases & richer support for importing specific weights, styles, or language subsets.

To start using Fontsource, replace in your package.json any instances of "typeface-roboto" with "fontsource-roboto".

Then change imports from "import 'typeface-roboto'" to "import 'fontsource-roboto/latin.css'".

Typeface packages will continue working indefinitely so no immediate changes are necessary.

typeface-roboto

The CSS and web font files to easily self-host “Roboto”.

Install

npm install --save typeface-roboto

Use

Typefaces assume you’re using webpack to process CSS and files. Each typeface package includes all necessary font files (woff2, woff) and a CSS file with font-face declarations pointing at these files.

You will need to have webpack setup to load css and font files. Many tools built with Webpack will work out of the box with Typefaces such as Gatsby and Create React App.

To use, simply require the package in your project’s entry file e.g.

// Load Roboto typeface
require('typeface-roboto')

About the Typefaces project.

Our goal is to add all open source fonts to NPM to simplify using great fonts in our web projects. We’re currently maintaining 1036 typeface packages including all typefaces on Google Fonts.

If your favorite typeface isn’t published yet, let us know and we’ll add it!