[PostCss] Easily Load Google Fonts with PostCSS Font Magician

Configuring Google Fonts can be quite an annoying process to setup. Using Font Magician with PostCSS allows you simply generate proper @font-face declarations simply by writing the Google Font that you're expecting. Want Merriweather? Simply type font-family: "Merriweather" and Font Magician will generate everything you need.

Install:

npm i poi postcss postcss-font-magician -D

Config:

const magician = require('postcss-font-magician');

module.exports = {
    plugins: [
        magician({
            variants: {
                'Merriweather': {
                    '300': [],
                    '400': []
                },
                'Nunito': {
                    '300': [],
                    '400': []
                }
            }
        })
    ]
};

Doc

Use:

* {
    font-family: "Merriweather";
}
h1 {
    font-family: 'Nunito';
}

Build:

poi build

After build, we will get css file, which can be used in your project