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.
Related
I am working on legacy code base that has these and more #font-face declarations
#font-face {
font-family: 'Lato';
font-weight: $font-weight-thin;
font-style: $font-style-normal;
text-rendering: optimizeLegibility;
src: url('#{$lato-path}Lato-Thin-webfont.eot');
src: url('#{$lato-path}Lato-Thin-webfont.eot?#iefix') format('embedded-opentype'),
url('#{$lato-path}Lato-Thin-webfont.woff2') format('woff2'),
url('#{$lato-path}Lato-Thin-webfont.woff') format('woff'),
url('#{$lato-path}Lato-Thin-webfont.ttf') format('truetype'),
url('#{$lato-path}Lato-Thin-webfont.svg#latothin') format('svg');
}
#font-face {
font-family: 'Lato';
font-weight: $font-weight-thin;
font-style: $font-style-italic;
text-rendering: optimizeLegibility;
src: url('#{$lato-path}Lato-ThinItalic-webfont.eot');
src: url('#{$lato-path}Lato-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('#{$lato-path}Lato-ThinItalic-webfont.woff2') format('woff2'),
url('#{$lato-path}Lato-ThinItalic-webfont.woff') format('woff'),
url('#{$lato-path}Lato-ThinItalic-webfont.ttf') format('truetype'),
url('#{$lato-path}Lato-ThinItalic-webfont.svg#latothin_italic') format('svg');
}
Clearly these are referencing 2 separate font files, but will the other versions ever get reached if they all have the same font family name?
font-family: 'Lato';
Yes. Note that the font-style differs, so the fonts will be applied to their respective font styles (first to normal, second to italic)
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
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 a font-face that is working across all my target browsers except for IE6
#font-face {
font-family: 'AFC-Bold';
src: url('metaactionforchildren-bold.eot');
src: url('metaactionforchildren-bold.eot?#iefix') format('embedded-opentype'),
url('metaactionforchildren-bold.woff') format('woff'),
url('metaactionforchildren-bold.ttf') format('truetype'),
url('metaactionforchildren-bold.svg#metaactionforchildren-bold') format('svg');
font-weight: normal;
font-style: normal;
}
Any ideas?
It is not properly supported.
See: http://caniuse.com/#feat=fontface