Web Fonts Tutorial

To implement the Web Fonts on your site is quite straightforward.
You have received a License key which is linked with the domains that you have defined when creating the Web fonts.

WF-xxxxxx-xxxxxx

The License key is embedded inside the CSS code, and just need to pasted between the <head></head> tags.

   <link
      rel="stylesheet"
      href="https://wf.typotheque.com/WF-xxxxxx-xxxxxx" 
      type="text/css" />

You can now define which parts of the text will use the custom fonts. You the other generated code to reference the desired font.

p {font-family:"Fedra Sans Book";}

So the complete code will look like this:

<html>
   <head>
      <title>Web Fonts Tutorial</title>
      <link
            rel="stylesheet"
            href="https://wf.typotheque.com/WF-xxxxxx-xxxxxx" 
            type="text/css" />    
      <style type="text/css">
         p { font-family:"Fedra Sans Book"; }
      </style>
   </head>
   <body>
      <p>
         Typotheque Brings Fine Typography to Web
      </p>
   </body>
</html>

Don't forget to click refresh button of your browser.
Voilà, you are ready to start using Typotheque Web fonts.

Using font stacks:

The font-family property can hold several font names as a "fallback" system. If the browser does not support the web font embedding, it tries the next font. Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. If the name of a font family is more than one word, it must be in quotation marks, like font-family: "Times New Roman".

p {font-family:"Fedra Sans Book", "Lucida Sans", sans-serif;}

More than one font family is specified in a comma-separated list:

Further information on using CSS font-family Property at w3schools.com.

Updating a list of defined domains:

If you need to update the list web domains where the web fonts will work, you can log in to your Typotheque account. Go to 'Web Fonts', and than choose 'Edit'. There you can add or remove domains which will use the Web Fonts.

Flash Of Unstyled Content

In some browsers, most notably Firefox, you may see a barely noticeable ‘blink’ before the real font loads in (a.k.a. Flash Of Unstyled Content). This is a result of Firefox’s handling of the @font-face rule.

As a work-around we offer a JavaScript solution that hides content until browsers are finishing loading fonts.

Making sure Internet Explorer loads other content

Internet Explorer doesn’t render anything in the page until the font file is done downloading if there is a script tag above the @font-face declaration. Place the CSS before the script tags. For more information see recommendations by Steve Souders.

Turning off forced Italic or Bold

Some HTML elements have predefined default font style. For example the <h1>element uses bold style, the <i> element uses italic style. When using our webfonts you have to set normal style to these element in order to render the text correctly. Set this to every such an element:

font-style: normal;
font-weight: normal;
font-stretch: normal;
font-variant: normal;

Web Fonts