Link to home
Start Free TrialLog in
Avatar of dlearman1
dlearman1Flag for United States of America

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" />
Avatar of Jagadishwor Dulal
Jagadishwor Dulal
Flag of Nepal image

Avatar of dlearman1

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

Open in new window

Is the font inside _images folder
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/wiki/Internet_media_type
good change, but still isn;t working.  I will look at the mime refeence thanks
Avatar of s8web
s8web

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.
The commas are correct in this case.  The fonts are hosted at the  the website www.affinityforliving.com
ASKER CERTIFIED SOLUTION
Avatar of Seonyx
Seonyx
Flag of Spain image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial