for some odd reason Firefox doesn't render FontAwesome properly. It works in Chrome and in Safari, just not in Firefox.
Font Awesome was added via Bower and therefore loaded locally. Nothing via CDN.
<link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.css" type="text/css">
This is how it looks in Firefox (wrong):
This is how it looks in Chrome & Safari (correct):
Things I have tried:
Tried to load it via CDN and added "Access-Control-Allow-Origin" to
.htaccess
Moved fonts into same directory (to check if it was a relative path
problem)
Nothing worked up until now.
/// EDIT
This is how its shown in the Inspector
I have fixed the problem. I was under the impression that it wouldn't matter at which position I would load the Font Awesome css file. It was one of the first css files loaded in the header. I moved it to the last position and now it works just fine.
I couldn't find out why exactly this fixes the problem in firefox, but it did the trick. What I still find extremely strange is, that it matters the order in which the css is loaded in firefox, but not in chrome and safari.
Maybe someone else knows more about this.
Related
I'm using brackets.io for web dev.
The page looks great in the live preview, but when I just open the file from chrome by "file:///localurl/index.html" The page is not styled at all.
I'm using this in the <head>:
<link href="css/mystyles.css" rel="stylesheet">
Using "inspect element" on the page opened in chrome, it seems no stylesheet is applied. (There is also a bootsrapt CSS included, which I omitted for simplicity, but that one is not applied in chrome as well)
What am I doing wrong? The stylesheets are in the css subfolders.
Solved it, should have used ./css/mystyles.css and not css/mystyles.css
I can't seem to find out why this is working for Chrome, but not for Safari.
It should look like this:
But in Safari it looks like the following:
I can see that the font gets loaded, but the computed font (in console) is Sans-serif.
In Chrome it does show the correctly used font family
The problem was with the font files on the server. I had them pulled by git, but they somehow changed (file size was also different).
So when I placed them manually on the server, the font was working properly again.
I have specific problem. I use Open sans from google fonts, and in Chrome this look fine, but in other browsers this not look ok. I need, this should work like chrome. Can you have solution for this problem?
My css font import:
#import url(fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic&subset=latin,latin-ext);
And screen:
Chrome (I want in all browser the same effect):
Other browsers:
Thank you!
Replacing the protocol http:// to https:// will make the URL known as "secure" in other browsers.
If you test it with http:// in IE you may notice the notification:
Only secure content is displayed.
So that is preventing the Google font to be loaded, unless it's securely loaded with https://, same as Firefox.
JSFiddle:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic&subset=latin,latin-ext);
p {font-family:"Open Sans";font-size:24px;}
<p>Open Sans</p>
Does any one know why some of my font families won't render on some mobile devices? Here's a page that demonstrates the fonts:
http://jl.evermight.com/font/
The fonts render properly on desktop chrome browser, ipad and iphone.
But when i view that page on my galaxy note, the Have A Nice Day font renders as something that looks like arial. On my friends nexus 4, Have a nice day works fine, but the universe condense renders as something that looks like arial.
Does anyone know why?
I've attached screenshot of what the fonts should look like
Additional notes
some people claim Have a nice day is not working in Firefox or IE10. For me, the font works on Firefox. I don't have IE10, so unable to verify.
How do I make this font work on my android?
Additional Notes
I had a typing mistake in my link path to my css files. I've corrected it now. But the problem still appears in my droid browser.
Just tried out the link on my phone - HTC 8s, everything seemed to work fine. Below is the screenshot for the same.
ON HTC 8S
ON IE 10
It's possible it's a downloading issue. The fonts listed in your declaration should work across most browsers (just make sure you're not in Opera Mini, it doesn't really support much of anything).
Additionally, Have a Nice Day is loaded through #font-face declarations in the CSS file, but the others appear to be loaded from the JavaScript, which might be part of the issue. Droid Sans is on Android phones by default, so they're likely just pulling them locally, which is why they work across the board on Android. From there, it might be a difference of JavaScript support (if Universe doesn't work, JS isn't turned on, for example).
Another thing that might help is opening up developer tools in a desktop browser that isn't working (in the case of Firefox, you'll want to pick up the Firebug extension). Check the "Net" or "Network" tab and see if your font files are getting downloaded.
If that still doesn't work, try playing around with the order of the font files in the declaration. I've seen browsers take issue with the order.
Also, the Droid Serif fonts are available from Google Web Fonts, which works cross browser with little headache. It might be worth seeing if your other fonts (or something close) are there, too, and just use Google's Web Font Loader to load your fonts.
The problem has been fixed. Apparently there was a bug on myfonts.com that corrupted my font files. I contacted myfonts.com and they corrected the issue right away. Then re-sent me the font files. Now everything works perfectly.
The guys at myfonts.com are amazing. Very good customer + tech support services.
Below is a link to how I do my #fontfaces for cross browser compatibility.
Cross Browser Fontface
I've put up a test page illustrating my problem : http://www.heliopsis.net/var/fontcustom/
I've created a custom font with help from the awesome http://fontcustom.com/ but I have issues displaying it properly in IE8.
It seems that IE8 can use this font with HTML entities but not with CSS generated content. Even more puzzling, it sometimes manages to show the glyphs but loses them on page reload...
Does anybody know what's going on here ?
Here's a screenshot of what I see on IE8 :
In general, generated content doesn't work quite as well as it should (what does?) in IE8.
I played around a bit with your test page, and you might want to check that you aren't getting dumped off into IE8's compatability mode for IE7 or (even worse) Quirks Mode. Both of those seem to break the custom font, but I see it perfectly fine when IE8 runs as IE8.
To ensure that IE always gives to the most recent cababilities if possible add the
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
meta to your header. Also, use the develper tools for IE8 to make sure that your font is being loaded when you see the issue.