How do I add a Google Font to the Express, Dawn and/or Debut theme (2021)

Store Design
1

Hi!

Looking for an answer as how to add a Google Font to either of the themes Express, Dawn and/or Debut?

The font in question is DM Sans – https://fonts.google.com/specimen/DM+Sans

Thank you!

2 Likes
2

you can’t I dont believe

1 Like
3

@jacobbbbb @mattaray11

you can try this way

Yes, you can do easy to upload your custom font

  1. Go to Online Store->Theme->Edit code
    2.Asset->/theme.scss.liquid- or theme.css>upload your custom font all font tyep = TTF, OTF, WOFF, WOFF2, SVG
  2. Asset->/theme.scss.liquid- or theme.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;
}
4

Hi @KetanKumar

Can you help me? I added this code but it didn’t work on my Dawn theme, I’m trying to add the custom font only to headings and my font is on OTF format.

Hope you can help me.

Carolina

1 Like
5

@LaseMakers

custom font all font tyep = TTF, OTF, WOFF, WOFF2, SVG

also share store url

6

Hi @KetanKumar

Of course this is my store url:

https://onlyatmatilda.com/

Password: futsoh

I’m trying to add Allegory.otf only to headings.

Thank you!! really hope you can help.

Carolina

1 Like
7

@LaseMakers

sorry but i can’t see this

custom font all font tyep = TTF, OTF, WOFF, WOFF2, SVG

you have convert your font please

https://www.fontsquirrel.com/tools/webfont-generator

8

Hi @LaseMakers ,

I helped you to solve at the post: https://community.shopify.com/c/shopify-design/add-custom-font-to-heading-on-dawn-theme/m-p/1367222

Please check it.

9

Hello,

I tried to add custom fonts to my Express theme (v 1.15.1) following forum’s advices but still no success.

So far as i understood :

  1. Assets > theme.min.css file here i can do some customisation except adding new fonts.

The code below didn’t work for me at all

@font-face {
font-family: “Font name”;
src: url({{ [font-file-name] | asset_url }}) format(“[font-format]”);
}

  1. snippets > css-variables.liquid the only place where i can add my custom fonts. By reading liquid dev docs I can’t find the right piece of code for it. Shopify can only propose an access to its own library (font_picker).

I would really appreciate if someone can help to solve this task.

thank you in advance.

1 Like
10

@minusculelab

sorry font_picker doesn’t allow to list

1 Like
11

Basically there is no solution?

1 Like
12

@minusculelab

no sorry

1 Like