https://github.com/lousando/font64-loader

Inline fonts in base64 format
https://github.com/lousando/font64-loader

Last synced: about 2 months ago
JSON representation

Inline fonts in base64 format

• Host: GitHub
• URL: https://github.com/lousando/font64-loader
• Owner: lousando
• License: mit
• Created: 2016-01-07T01:46:35.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-07-21T02:19:00.000Z (over 8 years ago)
• Last Synced: 2024-10-30T06:32:30.887Z (2 months ago)
• Language: JavaScript
• Size: 480 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Build Status](https://travis-ci.org/lousando/font64-loader.svg?branch=master)](https://travis-ci.org/lousando/font64-loader)

[![npm](https://img.shields.io/npm/v/font64-loader.svg?maxAge=2592000)](https://www.npmjs.com/package/font64-loader)

[![npm](https://img.shields.io/npm/dm/font64-loader.svg?maxAge=2592000)](https://www.npmjs.com/package/font64-loader)

# font64-loader

Inlines fonts in base64 encoding to prevent another network call.

## Installation

`npm install --save font64-loader`

## Setup with *sass-loader*

```

   devtool: "source-map",

    module: {

        loaders: [

            {

                test: /\.scss$/,

                loaders: ["style-loader", "css-loader", "resolve-url-loader", "sass-loader?sourceMap"]

            },

            {

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

                loader: "font64-loader"

            }

        ]

    }

```

Quick install: 

`npm install --save style-loader css-loader resolve-url-loader sass-loader font64-loader`

For webpack to use the `font64-loader` in this manner:

- install [resolve-url-loader](https://github.com/bholloway/resolve-url-loader)

- enable: `source-map` with `dev-tool`

- pass: `?sourceMap` to the `sass-loader`

## Usage with *sass-loader*

"sample.scss"

```

    @font-face {

      font-family: cool-font;

      src: url("../fonts/cool-font.ttf"); // path relative to "sample.scss"

    }

```