SVG-Schrift per CSS für Webseite verwenden

Es ist möglich auf Webseiten Schriften zu verwenden, die nicht bei dem Besucher auf dem Rechner installiert sein müssen und doch auf der Webseite angezeigt werden. Hier gibt es die wenigen CSS Codezeilen dazu.

 

Das Verfahren ist eine echte Bereicherung, denn so erhält man zusätzliche Gestaltungsmöglichkeiten im Webbereich, in Form von Schmuckschriften, oder kleinen Symbolen bzw. Grafiken.

Wie man sich seine eigene Schrift erstellt, erkläre ich hier, in zwei Teilen.

 

Als Beispiel habe ich den CSS-Style komplett in die index.html gepackt. Es sind nur wenige Handgriffe, für viel Effekt.

<!DOCTYPE html>
<html>
<head>

<!-- Die CSS Codezeilen im Headbereich, die die Schrift aus einem Fontordner laden -->
<style> 
@font-face {
    font-family: bubblefont;
    src: url(font/bubblefont.ttf);
}

div {
    font-family: bubblefont;
	font-size: 3em;
}
</style>

</head>
<body>

<div>1234567890!kK</div><br>

Externe Schriftart eingebunden.

</body>
</html>

Welche Zeichen ihr im <body>Bereich eintragt, liegt natürlich daran wie ihr die Tastatur mit eurem Font belegt habt.

Das war das ganze Geheimnis. Kinderleicht, bringt aber einiges an Möglichkeiten.

 

Das könnte dich auch interessieren …