I am working on a site with Font Face but my client's IE 11 and 12 are not loading them. After testing endlessly on many machines, and always having success, I am convinced that their IE are defaulted to not allow embedding. Is there a way around this?
Here is my CSSS
#font-face {
font-family: 'hirukoregular';
src: url('fonts/thinkdust_-_hiruko-webfont.eot');
src: url('fonts/thinkdust_-_hiruko-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/thinkdust_-_hiruko-webfont.woff2') format('woff2'),
url('fonts/thinkdust_-_hiruko-webfont.woff') format('woff'),
url('fonts/thinkdust_-_hiruko-webfont.ttf') format('truetype'),
url('fonts/thinkdust_-_hiruko-webfont.svg#hirukoregular') format('svg');
font-weight: normal;
font-style: normal;
}
Related
For one of my current web projects I'm using a Candara font, here's how I refer to it in my stylesheet:
#font-face {
font-family: "Candara",sans-serif;
src: url("../fonts/Candara_gdi.otf"); format('otf'),
url("../fonts/Candara_gdi.woff"); format('woff'),
url("../fonts/Candara.woff2"); format('woff2'),
url("../fonts/Candara_gdi.eot"); format('eot'),
url("../fonts/Candara_gdi.ttf"); format('truetype'),
url("../fonts/Candara_gdi.svg#Candara-Regular"); format('svg');
font-style: normal;
font-weight: normal;
}
After testing the site on mobile devices, I've noticed that Candara is not showing (the mobile devices render the fallback font, which is in this case 'sans-serif'). On the other hand, there's no problem with this font on all other desktop browsers, including the notorious IE family and Mozilla.
I'd like to mention that when I wanted to generate a webfont package here, there was a warning saying that Microsoft has blacklisted this font (see the screenshot of the warning):
Hence, I had to "manually" convert this font using some other online solutions. Any ideas on the issue and how to resolve it?
You need to remove the semi-colons after your url-declarations. A semi-colon ends the declaration for the src.
#font-face {
font-family: "Candara",sans-serif;
src: url("../fonts/Candara_gdi.otf") format('otf'),
url("../fonts/Candara_gdi.woff") format('woff'),
url("../fonts/Candara.woff2") format('woff2'),
url("../fonts/Candara_gdi.eot") format('eot'),
url("../fonts/Candara_gdi.ttf") format('truetype'),
url("../fonts/Candara_gdi.svg#svgCandara_gdi") format('svg');
font-style: normal;
font-weight: normal;
}
Code:
#font-face {
font-family: 'yanone_kaffeesatzregular';
src: url('../fonts/yanonekaffeesatz-regular-webfont.eot');
src: url('../fonts/yanonekaffeesatz-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/yanonekaffeesatz-regular-webfont.woff') format('woff'),
url('../fonts/yanonekaffeesatz-regular-webfont.ttf') format('truetype'),
url('../fonts/yanonekaffeesatz-regular-webfont.svg#yanone_kaffeesatzregular') format('svg');
font-weight: normal;
font-style: normal;
}
I have the eot#iefix and yet, font is not being displayed the way it should. It works fine in all other browsers. The font is applied on headings and the top right navigation.
Project link
The fonts are placed in the ftp correctly as well:
I am trying to use Open Sans (Turkish version)
I am pretty sure i applied correct syntax. however Turkish character looks different in IE 7,8
IE 9
IE8 and IE7
#font-face {
font-family: 'open_sansregular';
src: url('Fonts/OpenSans-Regular-webfont.eot');
src: url('Fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('Fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('Fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('Fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'open_sanssemibold';
src: url('Fonts/OpenSans-Semibold-webfont.eot');
src: url('Fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('Fonts/OpenSans-Semibold-webfont.woff') format('woff'),
url('Fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
url('Fonts/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
font-weight: normal;
font-style: normal;
}
EDIT
This is strange I uploaded example here and it works perfectly. Problem still exist on localhost
I am using VS 2013 and IIS Express 8.0
Solution
download fonts from font-squirrel
Upload them to font-squirrel's Font-Generalor
Check Keep existing in Trutype Hinting Section
I am using some fonts generated from FontSquirrel but it doesn't seem to that IE can't handle the fonts.. What am I doing wrong? This is not a public webpage.. It is builded to work on a local platform until I am ready to launch, that's why the domain name ends on .local.
#font-face {
font-family: 'proxima_light';
src: url('http://www.anotherdomain.local/fonts/proximanova-light-webfont.eot');
src: local('proxima_light'), url('http://www.anotherdomain.local/fonts/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.anotherdomain.local/fonts/proximanova-light-webfont.woff') format('woff'),
url('http://www.anotherdomain.local/fonts/proximanova-light-webfont.ttf') format('truetype'),
url('http://www.anotherdomain.local/fonts/proximanova-light-webfont.svg#proxima_nova_ltregular') format('svg');
font-style: normal;
}
#font-face {
font-family: 'proxima';
src: url('http://www.anotherdomain.local/fonts/proximanova-regular-webfont.eot');
src: local('proxima'), url('http://www.anotherdomain.local/fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.anotherdomain.local/fonts/proximanova-regular-webfont.woff') format('woff'),
url('http://www.anotherdomain.local/fonts/proximanova-regular-webfont.ttf') format('truetype'),
url('http://www.anotherdomain.local/fonts/proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'proxima';
src: url('http://www.anotherdomain.local/fonts/proximanova-semibold-webfont.eot');
src: local('proxima'), url('http://www.anotherdomain.local/fonts/proximanova-semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.anotherdomain.local/fonts/proximanova-semibold-webfont.woff') format('woff'),
url('http://www.anotherdomain.local/fonts/proximanova-semibold-webfont.ttf') format('truetype'),
url('http://www.anotherdomain.local/fonts/proximanova-semibold-webfont.svg#proxima_nova_ltbold') format('svg');
font-weight: bolder;
font-style: normal;
}
As I said.. it is only IE that doesn't handle the font-face.. Every other browser does it well..
I'm not sure if this'll help, but IE has some similar cross-domain issues as FF. In this case, it might be that your absolute URL is making IE think your font is being served from a different domain. Have you tried using a relative path?
Does Dev Console return error on laod the font files, also could you please provide of the Responce Header of the font file.
I've faced with issue in IE 9 when it didn't use font file in case if Responce header contained Cache-Control: no-cache
I've noticed when using web fonts that they can initially can take a second to come up; like if you create a drop down nav menu, when you hover over the menu for the first time the whole menu will appear as just the background color for a second and then the text will appear.
This isn't really ideal and it leads me to believe that webfonts aren't downloaded when the CSS file is loaded, but rather when you first view them on the page.
But on the other hand, I already have the fonts installed on my PC so they shouldn't need to be downloaded, so that lends the question on why do they do this!?
Here is the CSS I use to load my webfonts:
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Regular-webfont.eot');
src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Italic-webfont.eot');
src: url('../fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Italic-webfont.woff') format('woff'),
url('../fonts/Roboto-Italic-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Bold-webfont.eot');
src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Bold-webfont.woff') format('woff'),
url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Light-webfont.eot');
src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Light-webfont.woff') format('woff'),
url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Medium-webfont.eot');
src: url('../fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Medium-webfont.woff') format('woff'),
url('../fonts/Roboto-Medium-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
font-weight: 500;
font-style: normal;
}
When are webfonts downloaded?
Paul Irish made a simple page to test this: http://dl.getdropbox.com/u/39519/webfontsdemo/loadtest.html
It shows that most browsers download fonts when they're used in a page rather than when they're declared in CSS. I believe IE is the exception but I don't have it running to test right now.
The reason for downloading on usage rather than on declaration is to reduce unnecessary network traffic, e.g. if a font is declared but not used.
Can font downloading be avoided?
You're right that if fonts are already installed they shouldn't need to be downloaded. As #Patrick said above, this can be done using local(). It's placed before url() in the CSS and takes the name of the font (the PostScript name is subsequently needed for Safari on Mac OS X). Try out the following change to your CSS:
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Regular-webfont.eot');
src: local(Roboto Regular), local(Roboto-Regular),
url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Finally, to reduce font download times, you could make sure you're doing the following:
Putting CSS before JavaScript
Adding far-future Expires headers for
the fonts (so the browser caches them)
GZipping the fonts
Here's a good summary of dealing with font display delays: http://paulirish.com/2009/fighting-the-font-face-fout/