Changing heading and body font for Dawn Theme version 8.0.0

Technical Q&A
,
1

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?

Many thanks

2

Hi @NaomiRD

Can you provide me your site URL (with pass if your store password is enabled) and the code you added so that I can check and maybe give you a solution?

Kind & Best regards,
GemPages Support Team

3

Hi @GemPages

Thanks for the reply. My store is live so no password. You can find it here - www.definitelywild.co.uk

The code I’ve used in theme liquid was;

% 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 }};

I also added some additional code to the base.css file to change the section headers. See below

}

.collage-section h3{

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

}

.collection h3{

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

}

Thanks in advance

4

@NaomiRD

I see your 2 fonts above have been applied to headings and text.

GemPages_0-1679276200634.png
GemPages_0-1679276200634.png1236×912 175 KB

And the code to change the section heading also works fine. :slightly_smiling_face:

.collage-section h3{
  font-family: 'Renown Monoline Sans' !important;

}
.collection h3{
  font-family: 'Renown Monoline Sans' !important;
}

GemPages_1-1679276494903.png
GemPages_1-1679276494903.png1749×907 345 KB

Is there issues I haven’t found?

Hope to be of help to you.

Kind & Best regards,
GemPages Support Team

5

Hi @GemPages

Thanks again for your help with this. I’m so sorry. I realised I sent you the URL for the version I have live, rather than the copy I’m trying to update. I’ve now published the new version which shows the incorrect font for the headings and announcement bar.

Many thanks

6

HI @GemPages

I’m not sure if you’ve seen my recent reply but I’ve now published the latest version of my website to demonstrate the different heading font. You can seen the body font is correct but the heading isn’t.

Thanks again for you help with this.