https://github.com/geoctrl/webpack-roboto

Embed the Roboto font into your application with Webpack (using Sass)
https://github.com/geoctrl/webpack-roboto

Last synced: about 2 months ago
JSON representation

Embed the Roboto font into your application with Webpack (using Sass)

• Host: GitHub
• URL: https://github.com/geoctrl/webpack-roboto
• Owner: geoctrl
• License: mit
• Created: 2016-12-10T20:37:04.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-07-04T10:18:12.000Z (almost 9 years ago)
• Last Synced: 2025-08-09T19:02:37.564Z (11 months ago)
• Language: CSS
• Size: 2.81 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# webpack-roboto

Embed the Roboto font into your application with Webpack

## Set Up

This is a pretty specific setup, but I'm sure you can do it with other commonJS module loaders. You'll need the following NPM modules installed (not including all the other stuff you'll need for sass, etc):

 - file-loader

 - resolve-url-loader

In your `webpack.config.js`, you'll need to add in `resolve-url-loader` to your sass loader and you'll need the `file-loader` added to be able to handle font embedding.

    config.loaders = [

      {

        test: /\.scss$/,

        loader: 'style!css!resolve-url!postcss-loader!sass',

        exclude: /node_modules/

      },

      {

        test: /\.(ttf|woff|woff2)$/,

        loader: 'file?name=fonts/[name].[ext]',

        exclude: /node_modules/

      }

    }

## Usage

Import (or require) the module and then call `embed()`

    import roboto from 'webpack-roboto';

    roboto.embed();

This will add all Roboto fonts. If you want only a specific set of fonts, pass in an array following the `${weight}-${style}` syntax:

    roboto.embed([

      '400-normal',

      '400-italic',

      '700-normal'

    ]);

For each import, webpack adds a new `` tag in the header with all the required css.

## Roadmap

I'd like to make this more modular so Roboto isn't the only font available. Much like how BabelJS has a modular preset system, we can make this project font agnostic, then include fonts that you would want as different packages.