CSS > Web Fonts - Font-face
Autor: dr.allwissend
Web Fonts verwenden mit @Font-Face, und der Webseite einen besonderen Look verleihen.
Bevor man eine individuelle Schriftart für seine Homepage verwenden kann, muss man eine passende finden. Denn nicht alle Schriftarten erlauben in den Lizenzbedingungen die Verwendung als Web Font.
Es gibt im Internet einige Webseiten die sich mit @Font-Face Ready Fonts beschäftigen, also Schriftarten im .ttf oder .otf Format, die man direkt als Web Font einsetzen kann. Man sollte sich trotzdem noch einmal die jeweiligen Lizenzbedingungen durchlesen, um nicht auf die Nase zu fallen.
Die Browser
unterstützen als @Font-Face Format gemeinsam TrueType/OpenType TT (.ttf) und OpenType PS (.otf) Dateien.
Das schwierigste ist mit dem finden der passenden Schriftartart.
In diesem Beispiel wird die Schriftdatei vom Server geladen Beispiel1:
Wenn man eine weit verbreitete Schriftart verwendet, kann man die Schriftdatei auch vom lokalen System laden:
Hat man seine Schriftarten definiert, kann man diese dann in anderen CSS Klassen als Schriftart abrufen.
Man kann auf die Schriftarten dann auch Textschatten anwenden mit text-shadow. Dazu aber mehr in einem weiteren Tutorial.
Viel Spaß beim ausprobieren!
Keine Bewertung.
Dieses Tutorial wurde geschrieben von dr.allwissend - Homepage
Tags: webfonts fontface css
Schritt 1 - Freie Fonts verwenden
Bevor man eine individuelle Schriftart für seine Homepage verwenden kann, muss man eine passende finden. Denn nicht alle Schriftarten erlauben in den Lizenzbedingungen die Verwendung als Web Font.
Es gibt im Internet einige Webseiten die sich mit @Font-Face Ready Fonts beschäftigen, also Schriftarten im .ttf oder .otf Format, die man direkt als Web Font einsetzen kann. Man sollte sich trotzdem noch einmal die jeweiligen Lizenzbedingungen durchlesen, um nicht auf die Nase zu fallen.
Schritt 2 - Browser Unterstützung
Die Browser
Webkit/Safari (ab 3.1)
Opera (ab Opera 10)
Mozilla/Firefox (ab Firefox 3.5)
Google Chrome (ab Chrome 4)
Internet Explorer (ab IE4 nur .eot Format - spezielle Konvertierung des Fonts nötig!) (IE6, IE7, IE8 unterstützen .ttf Fonts)
unterstützen als @Font-Face Format gemeinsam TrueType/OpenType TT (.ttf) und OpenType PS (.otf) Dateien.
Schritt 3 - Fonts in CSS einbinden
Das schwierigste ist mit dem finden der passenden Schriftartart.
In diesem Beispiel wird die Schriftdatei vom Server geladen Beispiel1:
PHP-Code
/* einbindung der schriftart */
@font-face {
font-family: Gavin;
src: url(‘gavin.ttf’);
}
/* verwendung der schrift in einer class */
.meine_class {
font-family: Gavin;
font-size: 2em;
}
Wenn man eine weit verbreitete Schriftart verwendet, kann man die Schriftdatei auch vom lokalen System laden:
PHP-Code
@font-face {
font-family: 'WME Webmaster Elite';
src:
local('WebmasterElite'),
local('Webmaster Elite'),
local('WME Webmaster Elite'), /* alternativen wie der font heißen könnte*/
url('pfad/webmasterelite.ttf') format('truetype'); /* alternative wenn der font nicht lokal gefunden wird */
}
Hat man seine Schriftarten definiert, kann man diese dann in anderen CSS Klassen als Schriftart abrufen.
Man kann auf die Schriftarten dann auch Textschatten anwenden mit text-shadow. Dazu aber mehr in einem weiteren Tutorial.
Viel Spaß beim ausprobieren!
Keine Bewertung.
Dieses Tutorial wurde geschrieben von dr.allwissend - Homepage
Tags: webfonts fontface css
Kommentare
Kommentare schreiben
