Font opitimize with grunt

In the past, if a different font was desired, I had to create images for the text instead.But image scale up badly and loaded slowly. I think web fonts is a better solution. Google Web Fonts(GWF) allow to host on their service for request fonts without limit. So It's easier to use different fonts in the web page. Most of all, I only use few characters but include one hole font family. Grunt-font-optimizer is the system which could help us to repack font with characters what we need.

How to install Grunt-font-optimizer

• Install nodeJS
• Install grunt cli
• Install grunt-font-optimizer : npm install grunt-font-optimizer --save-dev

Load grunt-font-optimizer in gruntfile.js

grunt.loadNpmTasks('grunt-font-optimizer');

Download google web fonts form skyfonts

Skyfonts is the system which could download and sync google fonts easily.

Example to imprement

grunt.initConfig({
        font_optimizer: {
            default: {
                options: {
                    // Characters to include
                    chars: 'ABC',
                    // Features to include.
                    includeFeatures: ['none']
                },  
                files: {
                    'dist/fonts/logo.ttf': ['assets/fonts/railway_regular.ttf'],
                }   
            }   
        }
}) 

➽ See more