Correct an error after adding a custom font the wrong way with Dawn Theme

Julietteweb · ‎09-24-2024

Hello,

After a long search for the right way to add a font to my theme, I decided to use this method:

https://www.youtube.com/watch?v=CRNTnASxTCg&t=210s

It did indeed change the font, but not with the right one. My downloaded font is “Brother1816 Extra Bold” and the one now present on the theme is similar to “MessinaModern” (a font I had tried to add but then removed).

I must have made a mistake somewhere in my theme code, but I can't figure out what it is.

What I just did :

- Add the font file woof.2 in “edit code”>“assets”>“add a section”.
(mine is “Brother1816-ExtraBold;woff2”)
- Go to “theme.liquid
- Add the following code below the line “{% style %}”:

@font-face {
        font-family: "Brother ExtraBold Font";
        src : url({{"Brother1816-ExtraBold.woff2" | asset_url }}) format("woff.2");
      }

-Go to “assets”>"base.css
-Add the following code at the end of the file to add it to all titles (or use the inspect element on the website and do it text section by text section, but I wanted a global and faster result)

h1, h2, h3, h4 {
  font-family: "Brother Bold Font" !important;
}

I really hope someone could help me.

Thank you for taking teh time to read this !

namphan · ‎09-30-2024

Hi @Julietteweb,

You can follow these steps:

- Step 1: Upload font at File and paste link at theme.liquid file:

- Step 2: Change the font name here to display the font for Heading:

- Step3: add code here to display for button:

☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

View solution in original post

Julietteweb · ‎09-24-2024

UPDATE :

I tried to do the same process from the very begining on a new theme (I used Dawn) and the same thing happened.

No matter what I write after font-family: ... even just a letter the font change but always in the wrong way, with a font I don't know and which I didn't add to my theme's code0

DitalTek · ‎09-24-2024

@Julietteweb

You can referent this guide:

https://community.shopify.com/c/shopify-design/adding-custom-fonts-to-shopify/td-p/1703100

- You can please Like and Accepted Solution if my suggestion helpful.
- And you want to hire developer Theme or App Shopify => Feel free to send me a DM or contact to us via Email | WhatsApp
- Website: ditaltek.com

namphan · ‎09-24-2024

Hi @Julietteweb,

Currently, declaring asset_url will not work well for fonts, if you want, you can upload fonts at content > files and then enter the link, it will work fine.

Refer https://community.shopify.com/c/shopify-design/issue-adding-custom-font/m-p/2770812#M725515

☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

Julietteweb · ‎09-29-2024

Hello @namphan,

I apologize for my late reply. Thank you for taking the time to answer.

I read your answer on the link you gave me, if I understood correctly I should only add the font face code in the theme.liquid file below the <head> section.

I add this in the theme.liquid above </head> :

 <style>
      @font-face {
        font-family: 'Brother';
        src: url('https://cdn.shopify.com/s/files/1/0840/3356/9033/files/Brother1816-ExtraBold.woff2?v=1727643168') format('woff2');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
      }
    </style>

I'm not use to coding, I followed your steps but I think I miss something.

Thank you!

namphan · ‎09-29-2024

Hi @Julietteweb,

Can I send you a collaborator invitation? It will help me check things better.

☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

Julietteweb · ‎09-30-2024

Hello @namphan ,

I'm sorry I'm replying late, it was night in Europe.

Of course that would be really helpful for me ! Thank you so much !

namphan · ‎09-30-2024

Hi @Julietteweb,

You can send the collaborator code at private message, I will send you invitation and check it

☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

Julietteweb · ‎09-30-2024

@namphan it's done

namphan · ‎09-30-2024

Hi @Julietteweb,

You can follow these steps:

- Step 1: Upload font at File and paste link at theme.liquid file:

- Step 2: Change the font name here to display the font for Heading:

- Step3: add code here to display for button:

☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

JonathanSor · ‎09-24-2024

Hi,

The font-family should be consistent for both the @font-face and elements like h1, h2, and * {}. Currently, you have different font-family names assigned: "Brother ExtraBold Font" and "Brother Bold Font." Also, the format should be "woff2," not "woff.2."

P.S. If this doesn't solve your issue, try my free app, "Font Pro." It only takes about 5 minutes to set up, and you can preview fonts in the store without applying them.

Font Pro - Shopify Font Manager app with AI-powered CSS Selector generator

Correct an error after adding a custom font the wrong way with Dawn Theme

Correct an error after adding a custom font the wrong way with Dawn Theme

Community Blog Articles