FAQ .otf, .ttf, .eot and .woff fonts

A way to change fonts into web fonts... See http://www.koffeinfrei.org/2012/08/06/how-to-generate-a-webfont-kit-with-open-source-tools

In Linux, install woff-tools, for Windows and OS-X go to http://people.mozilla.org/~jkew/woff/

Why

Nowadays it is possible to use specific fonts for web pages. Therefore you need to embed a font on your site. The place to link the font on your webserver is in your css stylesheet. A css file ./css/proj.css contains:

h1 {
        color:#2A5475;
        margin-bottom: -5px;
        font-family: Gabriola;
        font-size: 220%;
        font-weight: bold;
        margin-top: -5px;
}

So one needs a web font in the css file:

@font-face {
  font-family: gabriola;
  src: url('../fonts/Gabriola.woff');
   font-weight: normal;
  font-style: normal;
}

Thus Gabriola.ttf should be converted to Gabriola.woff. Woff files are the future, see http://en.wikipedia.org/wiki/WOFF.

TTF, OTF --> WOFF

elmer@fud:~/Desktop$ sfnt2woff Gabriola.ttf

Output is a file Gabriola.woff (30% of the original size) and you can upload that one to the font directory of your site, relative from css one directory up (..) and then to fonts (../fonts).

That is it.