We help IT Professionals succeed at work.

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" />
Comment
Watch Question

Author

Commented:
Problem is I think this is what I already have..but no go
Jagadishwor DulalSenior Web Developer

Commented:
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 */

Open in new window

Is the font inside _images folder

Author

Commented:
No! Good Point

Commented:
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/wiki/Internet_media_type

Author

Commented:
good change, but still isn;t working.  I will look at the mime refeence thanks

Commented:
You have commas instead of semi-colons delimiting your css on three lines.
Kim WalkerWeb Programmer/Technician

Commented:
Is your website also at www.affinityforliving.com? It has been my experience that web fonts must reside in the same domain.

Author

Commented:
The commas are correct in this case.  The fonts are hosted at the  the website www.affinityforliving.com
Commented:
You have a line of code that is calling a stylesheet from the fast fonts website that is resulting in a 404 error:
 <link href="http://fast.fonts.com/cssapi/dc6423f1-52df-4001-bf3a-1bddc4c21c6c.css" rel="stylesheet" type="text/css" />

Open in new window

It seems to be because of the period between fast and font. Loose that and see what happens.