Current time: 03-24-2017, 12:56 PM Hello There, Guest! (LoginRegister)

Post Reply 
Installed Custom Font, Not Displaying on iPhone
01-05-2017, 03:10 PM
Post: #1
Installed Custom Font, Not Displaying on iPhone
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?
Find all posts by this user
Quote this message in a reply
01-05-2017, 03:50 PM
Post: #2
RE: Installed Custom Font, Not Displaying on iPhone
There are so many things that could be wrong 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.
Find all posts by this user
Quote this message in a reply
01-05-2017, 03:55 PM (This post was last modified: 01-05-2017 06:04 PM by @dan.)
Post: #3
RE: Installed Custom Font, Not Displaying on iPhone
(01-05-2017 03:50 PM)smaffulli Wrote:  There are so many things that could be wrong 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.

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.
Find all posts by this user
Quote this message in a reply
01-06-2017, 10:46 AM
Post: #4
RE: Installed Custom Font, Not Displaying on iPhone
I have the impression that the fonts don't load on Firefox/Linux either:

http://imgur.com/c8THOW6

While on Chromium I see:

http://imgur.com/a/kHhB1

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
Find all posts by this user
Quote this message in a reply
01-06-2017, 01:14 PM
Post: #5
RE: Installed Custom Font, Not Displaying on iPhone
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.
Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump: