Skip to content

Fonts

Jump to bottom
Regis Philibert edited this page Sep 1, 2021 · 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
fonts:
- family: Open
  file: fonts/open-sans-v17-latin-300
  weight: 300
  style: normal
- family: Open
  file: fonts/open-sans-v17-latin-300italic
  weight: 300
  style: italic
- family: Open
  file: fonts/open-sans-v17-latin-regular
  weight: 400

Hugo template

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

HTML

<head>
<!-- fonts -->
<link as="font" crossorigin=" " href="/fonts/open-sans-v17-latin-300.ttf" rel="prefetch">
<link as="font" crossorigin=" " href="/fonts/open-sans-v17-latin-300.woff" rel="prefetch">
<link as="font" crossorigin=" " href="/fonts/open-sans-v17-latin-300.woff2" rel="prefetch">
<style >
@font-face {
  font-family: Open;
  font-style: normal;
  font-weight: 300;
  src: local("Open"),
url("/fonts/open-sans-v17-latin-300.ttf") format("truetype"),
url("/fonts/open-sans-v17-latin-300.woff") format("woff"),
url("/fonts/open-sans-v17-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: Open;
  font-style: italic;
  font-weight: 300;
  src: local("Open"),
url("/fonts/open-sans-v17-latin-300italic.ttf") format("truetype"),
url("/fonts/open-sans-v17-latin-300italic.woff") format("woff"),
url("/fonts/open-sans-v17-latin-300italic.woff2") format("woff2");
}
@font-face {
  font-family: Open;
  font-weight: 400;
  src: local("Open"),
url("/fonts/open-sans-v17-latin-regular.ttf") format("truetype"),
url("/fonts/open-sans-v17-latin-regular.woff") format("woff"),
url("/fonts/open-sans-v17-latin-regular.woff2") format("woff2");
}
</style>
</head>

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.
  • {descriptor}: Any key matching any of those font descriptor (font- prefix can be ommited):
    • font-family
    • font-weight
    • font-style
    • font-display
    • font-variant
    • font-feature-settings
    • font-variation-settings
    • font-stretch

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!) for every files matching the passed basename.

Settings

For now only one

prefetch

A string pointing to either the environment (as defined in huge/env/Get) or always or never. Defaults to always.

See huge/env/When

Functions

huge/fonts/tags

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

Parameters

Any

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