How to load existing Shopify font for page

Technical Q&A
1

I want to add a font already available on Shopify to my page.

I want to use the “Playball” font, which is already available in Shopify Typography config, how can I load this font for my page so I can set it through CSS?

I there a way to load this font for my page without setting it for the entire site (Typography config), and without adding it as a custom font where I provide the font as a site specific asset?

Thank you,

Andrei

2

Hello @AndreiGC ,

Activate the font and check the path in the source code.
Copy it and use it in the page where you need with style tag or use in theme.liquid with if condition so it will apply only to the specific page.

Next revert back the font selection to default so the other page will stay as it is.

Thanks

3

Hello @Guleria

Thank you for the answer.

Added the font using font-face and i am able to set it on elements using CSS.

@font-face {
  font-family: 'Playball'
  src: url('https://www.charlotte.gold/cdn/fonts/playball/playball_n4.761460400fa32edc77d34af24e7bb6acce5f32de.woff2?h1=OGEyZWVlLTgxLmFjY291bnQubXlzaG9waWZ5LmNvbQ&h2=Y2hhcmxvdHRlLmdvbGQ&hmac=de3ef2fa71739be3899aa221eacb9d9c54062d59ad82c15188a6c60d1b907314') format('woff2');
  font-weight: normal;
  font-style: normal;
}

This is where the font is loaded from, however, once i set any other font as my typography setting, this URL is no longer available/loading and the font is no longer available.

Are the fonts available through any other URL? Or should i add them in some other way than using font-face?

Thank you,

Andrei

4

Then its better to download the font from the URL and upload it to Content → Files
Now use this URL

5

Alright, i’ll go the “custom font” route, thanks for the assistance