pfb

postcss-font-base64

a plugin for postcss

Showing:

Popularity

Downloads/wk

4.7K

GitHub Stars

4

Maintenance

Last Commit

7mos ago

Contributors

4

Package

Dependencies

2

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Description

This postcss module takes your local custom font and encode it to a base64 string which is included in your css. The supported formats are currently woff, woff2, ttf, and eot. This module is subject to change. Contribution appreciated!

Install

npm install --save-dev postcss-font-base64

or

yarn add postcss-font-base64 --dev

Example

Input

@font-face {
    font-family: Scrabble;
    src:
        url("fonts/fakefont.eot?#iefix") format("embedded-opentype"),
        url("fonts/fakefont.woff") format("woff"),
        url("fonts/fakefont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

Output

@font-face {
    font-family: "Scrabble";
    src:
      url(data:application/font-eot;charset=utf-8;base64sZEAABWRAAA...l54u0 format("embedded-opentype"),

      url(data:application/font-woff;charset=utf-8;base64d09GRgABAA...tZQAA format("woff"),

      url(data:application/font-tiff;charset=utf-8;base64AAEAAAARAQ...D0QAA format("truetype");

    font-weight: normal;
    font-style: normal;
}

Config

In your postcss.config.js add this module:

module.exports = {
    plugins: [
      ...
      require('postcss-font-base64')({
        //future options will be handled here
      })
    ]
}

Options

There are currently no options available. Please suggest!

Disclaimer

This is my first postCss plugin, feel free to contribute, comment or help out 🍺

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial