I have a rails 4 app.
My font awesome icons have worked until recently. Now, instead of my social media icons, i have black squares (I can't see why those have replaced the coloured icons I've been using). The links work. The tags are the same as they always have been and the same as the font awesome directions.
I installed font awesome using the sass gem. I require font-awesome, just above self in my application.css.scss.
I have the current gem installed (4.2.0).
For what it's worth - this is my footer with the links I'm using:
<i class="fa fa-youtube fa-2x"></i>
Any advice?
Thank you
You can use Chrome developer tools, firebug or any similar type of tools to check a few things. Firstly you want to make sure the font has downloaded. Using the network tab of Chrome developer tools, you can see outgoing requests and the responses that were made in order to serve the page. Check to see if a request was made for the font file.
Two possible scenarios are the
No request was made for the font. This would indicate a problem with your font declarations in the #media query of your CSS file.
A request was made for the font but it returned an error code.
If an error code is returned you need to determine why that is the case. For example a 404 indicates that the server could not locate the requested file in the specified location, so obviously you need to check that the file is there. Another thing to check is that the web server is configured to respond correctly to requests for fonts by serving the files. I have come across cases where 404 errors are thrown because the web server does not serve, or is explicitly disallowing requests for .woff files, which makes the 404 error somewhat misleading.
If the request for the font files is being made and the server is responding with a success code (200, 302 etc), then it may be a problem with the styling of your HTML element.
Using the tools mentioned above you can also 'Inspect' the HTML element, generally by right clicking on it and selecting a menu option along those lines (In chrome it is 'Inspect Element'). You should be able to see a rundown of each element and where the styles are coming from similar to this image.
There you should be able to find out if something is overriding your styles.
I use Bootstrap 3.0.3 glyphicons. All is ok on desktop browsers and on Android devices. My problem is about Apple devices (tested on iPhone and iPad running iOS7).
The glyphicons look like emoticons. I've found some issues but not answering my problem.
Here is the link to view the screenshot : http://www.fredericblancheton.fr/imgdisallow/image.png
Thank you for your help.
I had a similar problem, but only when another font was included via font-face inside the stylesheet. It seems that mobile safari or safari in general has a very short timeout for loading fonts which are included via font-face syntax.
I had to remove the font from the main stylesheet and add the font-face syntax directly in the sites header using <style></style> syntax. Weird.
Another approach is illustrated over at filamentgroup, which are using the Data-URI syntax for the font and loading these asynchronously via javascript. This should also trick the browser to wait longer.
-> http://www.filamentgroup.com/lab/font-loading.html
We've seen the same problem in our app - it's totally bizarre. It happens when the user has installed an old Emoji app ("Emoji Free!", which I can no longer find in the app store).
The only solution was to get the user to uninstall the app.
I encountered same issue and resolved it by removing woff2 font file from #font-face. It seems iOS doesn't support woff2.
[Updated 2016-03-02]
Fix above turns out just matter of luck (timing?).
#rofflox 's answer which seems to be more promising and it works for me.
I just tried the solutions above and none of them worked for me. It turned out that:
I had updated bootstrap to 3.3.6 css
I didn't update the font files that came with it
Getting the latest version of the font files fixed my issue with the unwanted emojis.
I started getting this error today using Pulsar for Salesforce, I turned out that my FE DEV had included references to Fonts and forgotten to update the static resources with the new fonts! In case that helps someone.
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.
I'm developing an application in ipad that requires a word processor functionality and since uitextview is very limited I want to use tinymce or ckeditor especially with iOS 5 being released. However when I try to load these api's index.html page in a uiwebview, the toolbar items don't show up (copy, paste, bold, ...) and the text has all the tags shown. Do I have to edit something in the index.html page or do I have to modify the javascripts or other files for it to work with uiwebview? Thank you.
I've tested the latest TinyMCE Full Feature demo on an iPad running iOS5 and Safari and found no problems.
As I understand it earlier versions didn't recognise Safari on iOS as a supported platform so it may be possible you are using one of those.
I am using sifr3 in my website. I have uploaded the website on a real server and I realized that the sifr3 fonts are only visible when I'm browsing the page from my computer. I have uploaded all the essential files and I don't understand what might be broken. Can you help me please?
This is the link to the test website:
http://www.artabout.gr/idiston/
(look at the h1 headings, the menu is using images, not sifr)
You need to embed the font
http://www.bethinkerconcepts.com/2009/06/embedding-fonts/