Skip to main content

Fonts

When creating a new website you'll probably want to add your own fonts as well. You can do this in two ways.

Using an enqueue hook (external hosting)​

The first is to enqueue an external stylesheet by using the wp_enqueue_scripts and enqueue_block_editor_assets hooks in your child theme.

Add them to your assets (provide fonts locally).​

You might want to host the fonts locally for several reasons. One of them is that you are not dependent on external CDN's. If the design requires a Google font you can download it locally via this tool.

Once downloaded you can add the fonts to the resources/assets/fonts/FONTNAME folder and include the generated stylesheet to resources/assets/style/01-settings/_fonts.scss

⚠️ Make sure to update the filepath when generating the font when using the above tool.

Add font-family value to variables​

When you've added your font you will now have to add the font variables in your _variables.scss. Read basic styling for more information about overwriting variables.

$base-font: "Lato", sans-serif;
$secondary-font: "Noto Serif", serif;