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
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.
I'm working on some front-end project and i got an issue with font-face. The font is ok with Firefox but with Chrome it looks ugly, like a Time News Roman..
Here is the code is used to import the font to my Sass project:
#font-face {
font-family: 'aHeadline';
src: local(' Headline'),
url('../fonts/headline.woff') format('woff'),
url('../fonts/headline.ttf') format('truetype'),
url('../fonts/headline.svg') format('svg');
src: url('../fonts/headline.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
Here is a live demo http://185.13.36.42/T/foo.html
NB: The fonts comes from the Font Squirrel webfont generator
Just a little syntax change. This will work for you:
#font-face {
font-family: 'headline';
src: url('../fonts/headline.eot');
src: url('../fonts/headline.eot?#iefix') format('embedded-opentype'),
url('../fonts/headline.woff') format('woff'),
url('../fonts/headline.ttf') format('truetype'),
url('../fonts/headline.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal;
}
I've looked this online and can't see anything wrong with my font-face css, but however it isn't working on IE 8 and lower, so would love to see if anyone knows how fix this issue or if there is anything they see I'm doing wrong.
CSS
#font-face {
font-family: 'Univers-CondensedBold';
src: url('univers-condensedbold.eot');
src: url('univers-condensedbold.eot?#iefix') format('embedded-opentype'),
url('univers-condensedbold.woff') format('woff'),
url('univers-condensedbold.ttf') format('truetype'),
url('univers-condensedbold.svg#univers-condensedbold') format('svg');
font-weight: normal;
font-style: normal;
font-smooth: always;
}
#font-face {
font-family: 'Univers-Light';
src: url('univers-light.eot');
src: url('univers-light.eot?#iefix') format('embedded-opentype'),
url('univers-light.woff') format('woff'),
url('univers-light.ttf') format('truetype'),
url('univers-light.svg#univers-light') format('svg');
font-weight: normal;
font-style: normal;
font-smooth: always;
}
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.
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