I'd like to use a certain font which comes in different styles/weights for bold, italic etc. on my projects. The different styles should belong to one specific font-family "share".
So I came up with this CSS:
font-face {
font-family: 'share';
src: url('share-regular.eot');
src: url('share-regular.eot?#iefix') format('embedded-opentype'),
url('share-regular.woff') format('woff'),
url('share-regular.ttf') format('truetype'),
url('share-regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'share';
src: url('share-bold.eot');
src: url('share-bold.eot?#iefix') format('embedded-opentype'),
url('share-bold.woff') format('woff'),
url('share-bold.ttf') format('truetype'),
url('share-bold.svg') format('svg');
font-weight: bold;
}
#font-face {
font-family: 'share';
src: url('share-italic.eot');
src: url('share-italic.eot?#iefix') format('embedded-opentype'),
url('share-italic.woff') format('woff'),
url('share-italic.ttf') format('truetype'),
url('share-italic.svg') format('svg');
font-style: italic;
}
(There's also a monospaced variant, but i put that into a different family "share-mono" for now.)
But this doesn't work for "italic". I'm not sure about "bold": It looks ok, but it could be that it's just the "regular" being boldened and not the specific share-bold being used.
So I'd like to know if it's even possible to achieve what I'd like to do, and if so, where's my mistake?
Thanks in advance!
Hendrik
Related
I can't seem to get #font-face to work for my site. I'm not sure if I'm doing this correctly. Does this look right?
#font-face {
font-family: 'bebas_neue_regularregular';
src: url('../fonts/bebasneue_regular-webfont.eot');
src: url('../fonts/bebasneue_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/bebasneue_regular-webfont.woff2') format('woff2'),
url('../fonts/bebasneue_regular-webfont.woff') format('woff'),
url('../fonts/bebasneue_regular-webfont.ttf') format('truetype'),
url('../fonts/bebasneue_regular-webfont.svg#bebas_neue_regularregular') format('svg');
font-weight: normal;
font-style: normal;}
#font-face {
font-family: 'vollkornregular';
src: url('../fonts/vollkorn-regular-webfont.eot');
src: url('../fonts/vollkorn-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/vollkorn-regular-webfont.woff2') format('woff2'),
url('../fonts/vollkorn-regular-webfont.woff') format('woff'),
url('../fonts/vollkorn-regular-webfont.ttf') format('truetype'),
url('../fonts/vollkorn-regular-webfont.svg#vollkornregular') format('svg');
font-weight: normal;
font-style: normal;}
The #font-face rule usually doesn't support some old browsers. I usually use font-face generator which will generate css file from your font that you need to include, and all browsers will show it correctly.
Following this article, I declared my various font faces under the same name but with different font-weight values (100, 400, 600 and 700). To do that, I took the code generated by Font Squirrel Font Generator and simply set the same value to all font-family instances.
For some reason though, 100 and 400 display the same thing (apparently regular), and 600 and 700 the same thing too (probably bold). Any idea why is that?
#font-face {
font-family: 'proximanova';
src: url('proximanova-bold.eot');
src: url('proximanova-bold.eot?#iefix') format('embedded-opentype'),
url('proximanova-bold.woff2') format('woff2'),
url('proximanova-bold.woff') format('woff'),
url('proximanova-bold.ttf') format('truetype'),
url('proximanova-bold.svg#proxima_nova_rgbold') format('svg');
font-weight: 700 !important;
font-style: normal;
}
#font-face {
font-family: 'proximanova';
src: url('proximanova-light.eot');
src: url('proximanova-light.eot?#iefix') format('embedded-opentype'),
url('proximanova-light.woff2') format('woff2'),
url('proximanova-light.woff') format('woff'),
url('proximanova-light.ttf') format('truetype'),
url('proximanova-light.svg#proxima_novalight') format('svg');
font-weight: 100 !important;
font-style: normal;
}
#font-face {
font-family: 'proximanova';
src: url('proximanova-semibolditalic.eot');
src: url('proximanova-semibolditalic.eot?#iefix') format('embedded-opentype'),
url('proximanova-semibolditalic.woff2') format('woff2'),
url('proximanova-semibolditalic.woff') format('woff'),
url('proximanova-semibolditalic.ttf') format('truetype'),
url('proximanova-semibolditalic.svg#proxima_novasemibold_italic') format('svg');
font-weight: 600;
font-style: italic;
}
#font-face {
font-family: 'proximanova';
src: url('proximanova-regularitalic.eot');
src: url('proximanova-regularitalic.eot?#iefix') format('embedded-opentype'),
url('proximanova-regularitalic.woff2') format('woff2'),
url('proximanova-regularitalic.woff') format('woff'),
url('proximanova-regularitalic.ttf') format('truetype'),
url('proximanova-regularitalic.svg#proxima_novaregular_italic') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'proximanova';
src: url('proximanova-semibold.eot');
src: url('proximanova-semibold.eot?#iefix') format('embedded-opentype'),
url('proximanova-semibold.woff2') format('woff2'),
url('proximanova-semibold.woff') format('woff'),
url('proximanova-semibold.ttf') format('truetype'),
url('proximanova-semibold.svg#proxima_novasemibold') format('svg');
font-weight: 600;
font-style: normal;
}
#font-face {
font-family: 'proximanova';
src: url('proximanova-regular.eot');
src: url('proximanova-regular.eot?#iefix') format('embedded-opentype'),
url('proximanova-regular.woff2') format('woff2'),
url('proximanova-regular.woff') format('woff'),
url('proximanova-regular.ttf') format('truetype'),
url('proximanova-regular.svg#proxima_nova_rgregular') format('svg');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'proximanova';
src: url('proximanova-lightitalic.eot');
src: url('proximanova-lightitalic.eot?#iefix') format('embedded-opentype'),
url('proximanova-lightitalic.woff2') format('woff2'),
url('proximanova-lightitalic.woff') format('woff'),
url('proximanova-lightitalic.ttf') format('truetype'),
url('proximanova-lightitalic.svg#proxima_novalight_italic') format('svg');
font-weight: 100;
font-style: italic;
}
The first thing to try , kepping the same font-family names , is to set weights using the descriptive values
(normal - bold - bolder - lighter).
Otherwise consider the default #font-face functionality (importing a font assigning it a font-family name),
Therefore the first thing would be to differentiate the font-family: descriptor (ex. proximanova-bold , proximanova-semi, etc.)
Extending this option , if you set font-style and weight on specific fonts which are already styled with those properties, you may lead into double-styling.
You should then set all font-weights & style to normal and just select the target font-family:
#font-face {
font-family: 'proximanova-bold';
src: url('proximanova-bold.eot');
src: url('proximanova-bold.eot?#iefix') format('embedded-opentype'),
url('proximanova-bold.woff2') format('woff2'),
url('proximanova-bold.woff') format('woff'),
url('proximanova-bold.ttf') format('truetype'),
url('proximanova-bold.svg#proxima_nova_rgbold') format('svg');
font-weight: normal;
font-style: normal;
}
The author of the Proxima Nova font not occasionally separated it into many files. Each one of them supports only one set of properties like condense, weight, etc. The font-weight cannot change it even if you replace the !important declaration to !very important :)
Carefully reading this article about Proxima Nova you can found that it supports for seven weights: Thin (100), Light (300), Regular (400), Semibold (600), Bold (700), Extrabold (800), and Black (900). You also can validated it here.
In your code you try, for example, to set weight 100 on the light font, but its weight is fixed 300 (seems almost like regular, but in fact is different). Take the 'Thin' font instead and you will get 100.
I suggest using Firebug with the Firefox browser as a tool to resolve this CSS font size problem. Firebug will show what CSS attributes were given precedence to assign a specific style characteristic of a web page element. Feedback from Firebug often reveals the solution to CSS related problems.
( Firebug example with images removed due to insufficient reputations points. )
Once you know how a particular element got its font-size value, then you can work on changing it to display how you want it to look.
BTW, Chrome has a similar tool that should provide similar feedback.
sometimes a font will only support certain font-weights. I suggest looking at them to see which weights are supported.
When I attempt to add the code shown below to my CSS3 stylesheet, I get errors
saying that 'format('xxxx')' is not a valid value for the src property. If I remove the space before "format" the error goes away but I don't know if the code is being processed.
I am getting burned out. Does anyone have any ideas?
Thank you,
Yuri
#font-face {
font-family: 'arialregular';
src: url('arial-webfont.eot');
src: url('arial-webfont.eot?#iefix') format('embedded-opentype'),
url('arial-webfont.woff') format('woff'),
url('arial-webfont.ttf') format('truetype'),
url('arial-webfont.svg#arialregular') format('svg');
font-weight: normal;
font-style: normal;
}
Could you try using this below, replace the paths
#font-face {
font-family: 'LatoLight';
src: url('../fonts/Lato-Lig-webfont.eot');
src: url('../fonts/Lato-Lig-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Lato-Lig-webfont.woff') format('woff'),
url('../fonts/Lato-Lig-webfont.ttf') format('truetype'),
url('../fonts/Lato-Lig-webfont.svg#LatoLight') format('svg');
font-weight: normal;
font-style: normal;
}
Try adding:
local('arialregular')
#font-face {
font-family: 'arialregular';
src: url('arial-webfont.eot');
src: local('arialregular'),
url('arial-webfont.eot?#iefix') format('embedded-opentype'),
url('arial-webfont.woff') format('woff'),
url('arial-webfont.ttf') format('truetype'),
url('arial-webfont.svg#arialregular') format('svg');
font-weight: normal;
font-style: normal;
}
Also, this looks like a nice guide for #font-face.
This is my code:
#font-face {
font-family: 'font-icon';
src: url('richstyle-webfont.eot');
src: url('richstyle-webfont.eot?#iefix') format('embedded-opentype'),
url('richstyle-webfont.woff') format('woff'),
url('richstyle-webfont.ttf') format('truetype'),
url('richstyle-webfont.svg#richstylemedium') format('svg');
font-weight: normal;
font-style: normal;
}
I am not able to display the font-icon
I've had lots of trouble with this myself before. Check to see where you downloaded the font files compared to your root folder in relation to the HTML/CSS file.
For example, if all the fonts are in the same location in the root folder, the code you have above is correct.
There are two other scenarios that could arise. The first is if you downloaded them into a newly created folder called fonts that is in a folder within the root, the code would be the following:
#font-face {
font-family: 'font-icon';
src: url('fonts/richstyle-webfont.eot') format('eot');
src: url('fonts/richstyle-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/richstyle-webfont.woff') format('woff'),
url('fonts/richstyle-webfont.ttf') format('truetype'),
url('fonts/richstyle-webfont.svg#richstylemedium') format('svg');
font-weight: normal;
font-style: normal;
}
The other scenario could be if the file is in another folder within your website root directory, but the font files are in fonts that's in a completely separate folder. The way to access it would be to create a different relative link, like the following:
#font-face {
font-family: 'font-icon';
src: url('../fonts/richstyle-webfont.eot') format('eot');
src: url('../fonts/richstyle-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/richstyle-webfont.woff') format('woff'),
url('../fonts/richstyle-webfont.ttf') format('truetype'),
url('../fonts/richstyle-webfont.svg#richstylemedium') format('svg');
font-weight: normal;
font-style: normal;
}
It depends on how you point the URL source in the code. Like I said, I've had this problem many times before. Try this first and see if it helps.
The other thing you could do is do the same as this person posted on his answer: #font-face works in IE8 but not IE9
He also added this smileyface-local: src: local("☺"), into the code, so your code would look like this:
#font-face {
font-family: 'font-icon';
src: url('fonts/richstyle-webfont.eot');
src: local("☺"); <-- should've been a semi-colon
src: url('fonts/richstyle-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/richstyle-webfont.woff') format('woff'),
url('fonts/richstyle-webfont.ttf') format('truetype'),
url('fonts/richstyle-webfont.svg#richstylemedium') format('svg');
font-weight: normal;
font-style: normal;
}
Below is a better way of writing out the code. Try this and see how it works for you:
#font-face {
font-family: 'font-icon';
src: local("☺"),
url('fonts/richstyle-webfont.eot') format('eot'),
url('fonts/richstyle-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/richstyle-webfont.woff') format('woff'),
url('fonts/richstyle-webfont.ttf') format('truetype'),
url('fonts/richstyle-webfont.svg#richstylemedium') format('svg');
font-weight: normal;
font-style: normal;
}
Hope this helps!
Try this:
#font-face {
font-family: 'font-icon';
src: url('fonts/richstyle-webfont.eot');
src: local('?'),
url('fonts/richstyle-webfont.otf') format('opentype');
}
or this
#font-face {
font-family: 'font-icon';
src: url('fonts/richstyle-webfont.eot?') format('eot'),
url('fonts/richstyle-webfont.woff') format('woff'),
url('fonts/richstyle-webfontb.ttf') format('truetype');
}
This comes from Paul Irish's Bulletproof font post
Have you tried so:
http://jsfiddle.net/xGLaz/ ?
Or maybe you must change font-family: 'font-icon'; by font-family:'RichStyle';
Here's how to use RichStyle font:
http://richstyle.org/richstyle-theme/theme.css
I mean something like this:
#font-face {
font-family: 'RichStyle';
src: url('{url}/RichStyle.eot');
src: url('{url}/RichStyle.eot?#iefix') format('embedded-opentype'),
url('{url}/RichStyle.woff') format('woff'),
url('{url}/RichStyle.ttf') format('truetype'),
url('{url}/RichStyle.svg#richstyle') format('svg');
font-weight: normal;
font-style: normal;
}
Where {url} is a RELATIVE location of the font.
i have installed webkit Quicksand Light and book in to my CSS file, its all working fine in all browsers on the PC however when i view it on a MAC in any browser the quicksand light web font doesnt display properly comes out like a times new roman type of font. Is it not picking up the font? or is it just not rendering?
cant find any solutions to this problem, been at it all day trying to fix it
CSS:
#font-face {
font-family: 'QuicksandLight';
src: url('/assets/fonts/Quicksand_Light-webfont.eot');
src: url('/assets/fonts/Quicksand_Light-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/Quicksand_Light-webfont.woff') format('woff'),
url('/assets/fonts/Quicksand_Light-webfont.ttf') format('truetype'),
url('/assets/fonts/Quicksand_Light-webfont.svg#QuicksandLight') format('svg');
/*url('/assets/fonts/Quicksand_Light.otf');*/
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'QuicksandLightOblique';
src: url('/assets/fonts/Quicksand_Light_Oblique-webfont.eot');
src: url('/assets/fonts/Quicksand_Light_Oblique-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/Quicksand_Light_Oblique-webfont.woff') format('woff'),
url('/assets/fonts/Quicksand_Light_Oblique-webfont.ttf') format('truetype'),
url('/assets/fonts/Quicksand_Light_Oblique-webfont.svg#QuicksandLightOblique') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'QuicksandBook';
src: url('/assets/fonts/Quicksand_Book-webfont.eot');
src: url('/assets/fonts/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/Quicksand_Book-webfont.woff') format('woff'),
url('/assets/fonts/Quicksand_Book-webfont.ttf') format('truetype'),
url('/assets/fonts/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
font-weight: normal;
font-style: normal;
}
CSS for QuicksandBook;
body
{
font:13px/24px 'QuicksandBook', Arial,sans-serif;
font-weight: normal;
}
these have been referenced in the head section.
Unfortunately I don't have a Mac available to test on, but some of the pointers listed here might well be worth a shot. Let us know how you get on!
http://paulirish.com/2010/font-face-gotchas/#smiley
I normally load all of my font's at the very top of my css - I dont know if that makes a difference.
Also for future reference you can do your font's like this:
#font-face {
font-family: 'Quicksand';
src: url('/assets/fonts/Quicksand_Light-webfont.eot');
src: url('/assets/fonts/Quicksand_Light-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/Quicksand_Light-webfont.woff') format('woff'),
url('/assets/fonts/Quicksand_Light-webfont.ttf') format('truetype'),
url('/assets/fonts/Quicksand_Light-webfont.svg#QuicksandLight') format('svg');
/*url('/assets/fonts/Quicksand_Light.otf');*/
font-weight: lighter;
font-style: normal;
}
#font-face {
font-family: 'Quicksand';
src: url('/assets/fonts/Quicksand_Light_Oblique-webfont.eot');
src: url('/assets/fonts/Quicksand_Light_Oblique-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/Quicksand_Light_Oblique-webfont.woff') format('woff'),
url('/assets/fonts/Quicksand_Light_Oblique-webfont.ttf') format('truetype'),
url('/assets/fonts/Quicksand_Light_Oblique-webfont.svg#QuicksandLightOblique') format('svg');
font-weight: lighter;
font-style: italic;
}
#font-face {
font-family: 'Quicksand';
src: url('/assets/fonts/Quicksand_Book-webfont.eot');
src: url('/assets/fonts/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/Quicksand_Book-webfont.woff') format('woff'),
url('/assets/fonts/Quicksand_Book-webfont.ttf') format('truetype'),
url('/assets/fonts/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
font-weight: normal;
font-style: normal;
}
This means you can reference the font weight in your css rather than having to set the font as oblique. eg
body
{
font: italic lighter 13px/24px 'Quicksand', Arial,sans-serif;
}
That will print the font in Italic in the lighter style