Custom Font does not show up on Mobile - Dawn 2.0

Store Design
1

Hello,

I’ve uploaded a custom font to my assets (woff, woff2 and svg). I’ve inputted the following code in the base.css of my Dawn 2.0 theme code. The font shows up well for desktop but not for mobile. Does anyone know what the issue might be?

@font-face {
font-family: “Syncopate Regular”;
src: url(“Syncopate-Regular.woff2”) format(“woff2”),
url(“Syncopate-Regular.woff”) format(“woff”);
}

h1, h2 { font-family: “Syncopate Regular”!important;
text-transform: uppercase;}

Thanks,

1 Like
2

Hello. Store is www.pyrofirebowls.com

3

Yes, you can do easy to upload your custom font

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

4

Hello Ketan,

Thank you for your response. I did see this response in another post. However for some reason it does not allow me to upload ttf or otf file types as an asset. Only woff, woff2 and svg. Are those other file types necessary to get it to show up on mobile?

5

@JonCarag no all files are not required plz remove other lines.

@font-face {
font-family: 'Montserrat-Regular';
src: url('{{ 'Montserrat-Regular.woff2' | asset_url }}') format('woff2'),
url('{{ 'Montserrat-Regular.woff' | asset_url }}') format('woff'),
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;
}
6

@Ahsan_ANC thank you for your reply but unfortunately this code still did not work for me once I replaced the code with my font file names.

7

this usually happens

plz follow the following alternative guide to upload custom fonts

Upload custom fonts

1 Like
8

@Ahsan_ANC Thank you so much! The instructions on that article worked for me.