Skip to content

Fonts

Jump to bottom
Regis Philibert edited this page Mar 30, 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
prefetch: always
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>

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.
  • local: The string 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.
  • preload: A boolean. This allow to overwrite the global preload setting detailed below for the given declaration.
  • {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.

preload

A string or a slice either containing or pointing to the environment (as defined in huge/env/Get) or the string always or never. Defaults to production. See huge/env/When

See huge/env/When

disable_local

If set to true, this will globally disable the inclusion of a local source in the src property.

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