How to add a custom font to the Dawn theme?

Store Design
1

Hey!

I am trying to add a custom fonts to the Dawn theme, but it is not showing up.

I have tried both ways:

  1. Adding .woff and .woff2 files in the Assets and @font-face css rule.

  2. Uploading same files in Shopify following this instruction:
    https://ezfycode.com/blog/add-custom-fonts-to-shopify

Custom fonts: Beatrice-Light and Beatrice-Semibold

Store: https://philmiodev.myshopify.com/

Psw: devjobs

Thanks a lot!

1 Like
2

@ArminasZ

yes, please try this code

1. Go to Online Store->Theme->Edit code
2.Asset->/base.css->upload your custom font all font tyep = TTF, OTF, WOFF, WOFF2, SVG
3. Asset->/base.css->paste below code at the bottom of the file.

@font-face {
font-family: 'Montserrat-Regular';
src: url('{{ 'Montserrat-Regular.eot?' | asset_url }}');
src: url('{{ 'Montserrat-Regular.eot??#iefix' | asset_url }}') format('embedded-opentype'),
url('{{ 'Montserrat-Regular.woff' | asset_url }}') format('woff'),
url('{{ 'Montserrat-Regular.ttf' | asset_url }}') format('truetype'),
url('{{ 'Montserrat-Regular.svg#Montserrat-Regular' | asset_url }}') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}

can you please just change font name, for example, Montserrat-Regular to your custom font name
1 Like
3

Thank you @KetanKumar

I think I did it all, but it did not work.

Btw, I do not have .svg and .eot files. Shall I remove them from base.css code?

4

Okay.

I thought maybe files are bad.

So downloaded all formats of the new font, uploaded, but still no success..

5

The problem was solved!

Solution: create new liquid file base.css.liquid, copy all the code from base.css, paste in the new file and add additional font-face code.

Of course font files should be uploaded in the Assets.

1 Like
6

CORRECTION:

There is no need to create a new liquid file.

Simply rename base.css to base.css.liquid.

1 Like
7

@ArminasZ

great thanks for update

8

you could also just create a separate font.css.liquid and add it to your theme.liquid with the rest of the css sources as {{ ‘font.css’ | asset_url | stylesheet_tag }}

1 Like
9

@LeviEiko

can you please send store url

10

Do these revisions get overwritten when DAWN has an update?