Benutzerdefinierte Schriftart mit @fontface zu style.css hinzufügen

Ich habe eine benutzerdefinierte Schriftart, die ich auf einer Webseite verwenden möchte. Insbesondere GT-Walsheim-Pro-Medium-Oblique.woff aus:
https://andrewsonline.co.uk/content/fonts/Benutzerdefinierte Schriftart mit @fontface zu style.css hinzufügen

Die style.css mit denen ich arbeite, ist dies:
https://github.com/syunghong/veil/blob/master/css/style.css

Wie ich diese Schriftdatei kann incorperate mit @fontface in meine style.css Datei?
Ich habe GT-Walsheim-Pro-Medium-Oblique.woff in einem Ordner namens Schriftarten.

Quelle

2017-08-17 guyintightpants

Mögliche Duplikate von [Wie fügen Sie einige nicht standardmäßige Schriftarten zu einer Website hinzu?] (Https://stackoverflow.com/questions/107936/how-to-add-some-non-standard-font-to-a -website) – Steve

Richtig, ich bin mir nicht sicher, wo ich @fontface in das einfügen soll, was ich bereits habe ... wohin geht es - genau? – guyintightpants

Normalerweise am Anfang der CSS-Datei. – Steve

hier

@font-face { 
    font-family: 'RobotoBold'; /*this is what you put on your font family*/ 
    src: url('../fonts/Roboto-Bold.ttf'); /*Link to the font*/ 
}

zu verwenden, um es

p { 
    font-family: RobotoBold; 
    font-size: 14; 
}

Quelle

2017-08-17 03:53:10 JkAlombro

Danke, ich bin nur nicht sicher, wo @Fontface innerhalb was ich bereits habe ... wo geht es - genau? In: https://github.com/syunghong/veil/blob/master/css/style.css – guyintightpants

bearbeitet mit Beispiel :) Edit :. Ich habe es vermasselt, es ist RobotoBold, nicht RobotoMedium .. Habe es sowieso schon bearbeitet. – JkAlombro

Hey danke. Ich bin nur nicht sicher, wie Sie dies mit dem, was ich bereits verwende, das ist https: // github.com/syunghong/veil/blob/master/css/style.css – guyintightpants

Wenn Sie die Rechte besitzen die WebFont zu verwenden, die ursprüngliche ttf oder otf Schriftart nehmen und einen vollständigen Satz here at FontSquirrel machen. Verschiedene Browser bevorzugen unterschiedliche Schriftarten, die älteren Browser sind am wählerischsten.

Dann fügen Sie die Schriftart an den Anfang Ihres Stylesheet, so dass es zuerst oder sogar vor dem Stylesheet inline geladen wird, wenn Sie FOUT, "Flash of Unstyled Text" sehen. More info here aber im Grunde wollen Sie die Schriftart geladen und bereit, bevor Ihr HTML beginnt zu laden.

laden Sie dann Ihre Schrift wie folgt aus:

@font-face { 
     font-family: 'GT Walsheim Pro Medium Oblique'; 
     src: url('GT-Walsheim-Pro-Medium-Oblique.eot'); 
     src: url('GT-Walsheim-Pro-Medium-Oblique.eot?#iefix&v=4.6.3') format('embedded-opentype'), 
     url('GT-Walsheim-Pro-Medium-Oblique.woff2') format('woff2'), 
     url('GT-Walsheim-Pro-Medium-Oblique.woff') format('woff'), 
     url('GT-Walsheim-Pro-Medium-Oblique.ttf') format('truetype'), 
     url('GT-Walsheim-Pro-Medium-Oblique.svg') format('svg'); 
     font-weight: normal; 
     font-style: normal; 
    }

Font Eichhörnchen wird der obige Code für Sie wenn Sie auf der Schriftart-Paket dort machen.

Rufen Sie die Schriftart in css wie diese, ich bin Ihre H Titel als Beispiel verwenden, stellen Sie sicher, dass ein Rückfall für die Schriftart, um immer über den Fall Fehler es oder aus irgendeinem Grund nicht geladen werden:

h1, h2, h3, h4, h5, h6 { 
    font-family: 'GT Walsheim Pro Medium Oblique', arial, sans-serif; 
}

Quelle

2017-08-17 03:55:25

Danke! Und das hier an die Spitze der CSS-Datei setzen: https://github.com/syunghong/veil/blob/master/css/style.css? – guyintightpants

Ja, aber es sieht nicht so aus, als ob es dort rendert, sondern auf einem Webserver oder einer GitHub-Webseite dargestellt wird. –

Ich meine, wo setze ich @fontace buchstäblich in dieses style.css? – guyintightpants

Benutzerdefinierte Schriftart mit @fontface zu style.css hinzufügen

Antwort

Verwandte Themen