1

I installed the "Recoleta" and "HK Grotesk" fonts on my website but both fonts are not loading on all devices and all browsers (specially Safari, as some people said it often loads on Chrome/Firefox).

I don't understand as the relative URLs are pointing well when I try them.

I'm using Gulp & Scss to compile my css (my fonts are in an original fonts.scss file compiled in a final app.css file).

I tried changing the position of fonts.scss (beginning/middle/end of app.scss) but doesn't change anything.

@font-face {
  font-family: 'Recoleta', serif;
  src: url('../fonts/recoleta/Recoleta-Medium.woff') format('woff');
  src: url('../fonts/recoleta/Recoleta-Medium.eot?#iefix') format('embedded-opentype'),
       url('../fonts/recoleta/Recoleta-Medium.eot') format('embedded-opentype'),
       url('../fonts/recoleta/Recoleta-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HK Grotesk', sans-serif;
  src: url('../fonts/hk-grotesk/HKGrotesk-Bold.woff2') format('woff2');
  src: url('../fonts/hk-grotesk/HKGrotesk-Bold.eot') format('embedded-opentype'),
       url('../fonts/hk-grotesk/HKGrotesk-Bold.woff') format('woff'),
       url('../fonts/hk-grotesk/HKGrotesk-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: 400;
  font-display: swap;
}

This is the expected result : https://ibb.co/MRMk1jM

viande
  • 77
  • 2
  • 10
  • This might help -- https://stackoverflow.com/questions/14889045/safari-and-ie-cant-read-ttf-and-eot-fonts – Tori Jul 25 '19 at 13:17

2 Answers2

0

I just needed to remove the 'serif' or 'sans-serif' in the font-family.

@font-face {
  font-family: 'Recoleta';
}

@font-face {
  font-family: 'HK Grotesk';
}
viande
  • 77
  • 2
  • 10
0

@vbernet Kindly, try to genrate the fonts files from this website: (https://www.fontsquirrel.com/tools/webfont-generator) and then implement it. I think one of the font file type is missing which support to safari browser.

Sahil Dhiman
  • 55
  • 2
  • 7
  • The answer is just above actually ;). I needed to remove the 'sans-serif' from font -family. – viande Jul 26 '19 at 14:51