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:
Related
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;
}
I integrated a font into my web project. Here comes the CSS code:
#font-face {
font-family: 'vladimirscriptefregular';
src: url('fonts/vladimirscriptef-webfont.eot');
src: url('fonts/vladimirscriptef-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/vladimirscriptef-webfont.woff') format('woff'),
url('fonts/vladimirscriptef-webfont.ttf') format('truetype'),
url('fonts/vladimirscriptef-webfont.svg#vladimirscriptefregular') format('svg');
font-weight: normal;
font-style: normal;
}
My problem is that the font is not displayed in Firefox - instead, Times New Roman is displayed. In all other browsers the font is displayed correctly.
Does anyone see what's missing in my code?
Try the code below:
#font-face {
font-family: 'vladimirscriptefregular';
-moz-font-family:'vladimirscriptefregular';
src: url('fonts/vladimirscriptef-webfont.eot');
src: url('fonts/vladimirscriptef-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/vladimirscriptef-webfont.woff') format('woff'),
url('fonts/vladimirscriptef-webfont.ttf') format('truetype'),
url('fonts/vladimirscriptef-webfont.svg#vladimirscriptefregular') format('svg');
font-weight: normal;
-moz-font-weight:normal
font-style: normal;
-moz-font-style:normal
}
Firefox has a list of fonts which can be used in its whitelist.
It can be accessed by typing "about:config" in the address bar.
Then search for "font.system.whitelist".
Here add your font name which must be present in the Font folder.
For windows the default location is "C:\Windows\Fonts"
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/
I use google "Comfortaa" font for a blog with this code
<link href='http://fonts.googleapis.com/css?family=Comfortaa&subset=greek,latin' rel='stylesheet' type='text/css'>
However, the font (along with other fonts) are displayed more boldly on mac Firefox (display fine on Chrome mac/win firefox win etc)
I changed all em to px just to be sure, plus I though I could try font squirrel with the code
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 2, 2012 */
#font-face {
font-family: 'comfortaabold';
src: url('comfortaa-bold-webfont.eot');
src: url('comfortaa-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('comfortaa-bold-webfont.woff') format('woff'),
url('comfortaa-bold-webfont.ttf') format('truetype'),
url('comfortaa-bold-webfont.svg#comfortaabold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'comfortaalight';
src: url('comfortaa-light-webfont.eot');
src: url('comfortaa-light-webfont.eot?#iefix') format('embedded-opentype'),
url('comfortaa-light-webfont.woff') format('woff'),
url('comfortaa-light-webfont.ttf') format('truetype'),
url('comfortaa-light-webfont.svg#comfortaalight') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'comfortaaregular';
src: url('comfortaa-regular-webfont.eot');
src: url('comfortaa-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('comfortaa-regular-webfont.woff') format('woff'),
url('comfortaa-regular-webfont.ttf') format('truetype'),
url('comfortaa-regular-webfont.svg#comfortaaregular') format('svg');
font-weight: normal;
font-style: normal;
}
Still the issue persists.(I 'm not really sure where to put the #font face -I applied it through blogger css)
Am I doing something wrong, or is this plainly a browser rendering issue that can't be fixed?
Try using a numerical font-weight value. In the Google webfont listening you can see the correct font-weight for each style. In the case of Comfortaa these are: {font-weight: 300;} for book, {font-weight: 400;} for normal and {font-weight: 700;} for bold.
I downloaded a font and generated font-face css using font-squirrel.
The font is displayed properly in IE,Opera but in chrome , firefox & safari it looks small and something totally different...
Is there anything that i need to change ??
#font-face {
font-family: 'LektonRegular';
src: url('myfonts/lekton-regular-webfont.eot');
src: url('myfonts/lekton-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('myfonts/lekton-regular-webfont.woff') format('woff'),
url(myfonts/lekton-regular-webfont.ttf) format('truetype'),
url('myfonts/lekton-regular-webfont.svg#LektonRegular') format('svg');
font-weight: normal;
font-style: normal;
}