Safari wont render font-face, but in chrome

Question

I'm setting up a typewriter page with a local font. I'm using @font-face to import it but it won't render in Safari. It renders on google Chrome.

Here is the web page https://www.dynamik.systems/typewriter/ (you have to press some keys to see some letters).


@font-face {
  font-family: "dynamik";
  src: url('http://www.dynamik.systems/wp-content/themes/fonts/DynamikGX.eot') format('opentype'),
       url('http://www.dynamik.systems/wp-content/themes/fonts/DynamikGX.ttf') format('truetype'),
       url('ttp://www.dynamik.systems/wp-content/themes/fonts/DynamikGX.woff') format('woff');
}


#content{
 font-family: "dynamik";
}

Thanks on behalf!

possible repeat of previous question / answer **Font Face not working completely in Safari** >>> https://stackoverflow.com/questions/24679822/font-face-not-working-completely-in-safari — inputforcolor, Jul 02 '19 at 23:00
I didn't find a solution for my question in that post. Watched it before I posted! — RASALGHUL, Jul 02 '19 at 23:58
the comment wasn't added to cause offence but to provide 'possible' help — inputforcolor, Jul 03 '19 at 00:25

Sam Tyurenkov · Accepted Answer · 2019-09-10T23:11:56.217

2

Looks like you have two issues:

all 3 font urls should be https
3rd url is also missing starting h

There are also few additional rules you can add to font-face e.g:

font-display: swap
src: local properties.

edited Sep 10 '19 at 23:11

answered Jul 02 '19 at 22:50

Sam Tyurenkov

430
4
19

Sam! You're my hero! Big thanks! Not it at least render my font! Big thanks! Would love to hear about the rules if you have time! – RASALGHUL Jul 02 '19 at 23:23

Safari wont render font-face, but in chrome

1 Answers1