Skip to content

A CSS font loader for webpack that Base64 encodes your embedded fonts

Notifications You must be signed in to change notification settings

nicksrandall/base64-font-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Base64 font loader for webpack

This loader will Base64 encode any fonts in your css files.

Usage

Documentation: Using loaders

module.exports = {
  context: path.join(__dirname, 'src'),
  entry: {
    'index': './index.js'
  },
  module: {
    loaders: [{
        test: /\.html$/,
        loader: 'raw'
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!autoprefixer-loader!sass-loader?sourceMap')
      },
      {
        test: /\.(woff|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'base64-font-loader'
      }
    ]
  },
  devtool: 'source-map',
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].js',
    sourceMapFilename: '[file].map'
  }
};

Example

Input:

@font-face {
  font-family: 'icons';
  src: url('fonts/icon.eot');
  src: url('fonts/icon.eot?v=0.0.1') format('eot'),
       url('fonts/icon.woff?v=0.0.1') format('woff'),
       url('fonts/icon.ttf?v=0.0.1') format('truetype'),
       url('fonts/icon.svg?v=0.0.1') format('svg');
  font-weight: normal;
  font-style: normal;
}

Exports:

@font-face {
  font-family: 'icons';
  src: url(data:application/vnd.ms-fontobject;charset=utf-8;base64,[BASE_64_STRING]);
  src: url(data:application/vnd.ms-fontobject;charset=utf-8;base64,[BASE_64_STRING]) format('eot'),
       url(data:application/font-woff;charset=utf-8;base64,[BASE_64_STRING]) format('woff'),
       url(data:application/x-font-ttf;charset=utf-8;base64,[BASE_64_STRING]) format('truetype'),
       url(data:image/svg+xml;charset=utf-8;base64,[BASE_64_STRING]) format('svg');
  font-weight: normal;
  font-style: normal;
}

License

MIT (http://www.opensource.org/licenses/mit-license.php)

About

A CSS font loader for webpack that Base64 encodes your embedded fonts

Resources

Stars

Watchers

Forks

Packages

No packages published