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"
Related
I am developing a responsive web application. I encountered a problem that the font family doesn't work as expected on mobile, but it works as expected on a computer. Why is this the case?
Code:
HTML
<link href="css/fonts/fonts.css" rel='stylesheet' type='text/css' />
CSS
#font-face {
font-family: 'uni_sans_regularregular';
src: url('uni-sans-regular-webfont.eot');
src: url('uni-sans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-regular-webfont.woff') format('woff'),
url('uni-sans-regular-webfont.ttf') format('truetype'),
url('uni-sans-regular-webfont.svg#uni_sans_regularregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_lightregular';
src: url('uni-sans-light-webfont.eot');
src: url('uni-sans-light-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-light-webfont.woff') format('woff'),
url('uni-sans-light-webfont.ttf') format('truetype'),
url('uni-sans-light-webfont.svg#uni_sans_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_bold_italicitalic';
src: url('uni-sans-bolditalic-webfont.eot');
src: url('uni-sans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-bolditalic-webfont.woff') format('woff'),
url('uni-sans-bolditalic-webfont.ttf') format('truetype'),
url('uni-sans-bolditalic-webfont.svg#uni_sans_bold_italicitalic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_boldregular';
src: url('uni-sans-bold-webfont.eot');
src: url('uni-sans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-bold-webfont.woff') format('woff'),
url('uni-sans-bold-webfont.ttf') format('truetype'),
url('uni-sans-bold-webfont.svg#uni_sans_boldregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_lightregular';
src: url('uni-sans-light-webfont.eot');
src: url('uni-sans-light-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-light-webfont.woff') format('woff'),
url('uni-sans-light-webfont.ttf') format('truetype'),
url('uni-sans-light-webfont.svg#uni_sans_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_thinregular';
font-weight: normal;
font-style: normal;
}
Thanks in advance
First, open your SVG file with a text editor and find out if the name you've written in the hashtag for the SVG matches what it says in the file.
If it matches, try this, if not, adjust accordingly.
#font-face {
font-family: 'uni_sans_regular';
src: url('uni-sans-regular-webfont.svg#uni_sans_regularregular') format('svg');
src: url('uni-sans-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body { font-family:'uni_sans_regular',Arial,sans-serif; }
If the font still doesn't display on mobile then I'd assume your SVG or WOFF font files are corrupt, the path to the font file is not correct, or the files aren't downloading to the mobile device for some other reason (slow connection perhaps).
The SVG file should work for Firefox 3.5, Chrome 0.3, Safari 3.1, Opera 9, and all iOS devices. The TTF file will pick up IE9 and Android 2.2. You don't need the EOT file unless you want to cover IE8-. I just reduced it to the minimum number of includes so you can narrow down the issue.
If your hosting the file on an IIS server, you may need to adjust your server settings. IIS will not serve files with unknown MIME types so you must set the MIME type for SVG to image/svg+xml, similarly for WOFF. Instructions from Microsoft (link)
If your testing with a 3rd party browser app on your mobile device, try testing on the default browser that comes with the device because many 3rd party apps have their own quirks.
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/
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;
}
I'm working on a website with a font I uploaded. It works fine in all browsers but in Firefox and IE, when I add www. to the url in the browser, the font doesn't show up? Does anyone know what's up?
This is my CSS declaration:
#font-face {
font-family: 'ITCAvantGardeGothicProDemi';
src: url('../fonts/itcavantgardepro-demi-webfont.eot');
src: url('../fonts/itcavantgardepro-demi-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/itcavantgardepro-demi-webfont.woff') format('woff'),
url('../fonts/itcavantgardepro-demi-webfont.ttf') format('truetype'),
url('../fonts/itcavantgardepro-demi-webfont.svg#') format('svg');
font-weight: normal;
font-style: normal;
}
Thanks for the help!