How can I successfully add custom fonts to Dawn 6.0.2 theme?

Store Design
1

howdy,

theme: Dawn 6.0.2

I’m trying to add fonts for custom branding. I’ve added to assets .woff and .woff2

I’ve added font-face code to the bottom of the base.css which looks like this:

@font-face {font-family: “Jam Pact V1”;
src: url(“bb567dfaef81d336d330d92e38a4b0e4.eot”); /* IE9*/
src: url(“bb567dfaef81d336d330d92e38a4b0e4.eot?#iefix”) format(“embedded-opentype”), /* IE6-IE8 /
url(“bb567dfaef81d336d330d92e38a4b0e4.woff2”) format(“woff2”), / chrome、firefox /
url(“bb567dfaef81d336d330d92e38a4b0e4.woff”) format(“woff”), / chrome、firefox /
url(“bb567dfaef81d336d330d92e38a4b0e4.ttf”) format(“truetype”), / chrome、firefox、opera、Safari, Android, iOS 4.2+/
url(“bb567dfaef81d336d330d92e38a4b0e4.svg#Jam Pact V1”) format(“svg”); / iOS 4.1- */
}

I’m not able to pull any fonts up in the dropdown.

Do I need to write extra code?

what am I missing?

thank you.

3 Likes
2

Hi @cars_and_planes ,

Please follow the video tutorial below.

1 Like
3

@cars_and_planes

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

Good day! I’m having the same issue and really have tried everything, but now the website is just looking weird.

2 Likes
5

@redsmithgs

if have issue solved site issue please send url

6

Still having the same issue. I’ve tried several options and now I’m thinking of using the Fontify app, since it’s not working.

1 Like
7

@redsmithgs

can you please send store url

8

Finally had time to deal with this: it worked! Thank you very much!

Question though: I can’t really make the font appear in the dropdown under the theme edit–>typography, only through the code, correct?

9

@cars_and_planes

No, you cannot unfortunately since it is a custom font

1 Like
10

Hi @made4Uo , I followed your tutorial and the site looks correct when I pull it up but on my computer only.

However, when I share it with someone, it doesn’t work.

Does it have something to do with the fact that I haven’t connected it to the intended domain yet?

11

Hi @cars_and_planes

The font might not be available with other browsers

12

Any other suggestions? Because I used 3 different fonts and none of them registered. I suspect this is not it.

1 Like
13

@cars_and_planes

can you please confirm did you added all custom font all font type for example TTF, OTF, WOFF, WOFF2, SVG

14

@KetanKumar I only uploaded WOFF2 into my assets.

15

@cars_and_planes

oh sorry, please upload all this TTF, OTF, WOFF, WOFF2, SVG

1 Like
16

@KetanKumar okay, I definitely will (later) and update how it went and if THAT was the problem here. Thanks a lot!

1 Like
17

@cars_and_planes

yes, please upload and let me know if any issue

18

@KetanKumar

I uploaded WOFF and SVG. I couldn’t find OTF for the font in question. I’ve got TTF but that file type cannot be uploaded into Assets - they are not selectable. Uploading WOFF, WOFF2 and SVG did not solve my problem.

Here is the site in progress:https://decorate-your-car.myshopify.com/?_ab=0&_fd=0&_sc=1

This is what I see on my screen though (and this is what I am trying to accomplish so that it can be seen on anybody’s screen):

site goal.png
site goal.png2522×1114 386 KB

One of the fonts that I am trying to feature on my home page prominently is called Former Airline.

This is the code that I am using in base.css

There is another font that I want to use in the footer and on product pages, but for now, I just want to. figure how this works.

/Home Page/
#Banner-template–15019049353261__image_banner > div.banner__content.banner__content–bottom-center.page-width > div > h2 {
font-family: “Former Airline”;
color: #ffffff;
}

#shopify-section-template–15019049353261__rich_text > div > div > div > div > h2 {
font-family: “Former Airline”;
color: #0e6c52;
}

#shopify-section-template–15019049353261__featured_collection > div > div > div > h2 {
font-family: “Former Airline”;
color: #0e6c52;
}

This is what I wrote in the theme.liquid file:

@font-face {
font-family: “Former Airline”;
src: url{{(“Former Airline V2.woff2” | asset_url )}} format(“woff2”);
}

What did I do wrong here?

19

Hi, I have tried to make it much easier.

1- Create a section with the name of “custom-font”

2- Replace below code with it.

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

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

{% 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.

2 Likes
20

Hey, thanks for this. It worked! However, I’m unable to see the changes on my password protected page. Can you please help me out in changing the custom font for all pages throughout my website?