Customising a font

[Marycrichton]

Hi All,

I am building a website in Dawn Theme.

Across the site, all my headings and body texts use the same font. However, there is just one bit of heading text that I need to change so that it matches the brand font. So I need help customising one heading.

Thanks,

Mary

[lf-ecom-shops]

Hi @Marycrichton , I’ll try. Will get back to you as soon as I have it

[lf-ecom-shops]

OK, think I got it. What exactly do you want to change, in the announcement bar or header etc, what is the section called and which font do you want @Marycrichton ?

[Marycrichton]

Thank you so much.

I want to change: In a ‘rich text’ box I want to change the title font.

In the image below the text I am referring to is ‘SAATCHI GALLERY’

The font I would like to use is called Bodoni Sans Text Regular and I need it to be larger than the text below and also in bold, colour: black

[lf-ecom-shops]

Hey Mary, no problem

[lf-ecom-shops]

@Marycrichton I’m on it, it will probably take about 10-30 minutes. If you like the outcome then, I would appreciate a mark as solved, a like and if you want a little tip, but of course this is up to you

[lf-ecom-shops]

OK, I have it now, you need to:

1. Dowload your font if you haven’t already (it’s available at dafont)

2. When you download it from dafont, it will be a TFF file. Search for TFF to WOFF converter. Then download the converted file

3. Go to your theme > edit code > go to assets > click on add new asset > upload the converted file and save

4. Go to the rich text section in the theme editor and click on it, when you scroll down you will find a box that says custom css, add this code:

.rich-text__heading {
font-family: "TEXTFONTEXAMPLE";
src: url("TEXTFONTEXAMPLE.woff2") format("woff2"),
url("TEXTFONTEXAMPLE.woff") format("woff");
}

4. Go to your assets folder again and look what the font asset you uploaded is named, for example TEXTFONTEXAMPLE, copy the name and paste it into everything in the code that says TEXTFONTEXAMPLE.

Then you should be ready to go @Marycrichton , hope that I could help you, please mark as solved, give me a like and if you want you can leave a little tip for my work. Just send me a private message if you want to leave a tip.

Best Regards,

Florian

[Marycrichton]

Amazing.

On, 4.Go to the rich text section in the theme editor and click on it, when you scroll down you will find a box that says custom css, add this code:

^ I can not find this custom CSS

[lf-ecom-shops]

Oh sorry, I meant not in the code, but when you customize your theme, you go to your rich text section and then there should be custom css

[lf-ecom-shops]

Click on customize

Click on rich text

Then add the code I gave you

[Marycrichton]

Your amazing

But… Can you see the error

[lf-ecom-shops]

Yeah I do, remove the code from the richt text section, then go to your theme code, go to base.css, scroll down to the bottom and paste the code in a seperate line. Look if that will work

[lf-ecom-shops]

@Marycrichton That should work

[Marycrichton]

That didn’t change the font of the rich text title on this page

[lf-ecom-shops]

Oh come on HAHA. I’m sorry I’ll try again

[Marycrichton]

Thank you.

If I do this : Yeah I do, remove the code from the richt text section, then go to your theme code, go to base.css, scroll down to the bottom and paste the code in a seperate line. Look if that will work

How would it now just to target the rich text on that particular page?

[lf-ecom-shops]

@Marycrichton Maybe try to add an !important tag, if that won’t work, I’m out, sorry. I mostly use fonts from google or regular shopify fonts, I’m a Full Stack Developer but not so familiar with custom fonts that arents from google fonts. Sorry

[Marycrichton]

Ah!! I am so sorry it did not work.

Maybe I should just use a google font

[lf-ecom-shops]

That would be wayyyy easier. And there are so many good google fonts if you do the research

[Marycrichton]

Thank you so much for all your help