How can I integrate a new font for specific headings?

Store Design
,
1

Hi there,

I want some, not all, of my headings to have a different font called Unique Surfer. I already downloaded it but am not sure how to integrate the code and which code I need, since many tutorials are not up to date…

Do you know which code I need of where I can find a current instruction?

https://taneraskin.com/pages/about

Best,

Isabelle

2

To integrate a custom font called “Unique Surfer” for specific headings on your Shopify store, you can follow these steps:

  1. From your Shopify admin dashboard, go to “Online Store” and select “Themes”.

  2. Find the theme you’re using and click on the “Actions” button, then choose “Edit code”.

  3. In the “Assets” folder, locate or create a new CSS file (e.g., custom.css) where you will add the font integration code.

  4. Upload the Unique Surfer font file to the “Assets” folder by clicking on the “Upload files” button.

  5. Open the CSS file you created or located in the previous step and add the following code:

@font-face {
  font-family: 'Unique Surfer';
  src: url('{{ 'unique-surfer.ttf' | asset_url }}') format('truetype');
}

h1 {
  font-family: 'Unique Surfer', sans-serif;
}

/* Add similar CSS rules for other heading levels if needed, like h2, h3, etc. */
3

Thank you for the suggestion. I inserted the code at the bottom of base.css, however it’s not working…

The Font name is UniqueSurfer and the file name UniqueSurfer.woff2

I added the following code to www.taneraskin.com:

@font-face {
font-family: ‘UniqueSurfer’;
src: url(‘{{ ‘uniquesurfer.woff2’ | asset_url }}’) format(‘woff2’);
}

h1 {
font-family: ‘UniqueSurfer’, sans-serif;
}

What did I miss?

4

Hello @isabellemaria

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5 {
    font-family: Unique Surfer !important;
}