FrankMe: Font einbinden

SELF-Forum

Font einbinden

FrankMe Homepage des Autors
– Informationen zu den Bewertungsregeln

problematische Seite

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Font einbinden

    FrankMe (Versionen)
    – Informationen zu den Bewertungsregeln

    problematische Seite

    Ich habe das Problem bzw. die Lösung gefunden. Mal habe ich _LobsterTwo _und mal LobsterTwo-Italic geschrieben.

    Grüße, Frank

    [Vollzitat entfernt]

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Font einbinden

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    problematische Seite

    @@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 🖖

    --
    “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
    Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln