Problem details:
I have the problem that Internet Explorer 10 (under Windows 7 - 64 Bit) does not load fonts embedded with #font-face in CSS. Instead it shows "Arial" or a font like that. I have tested this problem on multiple devices:
Windows 8 with Internet Explorer 11 (64 Bit)
Windows 8 with Internet Explorer 10 (64 Bit)
Windows 7 with Internet Explorer 10 (64 Bit)
But for me this problem never occured. But the strange thing is that this problem occurs on a customer PC with Internet Explorer 10 and Windows 7 64 Bit.
The other strange thing is that in the "Network" tab of Internet Explorer shows all resources, but IE will not show any font.
Luckily I have a customer PC to debug this issue. I could not figure out what the problem is yet.
What I already did to find a solution:
I have ensured that the path and font-family name is correct. I also ensured that the #font-face command is inside the CSS file I have embedded
I tried to add the doctype from:
<!DOCTYPE html> to
<!DOCTYPE html SYSTEM "about:legacy-compat">
I updated the meta tags, e.g.:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I also tried to change the order of the font-face url commands
I removed the ' from the name of the font-family, so from:
font-family: 'My font'; to
font-family: My font;
I also tried to force the correct MIME of the font with a .htaccess file like:
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-opentype .otf
AddType image/svg+xml .svg
AddType application/x-font-ttf .ttf
AddType application/x-woff .woff
I also installed the website on another server to be sure this is not a server problem
I ensured that the chekboxes in Internet Explorer 10 under "Internet options" -> "Accessibility" are not checked
Technical things:
I am embedding my CSS with:
<link rel="stylesheet" type="text/css" href="assets/css/base.css">
My #font-face command looks like:
#font-face {
font-family: MyFont;
src: url('myPath/MyFont.eot');
src: url('myPath/MyFont.eot?#iefix') format('embedded-opentype'),
url('myPath/MyFont.woff') format('woff'),
url('myPath/MyFont.ttf') format('truetype'),
url('myPath/MyFont.svg#myfont') format('svg');
font-style: normal;
font-weight : normal;
}
// EDIT:
I just want to point out that CSS fonts work generally. But unfortunately not in on this site.
Getting #font-face working in Internet Explorer may just be spooky enough.
as well as you know #font-face already works in Safari 3 via WebKit and is supported in the latest Firefox 3.1 beta.
With IE, that means around 75% of the world audience could see custom typefaces today if their EULAs allowed it.
Fortunately, there are good free faces available to us already, as well as some commercial faces that permit embedding.
so..my onion to use latest version of browser like- chrome, firefox 3.1, safari 3.
Thank you.....
Here is what solved my problem:
I found out that the customer has a "whitelist" of hosts. Unfortunately my server wasn't on this list. So the customers proxy blocked all font requests from my server.
I don't know the reason for it, but I think the one who configured the proxy thought that a virus or trojan could be downloaded over a font.
Related
My Website that I'm hosting on Github Pages with a namecheap domain, doesn't allow iOS users (haven't tried android) to see the fonts. I've tried this on iOS 14.3 on an iPhone 7 with both Safari, and Chrome
The font displayed on my Windows 10 Computer is Calibri but on iOS it shows up as Times New Roman (default)
my website is http://joswinjohn.me,
html file is https://raw.githubusercontent.com/joswinjohn/joswinjohn.github.io/master/index.html
css file is https://raw.githubusercontent.com/joswinjohn/joswinjohn.github.io/master/css/style.css
the repo is https://github.com/joswinjohn/joswinjohn.github.io if you need anything else
if there's anything I've left out please let me know!
Your Windows device is correctly displaying your "Calibri" font because that font is already installed on the device. To use a font that is not installed in the target device, you need to include the font file itself and reference it in your CSS file:
#font-face {
font-family: Calibri;
src: url("Calibri.ttf") format("truetype"), url("Calibri.otf") format("opentype"), url("Calibri.woff") format("woff"), url("Calibri.woff2") format("woff2");
}
In src you can use 1 or more url()s. If you use more than one, the browser will use the first match, or the first one it supports. Make sure what is inside url() matches your font file's path.
I've downloaded Google's "Noto Color Emoji" font, but can't get it to work. I have no problems with fonts like "Noto Sans Regular". But with the "Noto Color Emoji" font I get the following errors in Firefox (on Windows 10):
downloadable font: no supported glyph shapes table(s) present (font-family: "NotoColorEmoji" style:normal weight:normal stretch:normal src index:0)
downloadable font: rejected by sanitizer (font-family: "NotoColorEmoji" style:normal weight:normal stretch:normal src index:0)
It's also not working with Chrome, Internet Explorer and Edge on Windows 10 or Firefox on Ubuntu Linux.
This is my code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#font-face {
font-family: 'NotoColorEmoji';
src: url('NotoColorEmoji.ttf') format('truetype');
}
</style>
</head>
<body>
<span style="font-family: 'NotoColorEmoji'">Emojis: 😀😬😁😂😃😄😅😆😇😉😊🙂</span>
</body>
What am I doing wrong? Are Emoji fonts used in a different way?
Color fonts are coming but you will need to either:
Implement all color formats in one font (4 in total!) -> I don't know if somebody did it but the font would be huge, and it looks really complicated and not recommended.
Make one font for each format and load it conditionally. -> Not recommended as some formats are bitmap based and not vectors & fonts can be huge (+20Mo).
Wait for the OpenType SVG format support on all platforms.
Do it in javascript like
Twemoji "A simple library that provides standard Unicode emoji
support across all platforms."
EmojiOne "EmojiOne™ is the
open emoji standard."
The latest solution looks the best one for now for a web usage!
Color fonts are quite new with several competing standards which are still evolving and being implemented in common text libs (Opentype 1.8 has just been released with another color twist).
They are unlikely to work today except in the very latest preview browsers, and even then the level of support is likely to vary and depend on the underlying system, since browsers do use the system text libs (with various levels of overrides).
Older software will just not recognize the Opentype extensions added to make those fonts possible.
Lastly, Noto Color Emoji is pretty much a prototype, it is likely early versions are not quite conformant to what has been standardised later, and even if they are, the way the color font standards are used is still likely to evolve as font producers and font consumers gain maturity on the subject.
We are currently working on an open source Emoji library called OpenMoji.
At the moment, we got an .ttf font working which you can simply embed in your website
Download the font from here. 💾
Embed the font with:
#font-face {
font-family: 'OpenMoji';
src: URL('OpenMoji-Color.SVG.ttf') format('truetype');
}
Enjoy! 🥳 If there's any question, please let us know.
Note: Currently supports Firefox and Illustrator.
I use font-family:'Segoe UI Emoji'
Works on Chrome, Firefox, IE11, Mac Safari, and mobile Safari.
Mostly all emojis work, including ones that don't have any colors on normal fonts, such as the mountain, speech bubble, paintbrush.
Does not work on Android :(
I use this code in style.css file and can add my custom font where I want.
#font-face {
font-family: Titr;
src: url('fonts/L4i_Titr.ttf');
url('Thonburi-Bold.eot');
}
But this work for localhost. When I put my local website in the web, font don't work.
What's problem?
What's the solution?
Make Sure fonts are uploaded on server and in your question path is wrong for .eot format. Since All latest browser support the .woff font format type. So you can use .ttf and .woff font format type.
Thats work on your local machine because of fonts are available on your system. After uploading the font on server and given a correct file path in CSS file your custom fonts will appear.
As well make sure you define the font MIME Type for all fonts type you are using. For example .woff format set a MIME type in server like application/x-font-woff .
Using #font-face Generator you can convert font format from .ttf to .eot, .svg, .woff.
Update:
On .htaccess file add font the following types:
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
CSS
#font-face {
font-family: 'Titr';
src: url('fonts/L4i_Titr.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('fonts/L4i_Titr.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
If Kheema Pandey's solution dosen't work then maybe there is something wrong with the font file. And if this is true then the only reson because of which the font is working on localhost is because you already have it installed on your system. So just check the font file for any errors.
EDIT :
Have you tried opening the online page in multiple browsers. If not then try it beacuse it might be possible that a specific browser might not support a font(happened with me).
I have a font-face defined in my CSS that looks like the following:
#font-face {
font-family: 'iconFont';
src:
url('../fonts/iconFont.eot?') format('eot'),
url('../fonts/iconFont.woff') format('woff'),
url('../fonts/iconFont.svg#iconFont') format('svg'),
url('../fonts/iconFont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I also have a few other font-faces of a similar format. When using the fully qualified domain name of my PC (eg 'mypc.mydomain.local') Internet Explorer 9+ retrieves the fonts and renders the page correctly. However, when using just the hostname of my laptop (eg 'mypc') IE never even attempts to retrieve the fonts. I have confirmed this using Fiddler.
The only difference I can see is that a different security zone is in effect depending on whether the fully qualified name is used (Internet) or just the hostname (Local intranet). Both of these zones have the "Download Fonts" set to enable on my PC.
If it is related to the security zone then it is surprising that the intranet settings seem to be allowing less than the internet settings. Or it's a bug in IE.
Firefox downloads the fonts and renders correctly regardless of the hostname I use.
Internet Explorer enforces a same-origin or CORS check on WOFF fonts. If you have a page at "mypc.mydomain.local", it can't use a font from "mypc" unless a proper Access-Control-Allow-Origin header is present.
https://developers.google.com/fonts/docs/troubleshooting#CORS_header
Can't seem to get my font working in firefox, seems to work fine in IE, chrome and Safari
<style type="text/css">
#font-face {
font-family: MyCustomFont;
src: url("http://www.brightonorient.com/MTCORSVA.eot") /* EOT file for IE */
}
#font-face {
font-family: MyCustomFont;
src: url("http://www.brightonorient.com/MTCORSVA.TTF") /* TTF file for CSS3 browsers */
}
</style>
This is the website here, http://www.brightonorient.com - the front page text Brighton Orient should be Monotype corsiva.
Thanks for any help
I typically use Font Squirrel for my #font-face needs and have never had an issue. Check this link to see if the trouble shooting tips provide any help. If it is any consolation, in Firefox on my machine I can see the font load just fine and render properly. Throwing FireBug on it shows the font loaded properly as well. Not sure why you're not seeing it work unless your Firefox is not up-to-date.
Technically, it works for me on WinXP SP3 with Fx 6.0.2 but not with Fx 11.0
Though, on the legal side (IANAL), it seems you don't have the rights to use Monotype Corsiva with #font-face: only Monotype does. See http://www.fonts.com/findfonts/detail.htm?productid=172339 and their service http://webfonts.fonts.com for maybe a solution.
Using it on your computer and distributing it to every visitor via your server are often two very different licences!
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/
go to this link http://www.fontsquirrel.com/fontface/generator
upload your font
then download all files have different font formats which is supported for different browsers
and use in your project. now it will work accurately in all browsers