Skip to main content
Font

Font #

Font #

Ref:

@font-face #

Doc: @font-face - CSS: Cascading Style Sheets | MDN

font-family (font stack) #

Reminder to self: Remove Segoe UI from all font stacks.

Google Fonts API #

Google Fonts was deemed not GDPR compliant in Germany (coverage by The Hacker News, Bitdefender, jsDelivr). If your website have a lot of visitors from the EU, consider self-hosting the fonts.

Async (v1) #

Refs:

Following is the code I adapted for hugo-theme-diary:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" as="style"
      href="https://fonts.googleapis.com/css?family=Lora|Noto+Serif+SC|Material+Icons&display=swap" />
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Lora|Noto+Serif+SC|Material+Icons&display=swap"
      media="print" onload="this.media='all'" />
<noscript>
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Lora|Noto+Serif+SC|Material+Icons&display=swap" />
</noscript>

Async (v2) #

Not tested:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" as="style"
      href="https://fonts.googleapis.com/css2?family=Lora&family=Noto+Serif+SC&family=Material+Icons&display=swap" />
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Lora&family=Noto+Serif+SC&family=Material+Icons&display=swap"
      media="print" onload="this.media='all'" />
<noscript>
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Lora&family=Noto+Serif+SC&family=Material+Icons&display=swap" />
</noscript>

Weights (v1) #

Doc: Get Started with the Google Fonts API | Google for Developers

Ref: html - How to use italic google fonts? - Stack Overflow

http://fonts.googleapis.com/css
    ?family=Lora:400,400italic,700,700italic  # both normal and italic, regular & bold
    |Noto+Serif+SC:400,700                    # only normal, regular & bold
    &display=swap

Weights (v2) #

Doc:

Without style specifications, the API provides the default style of the requested family.

When a request doesn’t specify a position or range for an axis, the default position will be used. The default position of the italic axis is 0 (normal) and the default for the weight axis is 400 (regular).

~ CSS API update | Google Fonts | Google for Developers

Ref: Getting Variable Fonts from Google Fonts - Launch 2 Success

Getting italic variants:

https://fonts.googleapis.com/css2
    ?family=Lora
        :ital,
        wght@1,400;1,700              # only italic, regular & bold
            @0,400;0,700;1,400;1,700  # both normal and italic, regular & bold
    &family=Noto+Serif+SC
        :wght@400;700                 # only normal, regular & bold
    &text=...
    &display=swap

Optimising (v1 & v2) #

[C]onsider specifying a text= value in your font request URL. This allows Google Fonts to return a font file that’s optimized for your request. In some cases, this can reduce the size of the font file by up to 90%.

~ CSS API update | Google Fonts | Google for Developers

subset ≠ text! In Google Fonts, subset is for script types. It will most likely not reduce the font size to be downloaded.

Aside: Google Fonts via @font-face #

font-variant(-x) and font-feature-settings #

Ref:

Set font-feature-settings: "tnum"; or font-variant-numeric: tabular-nums; for tabular numbers.

Language-wise fonts #

To-read: Better together: Displaying Japanese and English text on the web | by Rachel Simone Weil | Prototypr

Subsetting #