Re: Add a custom font to the Dawn Theme Version 1.1.0

Solved

Add a custom font to the Dawn Theme Version 1.1.0

gregorsart
Shopify Partner
63 1 19

Hello Community, does someone know how to implement a custom Font, when I use the dawn theme (I have the font in the .woff Format)

Thank you for your help,

newbie

Accepted Solution (1)

LitExtension
Shopify Partner
4860 1002 1151

This is an accepted solution.

First you need to upload it in Assets.
Then you go to the file layout/theme.liquid and add the code: https://i.imgur.com/Fdf5Ab4.png
@font-face {
font-family: 'fontname';
src: url('{{ 'fontname.woff' | asset_url }}') format('woff'),
font-weight: normal;
font-style: normal;
font-display: swap;
}
At the end you just need to get fontname, it will work fine.
Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 22 (22)

LitExtension
Shopify Partner
4860 1002 1151

This is an accepted solution.

First you need to upload it in Assets.
Then you go to the file layout/theme.liquid and add the code: https://i.imgur.com/Fdf5Ab4.png
@font-face {
font-family: 'fontname';
src: url('{{ 'fontname.woff' | asset_url }}') format('woff'),
font-weight: normal;
font-style: normal;
font-display: swap;
}
At the end you just need to get fontname, it will work fine.
Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
openeast
Tourist
7 0 3

Hi there, I tried this, but it didn't work for me so far as I can tell. Should the font be accessible in the typography section??

newbieka
Tourist
6 0 1

same problem. I followed the steps but it's not appearing as an option in the typography section of the theme. how so you get it to work? thank you!

ForeverRyic
New Member
10 0 0

can you explain this a little more ? do i just replace the word fontname?

diego_ezfy
Shopify Partner
2967 571 901

@gregorsart 

Please follow this step-by-step tutorial about how to install custom fonts. Let me know if you need any further help.

Kind regards,
Diego

NaomiRD
Excursionist
42 1 1

Hi

Ive followed your instructions and added a custom font but I would like to use more than one on my site. Is there an easy way to do this?  I am not very familiar with coding but found your instructions really easy to follow. 

I'm currently using the Narrative theme but hoping that doesn't make a difference.

Many thanks

Naomi

LitExtension
Shopify Partner
4860 1002 1151

Hi @NaomiRD ,

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

Thank you.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
NaomiRD
Excursionist
42 1 1
Hi

Many thanks for your response. Ive now posted a new question and hopefully this is the link.

https://community.shopify.com/c/technical-q-a/add-more-than-one-custom-font-to-the-narrative-theme/m...
LaseMakers
Shopify Partner
101 1 28

Hi!!

I have the same issue, I want to add a custom font only to headings, I'm using Dawn. 

Did you find a way to do it?

Really appreciate the help.

Thank you!!

Picknick
Excursionist
25 0 7

I did it like the description above. You may have to add h1,h2, cause many headlines are in the h2 class

Picknick
Excursionist
25 0 7

Hi,

its not working for the Dawn2.0 Theme. Does anyone have a solution which works for Dawn 2.0? Spent several hours, but didn't get it

LaseMakers
Shopify Partner
101 1 28

Hi @KKay 

This worked, but it added the font on my hole page and I just wanted in headings.

Do you know a way that it will only be added to headings on dawn?

Thank you!!

Carolina

Joan65
Tourist
19 0 1

Hello, trying to add an arial font to the announcement bar, and a different font to the rest of the site.  Any thoughts?

Joan Smith
StephanieG
Excursionist
10 0 2

this doesnt work for dawn theme

LitExtension
Shopify Partner
4860 1002 1151

Hi @StephanieG,

Refer https://community.shopify.com/c/technical-q-a/add-more-than-one-custom-font-to-the-narrative-theme/m...

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Shauletay
Excursionist
42 0 9

Hi

I used your guide and it worked.

 

but how do I do it so the custom font will only work on header?

I want to have 2 different fonts, one for the header and one for the body.

 

I tried change the h1, h2 etc. on your snippet but it didnt work.

 

thanks 

Shauletay
Excursionist
42 0 9

@diego_ezfy 

Hi 

I used your guide and it worked.

 

but how do I do it so the custom font will only work on header?

I want to have 2 different fonts, one for the header and one for the body.

 

I tried change the h1, h2 etc. on your snippet but it didnt work.

 

thanks 

Maxime-art
Visitor
1 0 0

I am trying to make it work on the Dawn theme.. But It failed on me. Any tips?

LitExtension
Shopify Partner
4860 1002 1151

Hi @Maxime-art,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

StephanieG
Excursionist
10 0 2

what is the solution? i have custom fonts for my brand and I have the new theme Dawn but there is no where for me to add fonts. 

faisalxe
Shopify Partner
17 0 4

Hi, I have tried to make it much easier.

 

See tutorial: How to add custom font in shopify

 

1- Create a section with the name of "custom-font"

2- Replace below code with it.

{% if section.settings.enable_custom-font %}

<style>

    @font-face {

  font-family: '{{section.settings.name-font}}';

  src: url({{ section.settings.custom-font }}) format('woff2');

 

}

 

h1, h2, h3, h4, h5, h6,p,a,span,body,ul,li,small,div{

font-family: '{{section.settings.name-font}}' !important;

 

}

</style>

      {% endif %}

{% schema %}

  {

    "name": "Custom Font",

    "settings": [

      {

        "type":"checkbox",

        "id":"enable_custom-font",

        "label":"Enable Custom Font Link",

        "default":false

      },

      {

        "type":"text",

        "id":"custom-font",

        "label":"Add Custom Font Link",

        "info":"Upload font file in woff2 format in shopify files"

      },

      {

        "type":"text",

        "id":"name-font",

        "label":"Custom Font Name"

      }

    ]

  }

{% endschema %}

 

3- Then you go to the file layout/theme.liquid and call this section there by this code "{% section 'custom-font' %}"

4- Now upload your desired font having woff2 extension into shopify files area from settings.

5- Now copy uploaded font link and click on "Online Store" from dashboard and then click on customize. At very top of customizer you will see "Custom Font" section paste the font link and enable this feature by writing name for new font and that is it. Now you don't need to do coding work again and again. You can change font so easily whenever you want and it won't disturb shopify default settings.

Confused? Busy? Get the solution you need faisalmahmood56@gmail.com
or buy me a coffee on Coffee

george-tatakis
Visitor
2 0 0

Hey there, I have managed to change my fonts, with the help of this guide in my Dawn 2.0 theme by using the code below at theme.liquid:

 

@font-face {
font-family: 'Unbounded-regular';
src: url('{{ 'Unbounded-Regular.woff' | asset_url }}') format('woff'),
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Unbounded-bold';
src: url('{{ 'Unbounded-Bold.woff' | asset_url }}') format('woff'),
font-weight: normal;
font-style: normal;
font-display: swap;
}


:root {
--font-body-family: {{ 'Unbounded-regular' }}, {{ settings.type_body_font.fallback_families }};
--font-body-style: {{ settings.type_body_font.style }};
--font-body-weight: {{ settings.type_body_font.weight }};
--font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};

--font-heading-family: {{ 'Unbounded-bold' }}, {{ settings.type_header_font.fallback_families }};
--font-heading-style: {{ settings.type_header_font.style }};
--font-heading-weight: {{ settings.type_header_font.weight }};

 

The problem now is that the fonts do not work when browsing from mobile. Is there a solution to that?

 

My shop is at shoptatakis.com