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>
Related
I have a website, in which the fonts are appearing good in safari, but broken in Chrome and Firefox. I couldn't find which rule is overriding my font settings. Please help.
This page is live at http://alterknitnewyork.com/drop-off/
In safari, it is taking the settings from uaf.css but in chrome and firefox they are scored-out. I have no idea why it is broken. Even I tried to apply the font inline with !important tag, but no success.
It looks like you have two #font-face declarations for the "same" font. One is in MyFontsWebfontsKit.css which references a font as "Elizabeth-Italic". The other declaration, in uaf.css is referencing a font as "Elizabeth Italic". These are two distinctly different fonts.
Assuming you want the italicized font, just set the font-family to "Elizabeth-Italic" and you should be good to go.
I'd recommend removing any of the CSS files you don't need (particularly #font-face declarations), it will lessen the number of HTTP requests and make the site a bit snappier overall.
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.
I have been searching for hours, asked friends and it didn't work out. So I hope you guys can help me. My website uses a custom font, but IE(10) doesn't support that on the way I do it. I have no idea it supports other methods. Here is mine:
#font-face { font-family: shardee; src:url('fonts/Shardee.ttf'); }
It is not necessary to have a custom font in Internet Explorer, but it would be nice.
When Internet Explorer doesn't know the font, it used its default font. But the problem is, that the font-size of the custom font is perfect, but of the Internet Explorer default font it is way too big. I tried to fix it with a IE specific css code, but it just doesn't work at all. I am using the following css code for Interner Explorer:
<!--[if IE]>
<style>
#menu ul li{ font-size:15px; }
</style>
<![endif]-->
I have also tried it by a external stylesheet, which looked like this:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri() ?>/style/ie.css" />
<![endif]-->
The function I use in the php is a wordpress function that takes you to the path of your website. If you are not using wordpress, you can forget that code and leave it blank.
The problem is not the path, the path is correct. I have looked into the source code in the browser, and it showed me the code I have in ie.css. The code in ie.css is exactly the same as above, but without the tags ect.
I hope you guys can help me with this problem. 2 solutions are possible as far as I know. Let the ie specific css work, or show me a way to create custom fonts in IE. I am using Internet Explorer version 10.
You can see the site here, but once it is fixed it will disappear because I don't need to put it on a subdomain once it is fixed.
Kind regards,
Bart Roelofs
Multiple font formats
To support a wide range of browsers, use a .ttf, .woff and .eot version of the font.
#font-face {
font-family: 'shardee';
src: url('fonts/Shardee.eot');
src: url('fonts/Shardee.eot?#iefix')
format('embedded-opentype'),
url('fonts/Shardee.woff') format('woff'),
url('fonts/Shardee.ttf') format('truetype');
}
You can use a Font conversion website like Font Squirrel, to convert the .ttf font into .woff and .eot.
DRM false positive
As #Jukka pointed out, there's a legal issue with the TTF file that's preventing it from being usable in Windows. In the IE developer console, the following error message is displayed :
CSS3114: #font-face failed OpenType embedding permission check.
Permission must be Installable.
Shardee appears to be an abandoned font with an unknown license type. Although it may be legal to use this font, Windows seems to require that every TTF file has DRM info that explicitly says it's legal to embed it in web pages. The error in IE is most likely a false positive.
To test this, I took a TTF font that's known to be legally licensed for use on websites. The TTF version didn't work in IE because of the DRM error. This example is definitely a false positive. This is one of the reasons why it's necessary to use multiple font formats, and why a single format like TTF will not work on all browsers.
Although Windows doesn't allow IE to use the TTF file, IE can still use the WOFF or EOT version. When I tested the above #font-face rule on a local webserver, using all three font formats, the Shardee font rendered correctly in all versions of IE (though with an error message in the IE developer console).
Steps to try:
Convert the .ttf file to .woff and .eot
Upload the .woff and .eot files to the same directory as the existing .ttf file.
Replace the #font-face rule with the one above. I fixed a couple typos in the initial version of it.
If you still have a problem, there may be an issue with the web server settings. Related question: IE9 blocks download of cross-origin web font
IE11:
If you are receiving the CSS3114 error code in dev tools, you need to modify the first bits of the font file. This will allow IE to install the font.
Npm Module:
You can use ttembed-js npm module, which will make the modifications for you.
https://www.npmjs.com/package/ttembed-js
Usage: ttembed-js path/to/Shardee.ttf
By searching the web, I found this online tool that performs a fix on the TTF font, making it displayable by Explorer:
https://www.andrebacklund.com/fontfixer.html
So the problem is apparently that on IE 10, the menu, inside the element with id=menu, does not appear in the declared font “shardee” but in the browser default font. This actually makes the menu readable. But technically, the explanation can be seen in Developer Tools (press F12 to enter them), in the Console pane. The error message, with code CSS3114, tells that #font-face did not pass the checks for usage rights for embedding.
Check out the usage rights of the font, and contact the copyright holder (which is to be presumed to be Bright Ideas) for obtaining the rights if possible.
FontPrep is an excellent Web Font Generator for the Mac OS X. it will even create a fonts.css
I ran into this same issue and ran F12. It seems compatibility view was enabled in IE10 for the site I was on. Once I disabled compatibility view the custom font displayed. Hope this helps someone...
I have added a custom font to my wordpress based website.
the theme has the font files within it.
so far in testing the new font works in chrome, IE and safari but not in firefox.
Ive tried playing about with my css files but no luck
any ideas why?
i think the problem is that Internet Explorer accepts only EOT fonts, while Firefox supports only OTF and TTF fonts, and so on.
plz try to insert all this king of font extentions
i hope this help you.
Here it is a useful tool for having every extension for your fonts: font2web.com
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