Custom font code not working in Dawn theme version 8.0.0

Shopify Discussion
1

Reposting as I’ve got a little stuck with this and haven’t found a solution.

I wondered if someone could help me.

I’ve got 2 custom fonts, one for the headings and one for the body. I changed the code in Dawn Version 2.0.0 following instructions from another post (see link below) and did the same for this version but it seems the only font thats changed is the body.

Original discussion regarding changes to fonts in the Dawn theme

Do I need to do something different for Dawn version 8 to change the heading font?

Wesbite link here: www.definitelywild.co.uk - This version shows the correct body font but not the heading font. It also doesn’t seem to working at all on the mobile version?

Thanks so much

2

hello, NaomiRD, can you show me where you added the @font-face code from the previous discussion? And how you added it?

3

HI @Uhrick

That would have been helpful - sorry.

I added the code below to the theme.liquid

% style %}

@font-face {

font-family: ‘Renown Monoline Sans’;

src: url(‘{{ ‘Renown-Monoline-Sans.otf’ | asset_url }}’) format(‘opentype’);

font-display: swap;

}

@font-face {

font-family: ‘Think-Pink-Regular’;

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;

}

{{ settings.type_body_font | font_face: font_display: ‘swap’ }}

{{ body_font_bold | font_face: font_display: ‘swap’ }}

{{ body_font_italic | font_face: font_display: ‘swap’ }}

{{ body_font_bold_italic | font_face: font_display: ‘swap’ }}

{{ settings.type_header_font | font_face: font_display: ‘swap’ }}

:root {

–font-body-family:‘Renown Monoline Sans’, {{ settings.type_body_font.fallback_families }};

–font-body-style: {{ settings.type_body_font.style }};

–font-body-weight: {{ settings.type_body_font.weight }};

–font-heading-family:‘Think-Pink-Regular’, {{ settings.type_header_font.fallback_families }};

–font-heading-style: {{ settings.type_header_font.style }};

–font-heading-weight: {{ settings.type_header_font.weight }};

And added this to base.css to change some of the section headings

}

.collage-section h3{

font-family: ‘Renown Monoline Sans’ !important;

}

.collection h3{

font-family: ‘Renown Monoline Sans’ !important;

}

I also uploaded the font files to assets before changing the code. Sorry if the code looks a bit messy. I’ve just copied it directly.

Thanks so much for offering support.

4

hey, try replacing

@font-face {

          font-family: 'Renown Monoline Sans';

          src:  url('{{ 'Renown-Monoline-Sans.otf' | asset_url }}') format('opentype');

          font-display: swap;

        }

    

    @font-face {

    font-family: 'Think-Pink-Regular';

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;

}

with

@font-face {

          font-family: 'Renown Monoline Sans';

          src:  url("{{ 'Renown-Monoline-Sans.otf' | asset_url }}") format('opentype');

          font-display: swap;

        }

    

    @font-face {

    font-family: 'Think-Pink-Regular';

src: url("{{ 'Think-Pink-Regular.otf' | asset_url }}") format('opentype'),

url("{{ 'Think-Pink-Regular.ttf' | asset_url }}") format('truetype');

font-weight: normal;

font-style: normal;

font-display: swap;

}
5

Unfortunately this hasn’t worked :disappointed_face:

6

the font files are exactly with the same name?

7

Yes - this is one of the first things I checked as I’ve made that mistake in the past.

8

you can try getting a hold of the .woff file of these fonts. Shopify can be extra annoying with fonts sometimes, but if I’m not mistaken, .woff2 and .woff usually work better.

9

I’ve tried adding the .woff format for my heading font but unfortunately its still not working.

Thank you for all your help. I’m starting to think I’m guna have to just use the font its in.

10

Actually, i know a way around it that usually works. You have to use the static path of the font instead of the font name with filter. I’m not near a computer right now, but to find the path for an element of the theme, you can do something in the lines of:

In the theme.css/base.css file, at the end of it, add something like

body {

background-image: url(“{{ ‘font-file.ext’ | asset_url }}”)

}

Then, if you inspect the body element on your website, you will see this rule with the link to said file. Take this link and replace the

url(“{{ ‘font-file.ext’ | asset_url }}”)

In your previous code with this file. If you didn’t understand, send me a private message, I’ll help when I’m near a computer again

11

Thanks so much. I’ve sent you a private message :slightly_smiling_face: