How can I host multiple fonts on Dawn theme?

Store Design
1

Can someone help me figure out how to host multiple fonts on Dawn theme? Website is www.rootandbones.com and the font that is supposed to only apply to titles/headings is applied throughout the website, so it’s a bit much.

Any help is appreciated

2

hi @RB2022

Please help me to check this, make sure that you have setting the right font for the heading and the body too.

Online Stores > Themes > Customize and check these setting :

https://prnt.sc/nA7Ky16XnNqt

Hope this helps.

Best regards,

PageFly

3

I have my font uploaded to assets and code written in, so I didn’t go through theme settings for this

4

If that, please help me take a few screenshots here, i will check if your code has anything wrong
I can see you are applying the font for literally every element:

PageFly_0-1664761230054.png

5

Yes-- I see that it’s applied to every element. Do you know what line that code is on and I can remove H2. I can then make everything else that I don’t want to be in that font in H2. But can you give me step by step instruction on how to upload a new font asset that applies to “h2” rule

6

The below code should be of help when adding a new font and targeting the text of your slider:

@font-face {
  font-family: jeFont;
  src: url("URLPATHHERE");
}
.banner__content.banner__content--top-left.page-width span {
  font-family: jeFont !important;
}

To do a quick test using sans-serif font, you can use the below:

.banner__content.banner__content--top-left.page-width span {
  font-family: sans-serif !important;
}

Edit: Adding the code at the end of your ‘base.css’ file should reflect the changes on the live website.

You can upload new fonts by navigating to Online Store → Actions → Edit Code → Assets, add a new asset.

I’m sure that you will figure it out. Feel free to share any other questions you might have.

Regards,

Gabriel

7

Or if you have another easier way-- whatever works. I just want to be able to change the “body” text throughout the website to a different font. I uploaded it to assets “Sibila”. But I’m just stumped on how to apply

8

Assuming that the font is called and named Sibila, going to one of your css files and applying the below code should do the trick,

body p {
  font-family: Sibila !important;
}

Cheers!

Gabriel

9

hmm.. I added it to bass.css and it didn’t work…

10

Hi @RB2022 ,

To enable multiple fonts, please add below CSS code

For google fonts.

to use above font add font-family: ‘Roboto’; in your CSS

To use custom font

@font-face {
    font-family:'Lato';
    src: url('font/Lato-Regular.eot');
	src: url('font/Lato-Regular.eot?#iefix') format('embedded-opentype'),
		url('font/Lato-Regular.woff2') format('woff2'),
		url('font/Lato-Regular.woff') format('woff'),
		url('font/Lato-Regular.svg#Lato Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-2044;
}

Please replace [font/Lato-Regular.eot] to absolute path of specific file.

For example

.classname{font-family:[font-name]}
11

Where exactly do I insert this code? Also, I think there will still be trouble, as I currently have the original font Bebas Neue ruled for literally everything. Do you know what line that code is on (see attached photo in previous message)? I believe I’ll need to edit that and add in a second rule?

This is the link to the second font I want to use.

https://cdn.shopify.com/s/files/1/0625/2098/3796/files/Sibila.woff?v=1664755040

12

You need to add code in base.css.

I would recommend to update path for all font type to support all browsers.
Example is below

@font-face {
    font-family:'Lato';
    src: url('font/Lato-Regular.eot');
	src: url('font/Lato-Regular.eot?#iefix') format('embedded-opentype'),
		url('font/Lato-Regular.woff2') format('woff2'),
		url('https://cdn.shopify.com/s/files/1/0625/2098/3796/files/Sibila.woff?v=1664755040') format('woff'),
		url('font/Lato-Regular.svg#Lato Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-2044;
}