@Font Face Generator

@Font Face Generator

Webfonts mit base64 einbetten

Mit dem @Font Face Generator können Schrifte in die entsprechenden Standardschriftformate fürs Web umgewandelt werden

@Font Face Generator

Einbindung von Schriften

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

Einbettung von Schriften mit base64

<style type="text/css">
@font-face {
    font-family: 'fontname';
    src: url('fontname.eot');
}
@font-face {
    font-family: 'fontname';
    src: url(data:application/font-woff;charset=utf-8;base64,…) format('woff'),
        url('fontname.ttf') format('truetype'),
        url('fontname.svg#fontname') format('svg');
    font-weight: normal;
    font-style: normal;
}
</style>

Flackern beim Laden von Schriften vermeiden

Beim Laden der Seite kann es vorkommen, dass die Schrift etwas springt bzw. flackert. Dies entsteht wenn der Font noch nicht vollständig geladen wurde und erst die Systemschrift angezeigt wird und später durch den Web Font ersetzt wird. Dies kann durch die Einbettung mit base64 verhindert werden. Aus Performance- und Supportgründen reicht die Einbettung der .woff-Datei. Das WOFF-Format ist seit Ende 2012 offizieller Internetstandard für Web Fonts.

Bei vielen Browsern werden Schriften nicht angezeigt wenn @font-face { } z.B. in @media all { } steht.

Cross-Origin Resource Sharing für Webfonts

Um Cross-Origin Resource Sharing Probleme zu vermeiden, sollten die Schriften nicht von unterschiedlichen Subdomains oder anderen Servern ausgeliefert werden. Bei großen Seiten wird aus Performance-Gründen jedoch benötigt. Für diese Anpassung muss die .htaccess-Datei angepasst werden:

<IfModule mod_headers.c>
    <FilesMatch "\.(ttf|ttc|otf|eot|woff|svg)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

Verschiedene Schriftschnitte einbinden

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

@font-face {
    font-family: 'fontname';
    src: url('fontnamebold.eot');
    src: url('fontnamebold.eot?#iefix') format('embedded-opentype'),
        url('fontnamebold.woff') format('woff'),
        url('fontnamebold.ttf') format('truetype'),
        url('fontnamebold.svg#fontnamebold') format('svg');
    font-weight: bold;
    font-style: normal;
}
</style>
Impressum