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

[PostCss] Easily Load Google Fonts with PostCSS Font Magician的更多相关文章

  1. Get Started with the Google Fonts API

    Get Started with the Google Fonts API This guide explains how to use the Google Fonts API to add fon ...

  2. Google css & Google fonts

    最近用某开源模板做提案的时候, 抓包工具老是有外部Request. 问题出在某css中有这么一句: @import url(https://fonts.googleapis.com/css?famil ...

  3. 使用 Google Fonts 为网页添加美观字体

    前言 文字是网页中很重要的组成部分.为文字选择一个合适的字体,能够更好的展现一个网站的个性,表达所要传递的信息,同时吸引用户来产生兴趣. 说到字体,我们首先会想到 CSS 里面的 font,例如: & ...

  4. 使用Google Fonts注意事项

    Google Fonts是一个字体嵌入服务库. 这包括免费和开源字体系列.用于浏览库的交互式 Web 目录以及用于通过 CSS 和 Android 使用字体的 API. Google 字体库中的流行字 ...

  5. google fonts 国内使用解决方案

    由于众所周知的原因,国内使用google font库有很大的问题. 解决方案1:使用国内镜像如360网站卫士常用前端公共库CDN服务 优点:使用方便 缺点:目标用户包含国外的开发者,不清楚国外用户的加 ...

  6. bootstrap之google fonts

    bootstrap之google fonts 在学习一个bootstrap时,看到了一行引用代码:@import url(http://fonts.googleapis.com/css?family= ...

  7. (转)Google Fonts 的介绍与使用

    转载自“前端笔记”  http://www.cnblogs.com/milly/archive/2013/05/10/google-fonts.html Google Fonts 是什么?(以下翻译为 ...

  8. 前端 CDNJS 库及 Google Fonts、Ajax 和 Gravatar 国内加速服务

    由于某些众所周知的原因,好多开源的 JS 库采用的国外 CDN 托管方式在国内访问速度不如人意.所以我们特意制作了这个公益项目,托管了 CDNJS 的所有开源 JS 库以及反代了 Google Fon ...

  9. webpack 解决 semantic ui 中 google fonts 引用的问题

    semantic ui css 的第一行引用了 google web font api,由于不可告人而又众所周知的原因,这条链接在国内无法访问: @import url('https://fonts. ...

随机推荐

  1. 重设数据文件大小sql语句

    set verify off column file_name format a50 word_wrapped column smallest format 999,990 heading " ...

  2. javascript 异或运算符实现简单的密码加密功能

    写在前面的 当我们需要在数据库中存储用户的密码时,当然是不能明文存储的. 我们就是介绍一下用^运算符来实现简单的密码加密以及解密功能 上代码 首先,回顾一下基础知识. String.fromCharc ...

  3. GUI 图形用户界面 [学习笔记]

    今晚返璞归真了一把, 系统了解了一下GUI的有关知识: GUI(Graphical User Interface) 图形用户界面 是指采用图形方式显示的计算机操作用户接口.与早期计算机使用的命令行界面 ...

  4. Base64编码字符串时数据量明显变大

    那就是当把byte[]通过Convert.ToBase64String转换成Base64编码字符串时数据量明显变大 Base64编码的思想是是采用64个基本的ASCII码字符对数据进行重新编码.它将需 ...

  5. KVM 日常使用命令

    [root@Eren liwm]# ps ax | grep kvm  681 ?        S<     0:00 [kvm-irqfd-clean]17597 pts/0    S+   ...

  6. thttpd 在S3C6410的移植-web服务程序的应用

    1.    在VMWare 虚拟机上将arm-linux-gcc 4.3.1配置好:2.    下载thttpd软件包并解压:3.    在thttpd根目录下运行:  ./configure:4.  ...

  7. python+selenium进行简单验证码获取

    # _*_ coding:utf-8 _*_from PIL import Imagefrom selenium import webdriverimport pytesseractimport ti ...

  8. 紫书 习题 8-1 UVa 1149(贪心)

    排序之后, 尽量最小和最大的放在一个背包, 放不下就放最大的. #include<cstdio> #include<algorithm> #define REP(i, a, b ...

  9. C语言过程活动记录

    C 语言自动提供的服务之一就是跟踪调用链——哪些函数调用了哪些函数,当下一个return语句执行后,控制将返回何处等.解决这个问题的经典机制是堆栈中的活动记录. 当每个函数被调用时,都会产生一个过程记 ...

  10. js 函数基础(方便复习使用)

    // 函数声明: function bbq(){ // ..... } // 函数表达式: // 1.命名函数表达式 var test = function abc(){ document.write ...