Add a custom font to the Dawn Theme Version 1.1.0

[gregorsart]

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

[LitExtension · 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!

[openeast]

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]

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]

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

[diego_ezfy]

@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]

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]

Hi @NaomiRD ,

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

Thank you.

[NaomiRD]

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]

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]

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

[Picknick]

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]

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]

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

[StephanieG]

this doesnt work for dawn theme

[LitExtension]

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.

[Shauletay]

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]

@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]

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

[LitExtension]

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.

[StephanieG]

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]

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.

[george-tatakis]

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