Eigene Schriftart auf Webseite nutzen

  • Guten Tag

    Ich will meine eigene Webseite erstellen, mit einer Font die es nicht auf Google Fonts gibt, weiss aber nicht wie.

    Ich habe in meiner .css Datei diesen Code:

    Spoiler anzeigen

    @font-face {
    font-family: 'typograph_proextrabold';
    src: url('fonts/typograph_pro_extra_bold-webfont.eot');
    src: url('fonts/typograph_pro_extra_bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/typograph_pro_extra_bold-webfont.woff') format('woff'),
    url('fonts/typograph_pro_extra_bold-webfont.ttf') format('truetype'),
    url('fonts/typograph_pro_extra_bold-webfont.svg#typograph_proextrabold') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    Und in meiner .html Datei diesen Code:

    Spoiler anzeigen

    <!DOCTYPE html>

    <head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Swerve Designs</title>

    <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
    <link rel="stylesheet" href="css/reset.css">

    <link href='fonts/typograph_pro_extra_bold-webfont.ttf' rel='stylesheet' type='text/css'>

    </head>

    <body>

    <center>HALLO WELT</center>

    </body>
    </html>

    Ich weiss nicht was ich falsch mache, die Font wird einfach nicht angezeigt.
    Hoffentlich kann mir jemand weiterhelfen.

    Liebe Grüsse
    Swerve™

  • Du hast es richtig gemacht, jedoch wird der Format .eot nur im Explorer unterstützt.
    Benutz am besten .ttf !

    MfG
    Nesquik


    Also nur so?

    Spoiler anzeigen

    @font-face {
    font-family: 'typograph_proextrabold';
    src: url('/fonts/typograph_pro_extra_bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

    EDIT: Hat funktioniert Danke!

    Liebe Grüsse
    Swerve™

    3 Mal editiert, zuletzt von Swerve™ (30. April 2014 um 14:57)

  • Ja genau, kein Problem!

    MfG
    Nesquik

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!