Font einbinden
FrankMe
- css
- html
Hallo,
ich habe mir einen ttf-Font heruntergeladen und möchte diesen auf meine Webseite einbinden. Sowohl die font-test.php als auch der Font LobsterTwo-Italic.ttf liegen auf der selben Ebene / im selben Ordner. Leider wird der Font nicht genutzt. Mein html + css sieht so aus:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Font Test</title>
<style>
@font-face { font-family: 'LobsterTwo-Italic';
src: url('LobsterTwo-Italic.ttf') format('truetype'); }
</style>
</head>
<body style="font-family: LobsterTwo, Verdana, sans-serif">
<h1>Test</h1>
</body>
</html>
Warum wird die Schrift nicht im richtigen Font angezeigt?
Freue mich über Unterstützung, Grüße, von Frank
Ich habe das Problem bzw. die Lösung gefunden. Mal habe ich _LobsterTwo _und mal LobsterTwo-Italic geschrieben.
Grüße, Frank
[Vollzitat entfernt]
@@FrankMe
ich habe mir einen ttf-Font heruntergeladen und möchte diesen auf meine Webseite einbinden.
Gar nicht gut.
“An asset that isn’t optimized for the web does’t belong on the web”
—Jon Yablonski, Designers Guide to Web Performance Optimization (lesenswerter Artikel!)
TTF ist nicht fürs Web optimiert. Verwende WOFF2 bzw. WOFF. (Browsersupport) Dann sind die Schriftdateien nur etwa halb so groß.
Mein html + css sieht so aus:
<head>
<!DOCTYPE html>
steht davor? Das <html>
-Starttag auch, in welchem du auch die Sprache des Seiteninhalts angeben solltest? (Warum?)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
reicht.
Was fehlt ist die Angabe <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<body style="font-family: LobsterTwo, Verdana, sans-serif">
Das sollte nicht inline in einem style
-Attribut stehen, sondern im Stylesheet (extern bzw. style
-Element).
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|