Fonts

Afia websites can use many different components, such as a Hero and a Footer.

Sites typically want fonts to be consistent across their components. To support this, Afia provides components with several CSS variables that map to a site's fonts.

Use var(--afia-headline) for titles, headers and primary text.

Use var(--afia-paragraph) for paragraphs, UI elements such as buttons, and other secondary text.

In rare cases, var(--afia-accent) may be used as a third font. Be wary, since using more than two fonts may cause visual clutter.

Adding a Font

The Afia CLI exposes commands for setting a site's fonts.

Begin by creating an Afia workspace:

mkdir my-workspace
cd my-workspace
afia init

Next, download the actor font from Google Fonts:

mkdir -p assets/fonts
curl -L https://fonts.gstatic.com/s/actor/v18/wEOzEBbCkc5cO3ek.ttf > assets/fonts/actor.ttf

Add the font file to your website's asset dependencies:

afia assetdep create --slug actor-regular --file assets/fonts/actor.ttf -w basic

Create a font from the asset dependency:

afia font create --slug actor --assetdep actor-regular -w basic

Use the afia font set command to use the font in the site:

afia font set -w basic \
  --headline 'afia-font(actor), "Georgia", serif' \
  --paragraph '"Calibri", "Verdana", "Arial", sans-serif' \
  --accent '"Calibri", "Verdana", "Arial", sans-serif'

This sets the "basic" site's headline font to "actor". If the "actor" font ever fails to load, "Georgia" and serif serve as fallbacks.

It also sets the paragraph and accent fonts to "Calibri", followed by a chain of fallbacks.

Use afia font get to view the site's fonts:

afia font get -w basic

--headline 'afia-font(actor), "Georgia", serif'
--paragraph '"Calibri", "Verdana", "Arial", sans-serif'
--accent '"Calibri", "Verdana", "Arial", sans-serif'

Using Fonts from Components

By default, components automatically inherit fonts from the site that is displaying them. This helps the component fit visually within the site.

h1 through h6 default to the headline font. The site's body uses the paragraph font, which the component then inherits.

When more control is needed, the --afia-headline, --afia-paragraph and --afia-accent CSS variables can be to directly apply these fonts:

/* Inside your component's CSS */

.my-header {
  font-family: var(--afia-headline), serif;
}

.my-subtext {
    font-family: var(--afia-paragraph), sans-serif;
}