概述
想要在Hexo的Next主题中使用Google字体，一个问题在于这个字体的加载并不是很方便（与Next主题本身无关）。
解决的方法可以是修改主题，在没有合适CDN的情况下，从服务器直接加载对应字体也是一种选择。
实现
准备字体
首先，通过Chrome开发者工具，会发现难以加载的是这一css文件以及相关联的字体：
|
1 2 |
https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext |
当前使用的Next主题使用的是Lato这一个字体，那么应该如何得到这一字体呢？
这时候就需要Google WebFont Downloader了。
如果有Node环境，那么直接执行:
|
1 2 |
npm install -g goog-webfont-dl |
即可。
使用上，可以通过-h查看参数定义：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
→ goog-webfont-dl -h Usage: goog-webfont-dl [options] <fontname> Options: -h, --help output usage information -V, --version output the version number -t, --ttf Download TTF format -e, --eot Download EOT format -w, --woff Download WOFF format -W, --woff2 Download WOFF2 format -s, --svg Download SVG format -a, --all Download all formats -f, --font [name] Name of font -d, --destination [directory] Save font in directory -o, --out [name] CSS output file [use - for stdout] -p, --prefix [prefix] Prefix to use in CSS output -u, --subset [string] Subset string [e.g. latin,cyrillic] -y, --styles [string] Style string [e.g. 300,400,300italic,400italic] -P, --proxy [string] Proxy url [e.g. http://www.myproxy.com/] -q, --quiet Do not print status information |
通过上面的url，可以确定使用的的字体为Lato，那么下载相同的字体需要指定的参数为：
|
1 2 |
goog-webfont-dl -f "Lato" -y "300,400,700,400italic" -u "latin,latin-ext" -a |
这里-a参数保证下载了所有字体。
如果可以顺利的访问对应的资源，那么成功之后将会在当前目录出现字体名为名字的css以及字体目录。
修改主题
对应的域名是googleapis，可以考虑在Next主题的vendors目录下新增一个同名的目录，将css以及字体组织。目录层级会变为：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
→ tree themes/next/source/vendors themes/next/source/vendors ├── fancybox ... ├── fastclick ... ├── font-awesome ... ├── googleapis │ ├── css │ │ └── Lato.css │ └── fonts │ └── Lato │ ├── Lato-Bold.ttf │ ├── Lato-Bold.woff │ ├── Lato-Bold.woff2 │ ├── Lato-Italic.ttf │ ├── Lato-Italic.woff │ ├── Lato-Italic.woff2 │ ├── Lato-Light.ttf │ ├── Lato-Light.woff │ ├── Lato-Light.woff2 │ ├── Lato-Regular.eot │ ├── Lato-Regular.svg │ ├── Lato-Regular.ttf │ ├── Lato-Regular.woff │ └── Lato-Regular.woff2 ├── jquery ... ├── jquery_lazyload ... └── velocity ... |
剩下的工作是，在加载原先的css的partials中将url改成加载verdors中对应的地址即可：
|
1 2 3 4 5 |
{% if theme.use_font_lato %} <!--<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">--> <link href="{{ url_for(theme.vendors) }}/googleapis/css/Lato.css" rel="stylesheet" type="text/css"> {% endif %} |
当然，如果不想这么麻烦，直接在主题设置中关闭Lato字体即可。