custom fonts not displaying in mobile

Shopify Discussion
1

Hello, I cant get our custom font to load on mobile

i found a discussion and followed some relevant instrcutions

i uploaded woff, woff2 and SVG and used this code:

@font-face {
font-family: ‘PublicPixel’;
src: url(‘{{ ‘PublicPixel.woff2’ | asset_url }}’) format(‘woff2’),
url(‘{{ ‘PublicPixel.woff’ | asset_url }}’) format(‘woff’),
url(‘{{ ‘PublicPixel.svg#PublicPixel’ | asset_url }}’) format(‘svg’);
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}

any ideas what might be wrong?

thank you

2

Hi,

If everything ok like- Font file paths and format,CSS ,Font loading then you can try “font-display” property at @font-face rule

Code example

@font-face {
  font-family: 'PublicPixel';
  src: url('{{ 'PublicPixel.woff2' | asset_url }}') format('woff2'),
       url('{{ 'PublicPixel.woff' | asset_url }}') format('woff');
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
  font-display: swap; /* or optional, fallback, block */
}