FROM CACHE - en_header

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

Accepted Solutions (2)

Accepted Solutions
LitExtension
Shopify Partner
4445 909 938

This is an accepted solution.

Hi @NaomiRD ,

If it helped you solve your issue, please mark it as a solution. 

If you have any difficulty, you can contact me 🙂 Happy to help you.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!

View solution in original post

LitExtension
Shopify Partner
4445 909 938

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!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!

View solution in original post

Replies 37 (37)
LitExtension
Shopify Partner
4445 909 938

Hi @NaomiRD ,

Does that font belong to google fonts? If belong to google font, can you send me 2 font names, I will guide you in detail.

If not in google fonts, you just need to upload 2 fonts in assets. https://i.imgur.com/AZnLv4t.png 

Then you go to the file assets/theme.scss.liquid , find 'settings.type_header_font' and add code here: https://i.imgur.com/hfI3tsJ.png

Code:

@font-face {
	font-family: 'fontname_1';
	src:  url('{{ 'fontname_1.eot' | asset_url }}') format('embedded-opentype'),
        url('{{ 'fontname_1.ttf' | asset_url }}') format('truetype'),
        url('{{ 'fontname_1.woff' | asset_url }}') format('woff'),
        url('{{ 'fontname_1.svg' | asset_url }}') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'fontname_2';
	src:  url('{{ 'fontname_2.eot' | asset_url }}') format('embedded-opentype'),
        url('{{ 'fontname_2.ttf' | asset_url }}') format('truetype'),
        url('{{ 'fontname_2.woff' | asset_url }}') format('woff'),
        url('{{ 'fontname_2.svg' | asset_url }}') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

With fontname_1, fontname_2 is the name of the 2 fonts you upload.
And if the font you upload doesn't have formats like eot, ttf,... you can delete the corresponding code.
Ex: doesn't have formats like eot:

@font-face {
	font-family: 'fontname_1';
	src:  url('{{ 'fontname_1.ttf' | asset_url }}') format('truetype'),
        url('{{ 'fontname_1.woff' | asset_url }}') format('woff'),
        url('{{ 'fontname_1.svg' | asset_url }}') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

Hope it clear to you.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
NaomiRD
Excursionist
29 1 1
Hi @LitExtension

Thank you for helping with this. Could I just clarify a few things.

Neither of my fonts are google fonts. One I’ve paid for and the other I’ve downloaded.

Do I need to delete the additional file types and just use the ones the fonts came in? For example, Think-Pink-Regular comes in woff, otf and ttf and Renown-Monoline-Sans just come in otf.

If I’ve already added the custom-font code, should I remove this before adding this code?

Many thanks

Naomi
NaomiRD
Excursionist
29 1 1

Hi @LitExtension 

This is what I've now added above the settings.type_header_font.

@font-face {
font-family: 'Think-Pink-Regular_1';
src: url('{{ 'Think-Pink-Regular_1.otf' | asset_url }}') format('embedded-opentype'),
url('{{ 'Think-Pink-Regular_1.ttf' | asset_url }}') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Renown-Monoline-Sans_2';
src: url('{{ 'Renown-Monoline-Sans_2.otf' | asset_url }}') format('embedded-opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

 

Firstly, is this correct? I've got two file types for the first font, so have included both.

Secondly - Should I now be able to choose this font from the typography section in theme settings or will it appear automatically?

 

Many thanks for all your help so far.

 

Naomi

LitExtension
Shopify Partner
4445 909 938

Hi @NaomiRD ,

I checked and it works properly. Now, you just need to name those 2 fonts( Think-Pink-Regular_1, Renown-Monoline-Sans_2 ) in the CSS file.

Ex: 

h2.feature-row__heading {
    font-family: 'Think-Pink-Regular_1';
}

Hope it clear to you.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
NaomiRD
Excursionist
29 1 1

HI @LitExtension 

 

Thank you so much for your help so far. That makes sense but could you tell me which css file I need to add it to? Sorry if that's straight forward. I'm still learning.

 

Naomi

LitExtension
Shopify Partner
4445 909 938

Hi @NaomiRD ,

Go to  assets/theme.scss.liquid file. You can add the CSS code here, everything will work fine.

Do you want it to replace Headings font and Body text font? https://i.imgur.com/466jODr.png 

If you want, you go to assets/theme.scss.liquid file, find 'header_font.family' and replace 'Think-Pink-Regular_1'.

Refer: https://i.imgur.com/ZBcEuLP.png => https://i.imgur.com/yJifap1.png

You can also reverse it if you need the Headings font to be 'Renown-Monoline-Sans_2'.

Hope it clear to you.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
NaomiRD
Excursionist
29 1 1

@LitExtension 

 

Ive add this to the bottom of theme.scss.liquid

h2.feature-row__heading {
font-family: 'Think-Pink-Regular_1';
}
h2.feature-row__heading {
font-family: 'Renown-Monoline-Sans_2';
}

Is that the correct place? 

Ive followed your instructions on adding the heading and body font which looks like this but it hasn't come up as an option in theme settings/typography. Am I missing a step?

 

$settings-font-stack-header: 'Think-Pink-Regular_1', {{ header_font.fallback_families }};
$settings-font-style-header: {{ header_font.style }};

$settings-font-stack-body: 'Renown-Monoline-Sans_2', {{ base_font.fallback_families }};

 

Thanks again. You are being so helpful.

Naomi

LitExtension
Shopify Partner
4445 909 938

Hi @NaomiRD ,

It just helps you to import the font and call it directly in the CSS file. It is not added directly in the settings of Customize.

Hope it clear to you.

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!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
NaomiRD
Excursionist
29 1 1

Hi @LitExtension 

Im not entirely sure what you mean. How do I bring up the font on my page once I’ve added the script above? Or have I added this incorrectly?

Many thanks

Naomi

LitExtension
Shopify Partner
4445 909 938

Hi @NaomiRD ,

Please send your site and if your site is password protected, please send me the password. I will check it for you.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
NaomiRD
Excursionist
29 1 1

Hi @LitExtension 

My site is https://nrpenna84.myshopify.com and the password is cleost

 

Thanks again

Naomi

LitExtension
Shopify Partner
4445 909 938

Hi @NaomiRD ,

I checked and you still haven't uploaded the font in Assets: https://i.imgur.com/fe4ZHWo.png

This is the first step to get it working: https://i.imgur.com/p4phAc2.png

Hope it clear to you.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
NaomiRD
Excursionist
29 1 1

Hi @LitExtension 

That seems really odd as they are here

84860161-3556-47A6-A94E-7CEA7E872E31_1_201_a.jpeg

Or is this not in the right place?

LitExtension
Shopify Partner
4445 909 938

Hi @NaomiRD ,

You upload the file with the name 'Think-Pink-Regular' but the code gets the name 'Think-Pink-Regular_1'.

I instruct fontname_1 and fontname_2 to distinguish 2 names, not required to add _1 and _2 after each name.

Please change code:

@font-face {
font-family: 'Think-Pink-Regular_1';
src: url('{{ 'Think-Pink-Regular.otf' | asset_url }}') format('embedded-opentype'),
url('{{ 'Think-Pink-Regular.ttf' | asset_url }}') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Renown-Monoline-Sans_2';
src: url('{{ 'Renown-Monoline-Sans.otf' | asset_url }}') format('embedded-opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

Hope it clear to you.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
NaomiRD
Excursionist
29 1 1

Hi @LitExtension 

I'm an idiot!! Thank you for being so patient. This is now working for me and I really appreciate all your help over the past few days.

Naomi

LitExtension
Shopify Partner
4445 909 938

This is an accepted solution.

Hi @NaomiRD ,

If it helped you solve your issue, please mark it as a solution. 

If you have any difficulty, you can contact me 🙂 Happy to help you.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
LaseMakers
Shopify Partner
86 1 25

Hi @LitExtension 

I'm trying to follow this steps to be able to add my font, but in the new Dawn theme "theme.scss.liquid'' is not on the assets file, and can't finf 'settings.type_header_font' anywhere else.

Do you know where do I need to place this code in Dawn theme ?

Thank you so much for your time and patience 😊

Carolina

LitExtension
Shopify Partner
4445 909 938

Hi @LaseMakers,

With Dawn theme: you can refer 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!

Or you can create a new Question and send me the link. I will check it.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
LaseMakers
Shopify Partner
86 1 25

Hi!! thank you! I did tried what you described and it did not work.

This is the link for my new question, really hope you can help:

https://community.shopify.com/c/shopify-design/add-custom-font-to-heading-on-dawn-theme/m-p/1367222

Best wishes,

Carolina