How do I reference Shopify fonts using custom CSS?

Store Design
1

I am creating some Shopify pages using custom HTML and custom CSS - so I’m not using the Theme Customizer so there’s no drop down box to click and choose a font from. I have to tell the page where to find the fonts I’m using.

I want to use some fonts that are already in Shopify’s font library. So I don’t want to and shouldn’t need to load the font files into the ASSETS folder or the Content/Files folder or use a 3rd party source like google fonts.

As an example, the Google Font ‘Lato’ is already part of Shopify’s font library. I want to use the @font-face rule in my CSS with some Liquid code to tell the page to load that entire font so that each time I want to use it on some text, it will display correctly.

eg. First I would tell the page which font to load and where to find that font:

@font-face {
font-family: 'Lato';
src: url("{{ 'Lato.woff' | font_url }}");
}

Then I can use the font wherever I like eg:

h1 {
font-family: 'Lato';
font-weight: 700;
font-size: 2em;
}

What I’m trying to do is use the font_url filter to generate the URL for that font in Shopify’s font library.

I tried that code above but it didn’t work. Does anyone know how to do this?

And - ‘Lato’ for example has 18 variations of thin, regular, italic, bold, black etc - each with its own ‘handle’.

handle.png
handle.png758×540 34.2 KB

Do I need to use the ‘handle’ as the name of the font eg.

@font-face {
font-family: 'Lato';
src: url("{{ 'lato_n1.woff' | font_url }}");
}

I tried that too - didn’t work.

2

Edit: I have realized that you can just use the Shopify fonts without having to load anything at all.

my_css_rule {
  font-family: "Poppins";
}

Seems like the font filters are only supported for font objects returned by a font picker setting

https://shopify.dev/docs/api/liquid/objects/font

I haven’t been able to figure out how to construct that object manually - if that is even possible
It would be nice if we could do that