Customizing Fonts

About 2 min

This page guides you how to customize theme fonts.

Font Family

For common font families, they can generally be divided into serif^[1] and sans-serif^[2].

Modifying Fonts

The theme provides $font-family, $font-family-heading and $font-family-mono three variables to control the font in .vuepress/styles/palette.scss.

$font-family: the font used on normal text
$font-family-heading: font for heading elements
$font-family-mono: the font used in code block and inline codes

By default, the theme uses sans serif with normal text.

Use Serifs

If you prefer serif fonts, you can modify $font-family to the font you want.

The following font families are our recommended first choice for serif fonts:

$font-family: 'Georgia, -apple-system, "Nimbus Roman No9 L", sans-serif';

Because different platforms, different operating systems, and different installation methods (slim/full) will cause huge differences in the number and types of fonts in the font library, you should set as many fonts as possible, and ensure that the fallback fonts ^[3] exists.

Best Practices

The fallback font ^[3:1] can ensure that your website displays well on different operating systems and devices with different fonts installed.

Font Library

You can find more fonts in Google Fontsopen in new window, and you can preview and download them online.

Please search and select the font and weight you want in the webpage, then click the Select button on the right to add it to your selection list, then click the button in the upper right corner to view your favorite fonts and get the link Imported in the configuration file of VuePress.

We assume that you have selected the 400 and 700 italic fonts of Lora font. After clicking the button in the upper right corner, Google will give the following code in the sidebar:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,700&display=swap"
  rel="stylesheet"
/>

font-family: "Lora", serif;

Then all you need to do is import and use them by adding the following code in the VuePress configuration file:

import { defineUserConfig } from "vuepress";

export default defineUserConfig({
  //...

  head: [
    //...

    // Import the corresponding link
    ["link", { rel: "preconnect", href: "https://fonts.googleapis.com" }],
    [
      "link",
      { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "" },
    ],
    [
      "link",
      {
        href: "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&display=swap",
        rel: "stylesheet",
      },
    ],
  ],

  //...
});

Also modify the $font-family variable in the palette file:

// apply font
$font-family: "Lora, serif";

In this way, you can use lora font in your website.

lora Demo

Whereas recognition of the inherent dignity

No one shall be subjected to arbitrary arrest, detention or exile.
Everyone is entitled in full equality to a fair and public hearing by an independent and impartial tribunal, in the determination of his rights and obligations and of any criminal charge against him.
No one shall be subjected to arbitrary interference with his privacy, family, home or correspondence, nor to attacks upon his honour and reputation. Everyone has the right to the protection of the law against such interference or attacks.

Related introduction: https://www.zhihu.com/topic/19559432/introopen in new window ↩︎
Related introduction: https://www.zhihu.com/topic/19559433/introopen in new window ↩︎
From Wikipedia
Fallback fonts are fonts that are used to display missing characters when the displayed font lacks certain characters. Because it serves as the last line of defense for display, fallback fonts should contain all Unicode characters where possible.
When a missing character has no fallback font for display, the missing character is usually displayed as a black square, white hollow square, question mark, Unicode placeholder (U+FFFD), or simply skipped. In practice, systems such as CSS that support sequential display of font lists usually put one or more sets of fallback fonts at the end of the list to prevent missing characters. ↩︎ ↩︎