Installed Custom Font, Not Displaying on iPhone

design

#1

Installed a custom font using CSS @font-face declaration. Font displays on desktop, but does not load on iPhone (safari, chrome, etc). The troubleshooting solution described here isn’t applicable.

Any solutions?


#2

There are so many things that could be wrong :slight_smile: Please share your site so someone can glance at it and maybe see what is wrong. If you can’t/don’t want to share the URL of your site, at least add more details of what you’ve done, what happens and what you expect to happen because one line like this is not enough to help you.


#3

Oh! Absolutely! Happy to share more!

Site: 700clark.com

Here’s the @font-face declaration I’ve used:

@font-face {
font-family: ‘bauhaus_93regular’;
src: url(‘http://700clark.com/wp-content/themes/walker/assets/css/fonts/bauhaus_93-webfont.eot’);
src: url(‘http://700clark.com/wp-content/themes/walker/assets/css/fonts/bauhaus_93-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘http://700clark.com/wp-content/themes/walker/assets/css/fonts/bauhaus_93-webfont.woff2’) format(‘woff2’),
url(‘http://700clark.com/wp-content/themes/walker/assets/css/fonts/bauhaus_93-webfont.woff’) format(‘woff’),
url(‘http://700clark.com/wp-content/themes/walker/assets/css/fonts/bauhaus_93-webfont.ttf’) format(‘truetype’),
url(‘http://700clark.com/wp-content/themes/walker/assets/css/fonts/bauhaus_93-webfont.svg#bauhaus_93regular’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

Fonts load properly across all other browsers but not iPhone/iPad, and each/all have been uploaded via FTP in the fonts folder.

If there’s any additional context or information I can provide, I absolutely can.


#4

I have the impression that the fonts don’t load on Firefox/Linux either:

http://imgur.com/c8THOW6

While on Chromium I see:

On Android Firefox and Chrome the font looks similar to the Firefox/Linux ones, but the twitter and facebook logos are not loading. When I worked at a mobile dev company we used something like https://www.browserstack.com/screenshots

Is this the font should look like? http://fontsforweb.com/font/show?id=2802


#5

Wow. That’s frustrating.

I’m having the same trouble with the Facebook & Twitter logos not loading as well.

Yes, Bauhaus 93 would be the correct font/how it should look.