Displaying uncommon fonts on computers that don't have them for your site

I have a very uncommon font that I would like to use for a little bit of text on a site, and my code works on my computer, but not others.

I uploaded the font files to my site and added this CSS:

  @font-face {
    font-family: 'ParisJeTAimeRegular';
    src: url(fonts/'parisjetaime-webfont.eot');
    src: url(fonts/'parisjetaime-webfont.eot?#iefix') format('eot'),
         url(fonts/'parisjetaime-webfont.woff') format('woff'开发者_开发百科),
         url(fonts/'parisjetaime-webfont.ttf') format('truetype'),
         url(fonts/'parisjetaime-webfont.svg#webfontysiEwOWy') format('svg');
    font-weight: normal;
    font-style: normal
  }

This might not be the proper way to do this, or there might not be an easy way...but I wanted to check and see if it was worth trying to render the font I have as text, or just go with images of the text and not worry about the hassle of the font.

Move fonts/ inside the quotes. Currently, your CSS font declarations are ignored, because they're invalid. A valid external pointer has either of the following formats:

• url(source)
• url("source")
• url('source')
• url(dir/'source')

Also, if your font is only used for a few cases, consider using images. Lots of browsers ignore custom fonts.

Change this:

fonts/'parisjetaime-webfont.eot'

To this:

'fonts/parisjetaime-webfont.eot'

And that should get you working.

It looks like you've got the "bulletproof syntax" going there which is a great start!

Aside from the changes mentioned by Yaypaul and Rob W, you might want to consider using Modernizr to detect browsers/devices that don't support @FontFace or CSS3 and create a fallback for those browsers in the form of an image or a standard font.

Modernizer marks these browsers/devices with the .no-fontface class.

I normally use fontsquirrel.com to find cool fonts to use. On fontsquirrel.com uou can click on a font and ask the page to generate proper css code for implementing the font on tour site, just as you are trying to do.

My suggestion is that you pick a random font from fontsquirrel, generate the proper code and reuse that piece of css with the jetaime font to see if that'll do the job for you. If that works, you've probably made a tiny mistake somewhere.