CSS - Webschriften / Webfonts

Links

http://www.fontsquirrel.com/ Freie Schriften und Schriftengenerator. Hat bereits vorgefertigte font-face Kits mit den benötigten Schrifttypen. Auch eine Demoseite kann ausgegeben werde,.

Schrifttypen

TrueType .ttf, und OpenType .otf für Firefox, Safari, Chrome, und Opera und .eot für den Internet Explorer.

Zusätzlich evtl. SVG für iPhones und WOFF für Firefox ab V 3.6.

Einbinden

Am Besten über CSS mit

@font-face

Beispiel

1. Schrift mit @font-face Einbetten. (Beispiel Free-Font CalligraphyFLFRegular)

@font-face {
    font-family: 'fonts/CalligraphyFLFRegular';
    src: url('fonts/CalligraphyFLF.eot');
    src: local('fonts/CalligraphyFLF Regular'), local('fonts/CalligraphyFLF'), url('fonts/CalligraphyFLF.ttf') format('truetype');
}

2. Jetzt kann die Schrift ganz normal genutzt werden. Nicht vergessen einen websafe Font als Alternative anzugeben.

h1{font-family: 'CalligraphyFLFRegular', Arial, sans-serif;}

Beispiel 2

@font-face {
    font-family: 'AkzidenzGrotConBQ-Light';
    src: url('26BACE_0_0.eot');
    src: url('26BACE_0_0.eot?#iefix') format('embedded-opentype'),
         url('26BACE_0_0.woff') format('woff'),
         url('26BACE_0_0.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'AkzidenzGrotConBQ-Regular';
    src: url('26BACE_1_0.eot');
    src: url('26BACE_1_0.eot?#iefix') format('embedded-opentype'),
         url('26BACE_1_0.woff') format('woff'),
         url('26BACE_1_0.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

Lizenzen

(Quelle: http://www.elmastudio.de/typografie/schriften-mit-font-face-einbetten-so-funktionierts/ (12-2013) Bevor du eine Schrift einbettest, musst du dich informieren, ob das Einbetten mit @font-face für deine Wunsch-Schrift erlaubt ist. Infos dazu findest du in der Schrift-Lizenz. Am einfachsten ist es, du wählst eine Free-Font. Auf Font-Seiten wie Fontsquirrel findest du jede Menge kostenlose Schriften, die bereits mit einem @font-face Kit fürs Einbetten vorbereitet sind.