Webfonts Tutorial

Implementing webfonts on your site is quite straightforward.
You have received a Licence key which is linked with the domains that you defined when creating the webfonts. 

fonts-xxxxxx-xxxxxx

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

   <link
      rel="stylesheet"
      href="https://fonts.tptq-arabic.com/WF-xxxxxx-xxxxxx" 
      type="text/css" />

You can now define which parts of the text will use the custom fonts. Use 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://font.tptq-arabic.com/WF-xxxxxx-xxxxxx" 
            type="text/css" />    
      <style type="text/css">
         p { font-family:"Fedra Sans Book"; }
      </style>
   </head>
   <body>
      <p>
         Fine Typography on the Web
      </p>
   </body>
</html>

Don’t forget to click your browser’s refresh button.
Voilà, you are ready to start using Typotheque webfonts.

Using font stacks:

The font-family property can hold several font names as a ‘fallback’ system. If the browser does not support webfont embedding, it tries the next font. Start the list 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 double quotation marks, for example: 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:

You can find further information on using CSS font-family Property at w3schools.com.

Updating a list of defined domains:

If you need to update the list of web domains that use the webfonts, you can log in to your TPTQ Arabic account. Go to My Webfonts, and than choose Edit. There you can add or remove domains.

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 workaround we offer a JavaScript solution that hides content until browsers are finishing loading fonts.

Turning off forced Italic or Bold

Some HTML elements have predefined default font styles. 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 elements in order to render the text correctly. Set this to every such element: 

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

Tags

@font-face bandwidth embedding End User hosting licensing webfonts