dlearman1
asked on
Trouble getting web fonts to work
I have the following webfont setup. It doesn't seem to work. This is my first use of web fonts and I'm not sure of the proper structure: Help would be greatly appreciated.
In CSS:
@font-face {
font-family: 'Futura';
src: url('http://www.affinityforliving.com/_fonts/futura.eot'); /* IE9 Compat Modes */
src: url('http://www.affinityforliving.com/_fonts/futura.eot?#iefix') format('embedded-opentype' ), /* IE6-IE8 */
url('http://www.affinityforliving.com/_fonts/futura.woff') format('woff'), /* Modern Browsers */
url('http://www.affinityforliving.com/_images/futura.ttf') format('truetype'), /* Safari, Android, iOS */
url('http://www.affinityforliving.com/_images/futura.svg#svgfutura') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}
Font is called like this
.newsDate {
font-family: Futura;
font-size: 12px;
color: #791304;
letter-spacing: 1px;
line-height: 1.5;
}
Fonts are uploaded to _fonts at site root:
futura_medium-webfont.eot
futura_medium-webfont.svg
futura_medium-webfont.ttf
futura_medium-webfont.woff
CSS is linked in HTML like this:
<link rel="stylesheet" href="_css/font.css" type="text/css" charset="utf-8" />
In CSS:
@font-face {
font-family: 'Futura';
src: url('http://www.affinityforliving.com/_fonts/futura.eot'); /* IE9 Compat Modes */
src: url('http://www.affinityforliving.com/_fonts/futura.eot?#iefix') format('embedded-opentype'
url('http://www.affinityforliving.com/_fonts/futura.woff') format('woff'), /* Modern Browsers */
url('http://www.affinityforliving.com/_images/futura.ttf') format('truetype'), /* Safari, Android, iOS */
url('http://www.affinityforliving.com/_images/futura.svg#svgfutura') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}
Font is called like this
.newsDate {
font-family: Futura;
font-size: 12px;
color: #791304;
letter-spacing: 1px;
line-height: 1.5;
}
Fonts are uploaded to _fonts at site root:
futura_medium-webfont.eot
futura_medium-webfont.svg
futura_medium-webfont.ttf
futura_medium-webfont.woff
CSS is linked in HTML like this:
<link rel="stylesheet" href="_css/font.css" type="text/css" charset="utf-8" />
ASKER
Problem is I think this is what I already have..but no go
See your last two font src that is
url('http://www.affinityforliving.com/_images/futura.ttf') format('truetype'), /* Safari, Android, iOS */
url('http://www.affinityforliving.com/_images/futura.svg#svgfutura') format('svg'); /* Legacy iOS */
Is the font inside _images folder
ASKER
No! Good Point
The font names have to match up with the source definitions so change
src: url('http://www.affinityforliving.com/_fonts/futura.eot'); /* IE9 Compat Modes */
to
src: url('http://www.affinityforliving.com/_fonts/futura_medium-webfont.eot'); /* IE9 Compat Modes */
etc
Also one thing to look out for if it still doesn't work - sometimes you have to add extra mime types to your web server. http://en.wikipedia.org/wi ki/Interne t_media_ty pe
src: url('http://www.affinityforliving.com/_fonts/futura.eot'); /* IE9 Compat Modes */
to
src: url('http://www.affinityforliving.com/_fonts/futura_medium-webfont.eot'); /* IE9 Compat Modes */
etc
Also one thing to look out for if it still doesn't work - sometimes you have to add extra mime types to your web server. http://en.wikipedia.org/wi
ASKER
good change, but still isn;t working. I will look at the mime refeence thanks
You have commas instead of semi-colons delimiting your css on three lines.
Is your website also at www.affinityforliving.com? It has been my experience that web fonts must reside in the same domain.
ASKER
The commas are correct in this case. The fonts are hosted at the the website www.affinityforliving.com
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
http://jagadishwor.com/2011/05/embedding-fonts-in-cascading-style-sheets-css-for-your-web-sites/