I am currently using Roboto Condensed font for my website with google link directly on the php pages. Instead of the link I want to use #font-face so downloaded the fonts from fontsquirrel and added this code into my css (was the only one that worked):
#font-face {
font-family: 'Roboto Condensed';
src: local('Roboto Condensed'), local('RobotoCondensed-Light-webfont'), url('roboto-fontfacekit/roboto_lightcondensed_macroman/RobotoCondensed-Light-webfont.eot?') format('eot'), url('roboto-fontfacekit/roboto_lightcondensed_macroman/RobotoCondensed-Light-webfont.woff') format('woff'), url('roboto-fontfacekit/roboto_lightcondensed_macroman/RobotoCondensed-Light-webfont.ttf') format('truetype');
}
My problem is that it doesn't matter which type of font I link to (light, normal, italic or bold) it always looks like the normal one.
Also the light one has by default a weight of 300. When I had the link from google directly on page I've made the font with a weight of 200 as it was looking better to me. But now I can't.
I tried adding font weight to the above code or changing the code from classes but no changes.
Does anyone know what the problem is and how can this be fixed?
Thanks.
I have a framework of html/css pages using a font-face declaration with a otf. Now I want to switch it to a common font like Verdana. How can I assign Verdana to the font-face declaration avoiding a numerous replacement of font-family declaration? In other words: How can I use the font name declarated by font-face as a font variable?
#font-face {
font-family: 'bauer-bodoni.otf';
src: url(../fonts);
Should be something like this (which is not working in this form):
#font-face {
font-family: 'Verdana', 'Arial', sans-serif;
Thank you very much in advance.
-R.
EDIT/ANSWER: I've found out on my own. The trick is not to list the fonts the way you do in a normal font declaration, separated by comma, but with a "local()" for each:
#font-face {
font-family: 'myOwnFontSet';
src: local('Verdana');
src: local('Arial');
src: local(sans-serif);
Your update is still wrong. You need the following:
#font-face {
font-family: 'myOwnFontSet';
src: local('Verdana'), local('Arial'), local(sans-serif); }
#font-face {
font-family: iconFont;
src: local(iconFont), url('fonts/iconFont.ttf') format('opentype');
}
The font file is not corrupt and installs fine in OSX etc. letting me preview it. But it won't render anything when I try to use it on a web page or even if I select it in illustrator it just switches to another font if I touch any key.
The font is for 'regular' and I have tried other options, but it won't work. Have tried typing with caps on/off etc. Using numpad, nothing. Have re-installed it and made sure there are no duplicates. It also won't work in Windows. Not sure if I need to change my css somehow or the fault lays with the font.
Here's a link to the font for anyone wanting to try. It's a bunch of metro icons. http://www2.zippyshare.com/v/23494573/file.html
Not sure if this will help, but this is the CSS I use, and it works fine. The webfonts directory is in the same directory as the css file, and includes three file types: .eot .ttf .woff
#font-face {
font-family: 'AvenirLT-Book';
src: url('webfonts/25EE2B_0_0.eot');
src: url('webfonts/25EE2B_0_0.eot?#iefix') format('embedded-opentype'), url('webfonts/25EE2B_0_0.woff') format('woff'), url('webfonts/25EE2B_0_0.ttf') format('truetype');
}
a typical class decleration:
.AvenirLT-Book {
font-family: AvenirLT-Book;
font-weight: normal;
font-style: normal;
}
perhaps you need to change the format to ('truetype') instead of ('opentype') ?
I have generated a #font-face with FontSquirrel, and resulted these (tweaked later) rules:
#font-face {
font-family: 'CabinSketchRoBold';
src: url('cabinsketchro-boldwebfont.eot');
}
#font-face {
font-family: 'CabinSketchRoBold';
src: url('cabinsketchro-boldwebfont.woff') format('woff'),
local('?'), url('cabinsketchro-boldwebfont.ttf') format('truetype'),
url('cabinsketchro-boldwebfont.svg#CabinSketchRoBold') format('svg');
font-weight: normal;
font-style: normal;
}
Style is applied in the css file like this:
h1,h2,h3,h4,h5,h6 {font-weight:normal;font-family:'CabinSketchRoBold',Arial,sans-serif !important; }
Everithing works fine in Chrome, even in InternetExplorer, but in newer versions of Firefox, the font doesn't load. It loads in FF 3.6... o_O
I have another font, Ubuntu, loaded from Google via the JavaScript option, and that one loads ok, even on the headings, after changing
font-family:'CabinSketchRoBold','Ubuntu',Arial,sans-serif !important;
What's wrong with the declarations that makes FF ignore my local font?
EDIT: this is not only on localhost, it happens on the live site too. I have looked at other answers and tried them out, but no luck. WOFF was even base64 encoded, same result.
SOLVED: Seems that the .eot being in a separate declaration (again, FontSquirrel generated) was doing the damage. Moving it with the others solved it. Thanks Boris Zbarsky!
#font-face {
font-family: 'CabinSketchRoBold';
src: url('cabinsketchro-boldwebfont.eot?#') format('eot'),
url('cabinsketchro-boldwebfont.woff') format('woff'),
local('?'), url('cabinsketchro-boldwebfont.ttf') format('truetype'),
url('cabinsketchro-boldwebfont.svg#CabinSketchRoBold') format('svg');
font-weight: normal;
font-style: normal;
}
Your problem is that you are actually defining two separate faces of the "CabinSketchRoBold" font.
The first face is normal weight and uses .eot file for the font data.
The second face is bold weight and uses one of woff, truetype, svg, whichever is available.
Then you're styling text that's normal weight. So the first face is picked. See http://dev.w3.org/csswg/css3-fonts/#font-style-matching for the spec on this.
In particular, following the steps in that spec, in step 4 we end up a single face: the .eot one. But since the browser can't do anything with that font format, this face has no glyphs so in step 5 the browser moves on to the next family name. The other (bold) face in the "CabinSketchRoBold" family is not considered, per spec.
So the upshot is that you should either list font-weight: bold in both your rules or in neither one. Then the .eot and the other options would all be considered as sources for a single font face, not for different faces in the same family.
It looks like Chrome doesn't actually follow the spec here, unfortunately...
The latest versions of Firefox are able to show the font related errors in the tools->web developer->errors console. for example this is the error I give with a custom font:
Error: downloadable font: table 'GSUB': OpenType layout data discarded
You must have this font type for working in IE,Firefox,Chrome
#font-face
{
font-family: 'BHoma';
src: url('/public/font/BHoma.eot?#')format('eot'),
url('/public/font/BHoma.ttf')format('truetype'),
url('/public/font/BHoma.woff')format('woff'),
url('/public/font/BHoma.svg#BHoma')format('svg');
}
but you first must generate your font from this link
http://www.codeandmore.com/2011/06/font-face-kit-generator/
Building a site using custom fonts. Got .ttf files from a designer.
css looks like this:
#font-face{
font-family:MenuFont;
src: url("http://www.website.com/assets/fontfile.ttf");
}
.divClass{font-family:MenuFont;}
I've tried with a couple different font files he gave me. One of them doesn't show up at all. Even more strangely, a couple of them only effect certain letters. For instance, plugging in one file makes only O's, R's C's and P's use the correct font. I checked and it's the same letters across browsers.
Looking in firebug, I can see the whole font, when I roll over the font file url, so my Url's are fine, and the browser is getting the font.
What am I missing here?
Generate the correct font-face code and all the needed fonts with FontSquirrel. See: http://www.fontsquirrel.com/fontface/generator
You will get a more extended and compatible font-face declaration. Like this:
#font-face {
font-family: 'Meran';
src: url('../fonts/meran-normal-webfont.eot');
src: url('../fonts/meran-normal-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/meran-normal-webfont.woff') format('woff'),
url('../fonts/meran-normal-webfont.ttf') format('truetype'),
url('../fonts/meran-normal-webfont.svg#Meran') format('svg');
font-weight: normal;
font-style: normal;
}