On both iphone and ipad (both Chrome and Safari) they didn't load initially, but as soon as I do a refresh, they are there.
They didn't load on a Mac (Safari) but on Chrome they load immediately the first time.
On Android and Windows, they are there all the time !!!
My site is running on ubuntu (16.04), php (7.0) and the fonts are not cdn but locally. You have an idea? I tested a lot of things and do a lot of research.
I've tried to add the mimes (woff2) in the mime.types (the woff was already there).
Here's the content in my css file :
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype');
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
I want to include a custom font in a website I'm working on. When I went to test it, it was rendering just fine on my Macbook but not my iPhone.
I have been declaring them in my stylsheet like this:
#font-face {
font-family: JosenfinSans;
src: url("./fonts/JosenfinSans-Bold.ttf") format("truetype");
font-weight: bold; }
Is there anything that I have been doing wrong?
Looks like are you loading the font from a local directory on your laptop which is not present on your phone. Suggest you source it from Google Fonts https://www.google.com/fonts#UsePlace:use/Collection:Josefin+Sans. This way it should work for all devices.
I have some icon fonts in an #font-face declaration in my styles that do not show in Safari iOS until the user chooses to refresh the page. The project is built on ember, so refreshes will never happen if the user does explicitly do it themselves. I know the icon fonts are loading because they show on refresh, but Safari just disregards them until I do. I have searched for days for a solution but can't find anything that works.
Has anyone run into this issue with a solve?
=== EDIT ====
here is my #font-face declaration for reference:
#font-face {
font-family: 'designcenter';
src:url('../fonts/designcenter.eot?-s17jdf');
src:url('../fonts/designcenter.eot?#iefix-s17jdf') format('embedded-opentype'),
url('../fonts/designcenter.woff?-s17jdf') format('woff'),
url('../fonts/designcenter.ttf?-s17jdf') format('truetype'),
url('../fonts/designcenter.svg?-s17jdf#designcenter') format('svg');
}
So after some experimenting and changing, I found that if I took the value of designcenter out of quotes, either single or otherwise across the project, it seems to consistently work.
So just as a recap, iOS8 Safari cannot handle quotes for font face values. I hope this helps out anyone in the future.
I am developing an jsf2.2 application where, i have put some fonts files on server side a login screen on that application, when user log in successfully i want to download some fonts file to client side path(C:\Windows\Fonts) so that user can have same fonts which are used in application.
use css for this. Paste this code at the start of your css:
#font-face {
font-family: "Helvetica Neue";
src: url( "HelveticaNeue-Light.woff.jsf?ln=css" ) format("truetype");
}
In this specific case the woff file placed in the reasources/css folder.
When I use Google Webfonts, they load fine on every browser I care about, EXCEPT Chrome/iOS. This seems odd, as it works fine on Chrome for Mac and Safari for iOS, so I don't think it's an iOS problem or a Google Chrome problem. It seems to be specific to Chrome/iOS.
Any ideas, or ideas on HOW to troubleshoot this, would be great!
Thanks!
EDIT
I am using Google Web Fonts hosted on Google, with the following:
<link href="http://fonts.googleapis.com/css?family=Leckerli+One" rel="stylesheet" type="text/css" />
In my font (SASS), I am using the following:
h1
font-family: "Leckerli One", cursive
I'm seeing the same issue. Hosting the font files on my own server and rewriting the #font-face rules to match solved the issue for me, both with my local dev server and in prod.
I don't know the cause; my best guess would be some same-origin issue that's enforced differently in UIWebViews (iOS Chrome being a UIWebView due to App Store rules).
You can use the Google Fonts API Loader which will detect the user's browser and send back appropriately formatted CSS.
Sample code is available in the first response on this Stack Overflow question.
This will allow both Safari and Chrome (and other UIWebView-based browsers) to display the font correctly.
Note: if you want to store the fonts locally, as #Dave suggested, this CSS should work.
IOS devices use TTF formats only (or OTF if they follow the developer guidelines below). That font is being served as WOFF, EOT and OTF (assumably not following the guidelines) . There are some services that will give you other versions. Try specifying the font using #font-face and see if that fixes the issue! Fontsquirrel has an #font-face generator to do the heavy lifting.
In regards to the follow up question. There are some developer documentation from Apple on their implementation of TrueType Fonts. It can be found here. Essentially, TTF formats store the font as sfnt resources. The only other font format that can do this is OpenType's offset table sfnt wrapper. Because IOS reads fonts using sfnt wrappers, you will run into issues with fonts that are not stored in this way. (Sorry for all the jargonny talk).
In the CSS you may use
!important
Example:
#font-face {
font-family: 'Monda' !important;
font-style: normal !important;
font-weight: 400 !important;
src: local('Monda Regular'), local('Monda-Regular'), url(http://themes.googleusercontent.com/static/fonts/monda/v1/sk05J8GA1NvUxDnk43EgAQ.woff) format('woff') !important;
}
In case anyone else still sees this issue - a font not loading in Chrome on iOS 9 or older - double check that the font is imported as a css file, and not as a js file. Fonts.com will give you the option to import fonts as js, which won't get picked up on Chrome / iOS 9 or below. Changing my import to css fixed this for me.
For me works add in php page:
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Trocchi');
#import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
</style>
I've got similar problem with UIWebView lately. I made additional changes to both iOS app and web source, nothing helped.
Finally fixed it by simply changing Google Font's link to https.