Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
Solved! Go to the solution
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.
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.
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.
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
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.
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
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.
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
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.
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
Hi @NaomiRD ,
Please send your site and if your site is password protected, please send me the password. I will check it for you.
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.
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.
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
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.
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
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.
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
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
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!
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
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.
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.
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.
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%}
And this is what I've entered to try and change the heading and body
Am I missing something?
Hi @NaomiRD,
Can you send me the site link. I will check it.
Hi @NaomiRD,
I checked and it shows fine.
What are you wanting? Please send me screenshot with description, I will check it.
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;
Not sure why its not recognising the Renown font?
@LitExtension wrote:Hi @NaomiRD,
I checked and it shows fine.
What are you wanting? Please send me screenshot with description, I will check it.
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
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.
Hope it helps!
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
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
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!
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.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024