Next主题中从服务器加载Google字体

发表于   |   分类于

概述

想要在Hexo的Next主题中使用Google字体，一个问题在于这个字体的加载并不是很方便（与Next主题本身无关）。

解决的方法可以是修改主题，在没有合适CDN的情况下，从服务器直接加载对应字体也是一种选择。

实现

准备字体

首先，通过Chrome开发者工具，会发现难以加载的是这一css文件以及相关联的字体：

1
https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext

当前使用的Next主题使用的是Lato这一个字体，那么应该如何得到这一字体呢？

这时候就需要Google WebFont Downloader了。

如果有Node环境，那么直接执行:

1
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
→ 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
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
→ 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
{% 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字体即可。