Question

I am using two commercial fonts FrenchScriptStd and FuturaStd-Light (I have bought them separately and then using them to create a webpage)

This is my first page using this kind of fonts which are commercial (I have tried googlefonts but they do not have these fonts)…

@font-face {
  font-family: 'FrenchScriptStd';
  font-style: normal;
  font-weight: 400;
  src: local('FrenchScriptStd'), url('css/FrenchScriptStd.ttf') format('ttf');
}

@font-face {
  font-family: 'FuturaStd-Light';
  font-style: normal;
  font-weight: 400;
  src: local('FuturaStd-Light'), url('css/FuturaStd-Light.ttf') format('ttf');
}

#fontface1{font-family : Font1; }
h1{font-family : Font1; }
#fontface2{font-family : Font2; }
#nav a {font-family : Font2;} 

so the french font i want to be displayed when using h1 and futura font when using #nav a

/*  Typography
=============================================================== */
h1 { color:#cc6602; font-size:36px; font-family:FrenchScriptStd, arial, serif; font-weight:normal; padding-bottom:14px; }

#nav a {font-family:FuturaStd-Light, arial, serif; text-decoration:none; color:#a8241b; font-size:20px; text-shadow:0 1px #fff; display: block; }

In my pc it seems to work, but in some computers it is not displaying correctly,
Is there a way to correct this, maybe i am messing something up…

Answer 1

I would look into Paul Irish’s bulletproof @font-face syntax as the reason why you cannot see the font on ‘some computers’ is the fact that these computers may have different browsers installed than the browser you were originally testing on that need different font files, other than TrueType.

A syntax that I use and have a lot of success with is:

@font-face {
    font-family: 'FrenchScriptStd';
    src: url('css/FrenchScriptStd.eot');
    src: url('css/FrenchScriptStd.eot?#iefix') format('embedded-opentype'),
         url('css/FrenchScriptStd.woff') format('woff'),
         url('css/FrenchScriptStd.ttf') format('truetype'),
         url('css/FrenchScriptStd.svg#FrenchScriptStd') format('svg');
    font-weight: normal;
    font-style: normal;
}

I believe that this is the @font-face style FontSquirrel uses.

Note that in your example you have not converted the font to various web formats. Here are some services that you can use online to get all of the files converted:

• FontSquirell
• Free Font Converter
• OTF to WOFF
• Font Kit Generator

You should then host these font files locally as you may run into issues with MIME types and headers and the FireFox browser not downloading the font files if the files are hosted externally and not on the same domain for which they are being used.

Also, your milage will vary in mobile browsers and older versions of IE. 🙂