Custom Font Not Rendering On Some Devices

Technical Q&A
1

Hello there, I added a custom font to my theme code, however it is not rendering on some devices, despite having added all the different extension of the font assets. I am using ‘Sense’ theme and I added all the fonts types as file assets and added the following code at the bottom of ‘base.css’:

@font-face {
  font-family: 'Larsseit';
  src: url('Larsseit.eot?#iefix') format('embedded-opentype'),
       url('Larsseit.otf')  format('opentype'),
       url('Larsseit.woff') format('woff'),
       url('Larsseit.ttf')  format('truetype'),
       url('Larsseit.svg#Larsseit') format('svg');
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
}
  
  
h1,h2,h3,h4,h5,h6,body,p,a,input,button,.field__label{ font-family: "Larsseit"!important; }

I would like to know how to fix this, since the fallback font is pretty ugly and it is probably killing my conversions. Thank you

1 Like