Skip to content

Fonts

Jump to bottom
Regis Philibert edited this page Dec 1, 2022 · 9 revisions

HUGE/Fonts handles the project's self hosted fonts by producing the appropriate fontface declarations and prefetching.

TL;DR:

HUGE Config

# _huge/config/fonts.yaml
preload:
  - woff2
  - ttf
base:
  display: swap
fonts:
- family: Open
  file: fonts/open-sans-v17-latin-300
  weight: 300
  style: normal
- family: Open
  file: fonts/open-sans-v17-latin-700
  weight: 700
- family: ComicSans
  weight: 400
  file: fonts/comic-sans-oh-no
  preload:
  - eot

Hugo template

<head>
<!-- fonts -->
{{ partial "huge/fonts/tags "any" }}
</head>

HTML

<head>
<!-- fonts -->
<link as="font" crossorigin="anonymous" href="/fonts/open-sans-v17-latin-300.ttf" rel="preload">
<link as="font" crossorigin="anonymous" href="/fonts/open-sans-v17-latin-300.woff2" rel="preload">
<link as="font" crossorigin="anonymous" href="/fonts/open-sans-v17-latin-700.ttf" rel="preload">
<link as="font" crossorigin="anonymous" href="/fonts/open-sans-v17-latin-700.woff2" rel="preload">
<style >
@font-face {
  font-display: swap;
  font-family: Open;
  font-style: normal;
  font-weight: 400;
  src: local("Open"),
url("/fonts/open-sans-v17-latin-400.ttf") format("ttf"),
url("/fonts/open-sans-v17-latin-400.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: Open;
  font-weight: 700;
  src: local("Open"),
url("/fonts/open-sans-v17-latin-300italic.ttf") format("ttf"),
url("/fonts/open-sans-v17-latin-300italic.woff2") format("woff2");
}
@font-face {
  font-family: ComicSans;
  font-weight: 400;
  src: local("ComicSans"),
url("/fonts/comic-sans-oh-no.eot") format("embedded-opentype");
}
</style>
</head>

How it works?

HUGE will look for each font declaration and create a @fontface declaration with the passed selectors with all the src property functions (url, format, and the dreaded local of which you can opt out) for every files matching the passed basename.

Declaring the project's fonts

Users need to declare their fonts in the fonts key of _huge/config/fonts.{yaml|json|toml}

Each fonts declaration takes a number of parameters, only two being mandatory: the file and the family. Here is the list of available keys:

  • file*: The base filename (no extension!) relative to the assets directory for that given font.
  • family*: The name of the font family to which this file belongs two. Can be herited from base setting described below.
  • local: A boolean, a string or a slice. The string or list of strings which should be used for the local src (ex. src: local('My-Font'), url(...)). Can be set to false to opt out of local function src mention altogether. If set to true a local will be generated based on the font family name.
  • preload: A boolean or a slice of formats. This allow to overwrite the global preload setting detailed below for the given declaration. If a slice, only the font files whose format is in the slice will be preloaded.
  • {descriptor}: Any key and its value will be passed as a descriptor (font- prefix can be ommited).

Settings

Those are the global fonts settings.

fonts

The fonts declarations discussed above.

base

That allows to define font properties to all your fonts by default. Pretty handy for font-display or font-family if most of your font declaration are using the same.

preload

A boolean or a slice of formats. This defines which files shall be preloaded for every font.

Functions

huge/fonts/tags

The "huge/scripts/tags" partial is used to print the tags of some of the declared scripts in the templates. There is no required parameters.

Example

{{ partial "huge/fonts/tags" "fonts" }}

This is a HUGE WIP right now! Stay tune for more info as we push it to Alpha!

Clone this wiki locally