Add more than one custom font to the narrative theme

Solved
NaomiRD
Excursionist
29 1 1

Hi

I would like to add 2 custom fonts to the narrative theme. One to use for headings/sub headings and the other as body text. I have already added one custom font but would like this font to be used for headings only.

If anyone has any instructions on how to do this that would be great.

Thanks

Naomi

Replies 37 (37)
NaomiRD
Excursionist
29 1 1

Hi @LitExtension 

 

Sorry to bother you again but I have been looking at the Dawn theme and wondered if I would need to follow the same method to add a different heading and body font or would it be slightly different as its a newer theme?

 

Many thanks

LitExtension
Shopify Partner
3793 750 790

Hi @NaomiRD,

By default, it is the same, only the file to add the CSS is different.

You can refer to the following post: https://community.shopify.com/c/technical-q-a/add-a-custom-font-to-the-dawn-theme-version-1-1-0/m-p/...

Hope it helps!

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Have not had your Shopify store yet? Start the 14-day free trial HERE
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
NaomiRD
Excursionist
29 1 1

Hi @LitExtension 

 

I have looked at these instructions in detail and they only describe how to add one font to the whole of the webpage. If I'm wanting to follow the same format, with a different heading and body text, do I need to add in something more specific, like h.2 or change something in the {%style%} section?

 

Thanks, Naomi

LitExtension
Shopify Partner
3793 750 790

Hi @NaomiRD,

After you successfully add the font, you can customize it for each place you want. 

For example the font Think-Pink-Regular, you want to add to the heading of the section: 

Go to Assets > base.css and paste this at the bottom of the file:

.h1{
  font-family: 'Think-Pink-Regular';
}

Hope it is clear to you.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Have not had your Shopify store yet? Start the 14-day free trial HERE
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
NaomiRD
Excursionist
29 1 1

@LitExtension 

 

All makes sense and works for the heading but as I want to change the body text too, I'm assuming I can't using .h2 or other heading types, I would need to point to the body text? Is this also in the base.css file?

 

Thanks again for all the assistance. 

LitExtension
Shopify Partner
3793 750 790

Hi @NaomiRD,

If you want to change all headings or body, you can change the code here: 

If for each section you need to have your own custom code, like my previous tutorial.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Have not had your Shopify store yet? Start the 14-day free trial HERE
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
NaomiRD
Excursionist
29 1 1

Hi @LitExtension 

 

Thank you again for your support and advice so far. I have followed your instructions, or at least I think I have, but I only seem to be able to change the heading font. This is what I've entered under {%style%}

 

Screenshot 2021-12-18 at 21.32.43.png

And this is what I've entered to try and change the heading and body

 

Screenshot 2021-12-18 at 21.32.58.png

Am I missing something?

 

LitExtension
Shopify Partner
3793 750 790

Hi @NaomiRD,

Can you send me the site link. I will check it.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Have not had your Shopify store yet? Start the 14-day free trial HERE
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
NaomiRD
Excursionist
29 1 1

Hi @LitExtension 

 

Here's the link, password is DW2021

 

https://definitelywild.co.uk

 

Thank you

LitExtension
Shopify Partner
3793 750 790

Hi @NaomiRD,

I checked and it shows fine. 

Screenshot.png

What are you wanting? Please send me screenshot with description, I will check it.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Have not had your Shopify store yet? Start the 14-day free trial HERE
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
NaomiRD
Excursionist
29 1 1

Hi @LitExtension 

 

The Think Pink Regular is correct and being used for all the headings but the Renown Monoline Sans isn't showing in the body text. Here's what it should look like;

 

Screenshot 2021-12-19 at 14.34.31.png

 

Not sure why its not recognising the Renown font?

 

 


@LitExtension wrote:

Hi @NaomiRD,

I checked and it shows fine. 

Screenshot.png

What are you wanting? Please send me screenshot with description, I will check it.


 

NaomiRD
Excursionist
29 1 1

Hi @LitExtension 

 

I wondered whether you'd had a chance to explore why the Renown-Monoline-Sans font isn't working? I've tried deleting the asset and then adding it again incase that solved it but no such luck. Or is there another way to add the heading and body fonts in the Dawn theme?

 

Many thanks

LitExtension
Shopify Partner
3793 750 790

Hi @NaomiRD,

Can you send me the link of the font not displaying properly? Because I tested your site and everything works fine.

Font body and heading are correctly added and displayed well.

Screenshot_28.png

Hope it helps!

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Have not had your Shopify store yet? Start the 14-day free trial HERE
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
NaomiRD
Excursionist
29 1 1

Hi @LitExtension 

 

Its strange as the body font that is displaying is not Renown-Mononline-Sans, even though the code says so. Ive purchased this font so the files are on my computer.

 

Here is a link to one of the sites its available on - https://www.fontspace.com/renown-monoline-font-f34582

 

I've added the font into assets as instructed. Or would you like me to send you the link to that instead?

 

Many thanks

NaomiRD
Excursionist
29 1 1

Hi @LitExtension 

 

Do you know whether the Dawn theme recognises .otf files? Ive played around with the fonts and noticed it will recognise the Think Pink Regular font when I replace Renown Monoline Sans as the body font but it has an alternative file type of .ttf which it might be using?

 

Or can I put the code for the font face somewhere else so it can be displayed on the webpage?

 

Many thanks

LitExtension
Shopify Partner
3793 750 790

Hi @NaomiRD,

.otf files still work fine for Dawn theme.

You can try with this code:

@font-face {
          font-family: 'Renown Monoline Sans';
          src:  url('{{ 'Renown-Monoline-Sans.otf' | asset_url }}') format('opentype');
          font-display: swap;
        }

Hope it helps!

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Have not had your Shopify store yet? Start the 14-day free trial HERE
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
LitExtension
Shopify Partner
3793 750 790

This is an accepted solution.

Hi @NaomiRD,

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Have not had your Shopify store yet? Start the 14-day free trial HERE
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
NaomiRD
Excursionist
29 1 1

Hi @LitExtension 

 

This has solved the issued so thank you very much for all your help.