Hexo. Add Custom Fonts

Posted on

In the previous post you can read about my switch from Grav to Hexo. It touches on many points I thought were relevant, but only a small paragraph dealt with the configuration for the blog engine itself. That was mostly because the documentation for Hexo and the theme I chose («NexT») is very good. There wasn’t anything of value I could add, short of one exception. The documentation for installing custom fonts was not complete. While one sections talks about font customization, it is focused on selecting fonts that are available online. Specifically, the example is tailored for google fonts. That is great unless you have your own set of fonts.

Not that difficult to figure out how to get hexo to accept locally stored web fonts, but it seemed like a good opportunity for me to write about my experience installing custom fonts, including about the why and how I chose the fonts you see right now as you are reading this post.

Custom Fonts: Why?

Fonts do make a difference. The New York Times ran an experiment, presenting information followed by a quiz under the pretense to test whether the reader is an optimist or pessimist. As visitors were reading the information and answering the questions, they were unaware that different fonts were picked at random for different people. The New York Times analyzed the results to see if there were statistically significant differences in the answers dependent on the font used. It turns out, there was; answers given were influenced by the font used to typeset the information the reader was quizzed on.

But there is more to selecting a font than picking one that conveys the right amount of authority (or lack thereof)[1] for your message. There are also typographical concerns. Are the fonts easy to read on different devices? Does the headline font work well with the body text font, or do they clash distracting from the content? Is the header font occupying too much screen real estate, limiting the number of words you can bring to bear for your message? Those are a few questions that need to be asked, and the answers are usually easier to find with custom fonts.

Free or Paid for Fonts?

At this point, I hope you are convinced that putting effort into selecting a font is worthwhile. But how to pick? And from where?

There are plenty of free fonts available. Google is one of the biggest suppliers of free web fonts at Google Fonts. Their offerings are so numerous that it pays to look for websites that selected some favorites. Typewolf has done some of that work[2].

Typewolf’s introduction hints at one —of arguably many— problems with free fonts:

This collection focuses on typeface families from reputable type designers and foundries that contain multiple weights and styles. I’m purposefully avoiding single-weight display faces as they have limited usefulness in real-world design projects.

Typewolf

One point implicitly made in that quote is that creating great fonts requires skills and experience. Google knows this, so they commissioned professional font designers to create fonts for them. But that doesn’t mean those fonts are necessarily complete. As Typewolf points out, even well designed free fonts often have limitations. They may have fewer weights and styles, a smaller character set, and are missing some of the advanced features like Proper Small Caps, leaving it to the system to create Fake Small Caps by scaling down regular caps. Note how the strokes are too thin and the spacing is too tight. Stylistic sets (alternate glyphs) give us whimsical features[3] like old-style figures 0123456789 instead of the regular set 0123456789, fractions that turn 5/9 into 5/9, superscripts and subscripts (e.g. H2O) and many more.[4]

You might be able to find a free font that checks all the boxes for your needs. I tried many, comparing results by typesetting with XeTeX[5] to evaluate font support for various characters and stylistic features. In the end, I bought a professional font. I was not satisfied with the free fonts available when I started this blog. Depending on what price tag you put on your time, it might also be more cost-effective to purchase a font.[6]

The Fonts on this Website

There are many places that offer fonts for sale. Adobe Fonts and Webtype, for example, are good, albeit expensive choices for high-quality fonts. If you are like me and don’t make any money from your website/writing, I can recommend mb type. In addition to straight out selling fonts, Matthew Butterick started an exciting experiment. He accepts payment for his online book Butterick’s Practical Typography in the form of a font purchase. The book is excellent, paying for it by buying a font (that he sells for a very fair price with a generous license) is a great deal. I am using four of his fonts for this website.[7] With that out of the way, let me discuss the fonts I picked and why.

The most important font is the font that is used for body text by virtue of the fact that most of the text on the website is typeset in the body text. I personally like serif faces for body text and consequently picked equity for the posts on my website. Serif fonts used to be a problem when screen resolution was low, and the smaller details of the fonts were difficult to display. In the age of retina screens, these concerns are gone.

The headings are typically set in a larger font, which means they occupy more real estate on the screen. You can quickly run out of space before your headline is complete, especially on smaller devices like phones. To counter that problem, I selected a font from the advocate series. They are display fonts, some of them condensed and thus space-efficient; perfect for headings. I also like the caps and small caps style. All together advocate creates nice visual boundaries between the paragraphs and lets me add a fair amount of content into the headline.

Concourse is used for the sidebar and the top menu bar of the website. As a sans serif font, it visually separates those parts from the body of the posts.

Whenever code is displayed, Triplicate, Matthew’s monospaced font in its code variant is used. Triplicate is the one font that would be easy to replace with a free font given the vast of amount programmers that delight in having just the right font to display their code.[8]

Font Installation

If you are still with me, you might be wondering how you can use a custom font with your own hexo website. I’ll walk you through the installation process for the «NexT» theme that I’m using with Hexo for this blog.

Webfonts

Fonts come in various formats, with OpenType arguably the most common one for desktop use. For the web, you need web fonts, which come in a bewildering number of file formats. If the font you have comes in a web font file format, you are all set. Otherwise, FontSquirrel offers a service to generate web fonts from other font formats. They will also generate the css font-face declaration that goes with the web font they generated. Here is an example of what that looks like for equity [9]

1
2
3
4
5
6
7
8
9
10
11
@font-face {
    font-family: 'equity_text_aregular';
    src: url('../fonts/equity_text_a_regular-webfont.eot');
    src: url('../fonts/equity_text_a_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/equity_text_a_regular-webfont.woff2') format('woff2'),
         url('../fonts/equity_text_a_regular-webfont.woff') format('woff'),
         url('../fonts/equity_text_a_regular-webfont.ttf') format('truetype'),
         url('../fonts/equity_text_a_regular-webfont.svg#equity_text_aregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Add Your Webfonts to the Website Source

For the website to render the content in the selected fonts, the web fonts have to be uploaded to the webserver. This is accomplished by storing the web fonts in the source/fonts directory in your Hexo directory structure. When you generate the website by typing hexo generate in the terminal, the fonts will be moved to the public/fonts directory, and are thus part of the directory structure that gets deployed to the webserver. When web pages are served to your readers, the fonts are sent together with the content. What is left is to tell Hexo/«NexT» where to use what font.

Update the YAML/CSS Configuration File

The location of the font in the directory structure and corresponding name of a font has to be defined in a css @fontface block. Here is an example for the font I’m using for the site title:

1
2
3
4
5
6
@font-face {
    font-family: 'concourse_c2regular';
    src: url('../fonts/concourse_c2_regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

For each font that you want to use such a piece of css code has to be added. I placed them into the main.styl file of the «NexT» theme.

With the css instructions in place to connect the font family with the location on disk, we can start referencing the fonts throughout the site. That is relatively easy with the «NexT» theme, as it has a section in the configuration file config.yml that specifies what fonts to use for the different parts of the website. It has entries for the body text, site title, code blocks, headlines, and a global font setting. Here is a copy of that section that I’m using for this website. You will find references to the font families mentioned in the previous parts of this post.

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
35
36
37
38
39
40
41
font:
  # Use custom fonts families or not.
  # Depended options: `external` and `family`.
  enable: false

  # Uri of fonts host, e.g. //fonts.googleapis.com (Default).
  host:

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

  # Global font settings used for all elements inside <body>.
  global:
    external: true
    family: concourse_t3regular
    size: 1.15

  # Font settings for site title (.site-title).
  title:
    external: true
    family: concourse_c2regular
    size:

  # Font settings for headlines (<h1> to <h6>).
  headings:
    external: true
    family: advocate_c43_regular
    size: 1.6

  # Font settings for posts (.post-body).
  posts:
    external: true
    family: equity_text_aregular
    size:

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: triplicate_t3_code_regular

These settings will take care of the font selection for the main parts of the website. To select specific font feature, I added additional css blocks. For example, the selection of oldstyle figures I used above was enabled through the css block:

1
2
3
.oldn {
    font-feature-settings: "onum" on;
}

Css supports a variety of font-features. This Mozilla websites goes into more detail about the available options. The features available depend on what the font you selected supports.

With the css for the features defined, they can be used in the post like this:

1
like old style figures <span class="oldn">0123456789</span> instead of the regular set 0123456789

That will then render like this:

like old style figures 0123456789 instead of the regular set 0123456789

Layout sizes

After you pick a font and decided on the font size, it is time to take a look at the width of the page. For readability concerns, a line should not contain more than two to three alphabets set in a particular font. With the fonts I selected for my website the default width of the text block in the «NexT» theme was that too wide. I modified the sizes to:

1
2
3
4
5
6
// Layout sizes
// --------------------------------------------------
$content-desktop                = 600px;
$content-desktop-large          = 700px;
$content-desktop-largest        = 800px;
}

Note that the documenation has an entry in the FAQ that explains how to adjust the layout by modifying a custom style file. However, that failed for me.

Picture Credits:

  1. At this point, everyone except for Trump’s lawyer John Dowd knows that Comic Sans isn’t an appropriate font for a professional piece of writing. ↩︎

  2. I’m picking Typewolf because it appeared first in my google search. There are many sites that offer similar advice. ↩︎

  3. Don’t write me if I’m committing a typographical faux pas calling some of the features whimsical :) ↩︎

  4. Consult the font examples and documentation to learn about a font’s specific set of features. ↩︎

  5. Lacking Adobe InDesign, XeTeX is a wonderful free system to squeeze all the typographical goodness out of your fonts. ↩︎

  6. I do not want to discount that I learned a lot from comparing and evaluating fonts and their features. ↩︎

  7. I initially purchased two of his fonts to pay for his online book Butterick’s Practical Typography. Since then, I have been reading Beautiful Racket, which has a similar purchase offer. I ended up with two additional fonts from Matthew, both of which are now used on this website as well. ↩︎

  8. I used to use the excellent Source Code Pro for monospaced text. Designed by Adobe and released under the SIL Open Font License 1.1. ↩︎

  9. Note that MB TYPE now provides the web fonts as well; no need to generate them yourself anymore. ↩︎