Custom Fonts Not Rendering in Chrome/Safari

Font not rendering in Safari or mobile browsers

From what I can see on your website, only the sans-serif fallback is used right now. Brasley is not currently displayed. If however you change the name of the font to "Brasley-Regular", it does work.

Basically switch this :

font-family: "Brasley", sans-serif !important;

To

font-family: Brasley-Regular, sans-serif !important;

FYI, you don't need quotes around font family names, it's only needed when the font name has spaces or other in its name (such as "Proxima Nova" for example). See this question for more information.

Custom fonts not rendering in Chrome/Safari

Why don't you download the font you like and put it in your files? That's way better and might solve your problem too.

Besides, don't use font-family and font-size apart. Put them together in the font tag.

Safari font rendering issues

Safari has an issue with fonts. The easiest fix for the duplicate text issue is clarifying the font-weight:

font-weight: 400;

Using Lucho's Javascript's text stroke solution along with specifying font-weight will make your text the same as it is on Chrome.

Google Font not working on Safari

For some odd reason I have experience this on some web fonts from Google...when this has happened I usually get them to my server and/or convert them in fontsquirrel....Safari should be able to take TTF Files no matter what ver:

Nunito TTF ver

---

Related Topics