it-swarm.com.de

Wie importiere ich Google Web Font in eine CSS-Datei?

Ich arbeite mit einem CMS, auf das ich nur Zugriff habe. Ich kann also nichts in das HEAD des Dokuments aufnehmen. Ich habe mich gefragt, ob es eine Möglichkeit gibt, die Webschrift aus der CSS-Datei zu importieren.

227
David

Verwenden Sie die Methode @import :

_@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
_

Offensichtlich ist "Open Sans" (_Open+Sans_) die Schriftart, die importiert wird. Also ersetze es durch deins. Wenn der Name der Schriftart mehrere Wörter enthält, können Sie ihn per URL kodieren, indem Sie wie ich zwischen jedem Wort ein _+_ -Zeichen einfügen.

Stellen Sie sicher, dass _@import_ ganz oben in Ihrem CSS steht, bevor Sie Regeln festlegen.

Google Fonts kann die _@import_ -Direktive automatisch für Sie generieren. Wenn Sie eine Schriftart ausgewählt haben, klicken Sie auf das Symbol _(+)_ daneben. In der unteren linken Ecke wird ein Container mit dem Titel "1 Family Selected" angezeigt. Klicken Sie darauf, und es wird erweitert. Verwenden Sie die Registerkarte "Anpassen", um Optionen auszuwählen, und wechseln Sie dann wieder zu "Einbetten", und klicken Sie unter "Schriftart einbetten" auf "@import". Kopieren Sie das CSS zwischen den _<style>_ Tags in Ihr Stylesheet.

339
ModernDesigner
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />

Verwenden Sie @import lieber nicht. Verwenden Sie einfach das oben gezeigte Link-Element im Kopf Ihres Layouts.

57
Burk

Fügen Sie den folgenden Code in Ihre CSS-Datei ein, um Google Web Fonts zu importieren.

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

Ersetzen Sie den Parameterwert Open + Sans durch Ihren Schriftartnamen.

Ihre CSS-Datei sollte folgendermaßen aussehen:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
   font-family: 'Open Sans',serif;
}
29
Shubham Kumar

Laden Sie die Schriftart ttf/other format files herunter und fügen Sie einfach das folgende CSS-Codebeispiel hinzu:

@font-face { font-family: roboto-regular; 
                         src: url('../font/Roboto-Regular.ttf'); } 
h2{
        font-family: roboto-regular;
}
28
Fidel ramadhan
  1. Gehen Sie einfach zu https://fonts.google.com/
  2. Fügen Sie die Schriftart hinzu, indem Sie auf + klicken.
  3. Gehen Sie zu der ausgewählten Schriftart> Einbetten> @IMPORT> kopieren Sie die URL und fügen Sie sie in Ihre CSS-Datei über dem Body-Tag ein.
  4. Es ist fertig.
12
karunesh

Verwenden Sie das Tag @import

@import url('http://fonts.googleapis.com/css?family=Kavoon');
7
jmz7v

Berücksichtigen Sie zusammen mit den obigen Antworten auch diese Site. https://google-webfonts-helper.herokuapp.com/fonts

Vorteil:

  • ermöglicht es Ihnen, diese Google-Schriftarten für bessere Antwortzeiten selbst zu hosten

  • wähle deine Schriftart (en)

  • wähle deinen Zeichensatz
  • wählen Sie Ihre Schriftstile/Gewichtung
  • wählen Sie Ihren Zielbrowser
  • und Sie erhalten die CSS-Schnipsel (fügen Sie sie Ihrem CSS-Stylesheet hinzu) sowie eine Zip-Datei der Schriftartdateien, die Sie in Ihr Projekt aufnehmen möchten

Zum Beispiel your_theme.css

 @font-face { font-family: 'Open Sans'; font-style: normal;  font-weight: 400;
             src: local('Open Sans Regular'), local('OpenSans-Regular'),
             url('css_fonts/open-sans-v15-latin-regular.woff2') format('woff2'), 
             url('css_fonts/open-sans-v15-latin-regular.woff') format('woff'); 
 }

 body { font-family: 'Open Sans',sans-serif;}
5
MarcoZen

Sie können auch @ font-face verwenden, um auf die URLs zu verlinken. http://www.css3.info/preview/web-fonts-with-font-face/

Unterstützt das CMS iframes? Möglicherweise können Sie auch einen Iframe in den oberen Bereich Ihres Inhalts werfen. Dies wäre wahrscheinlich langsamer - besser, es in Ihr CSS aufzunehmen.

3
Eric Keyte

Ich gehe durch den Link

https://developers.google.com/fonts/docs/getting_started

Zum Importieren in ein Stylesheet verwenden Sie

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
1
subindas pm
<link href="https://fonts.googleapis.com/css?family=(any font of your 
choice)" rel="stylesheet" type="text/css">

Um die Schriftart auszuwählen, besuchen Sie den Link: https://fonts.google.com

Schreiben Sie den Namen der Schrift Ihrer Wahl von der Website, ohne die Klammern.

Zum Beispiel haben Sie dann Lobster als Schriftart Ihrer Wahl gewählt,

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" 
type="text/css">

Dann können Sie dies normalerweise als Schriftfamilie in Ihrer gesamten HTML/CSS-Datei verwenden.

Zum Beispiel

<h2 style="Lobster">Please Like This Answer</h2>
1
RohanVTK

Wir können das leicht in css3 machen. Wir müssen einfach die @ import-Anweisung verwenden. Das folgende Video beschreibt auf einfache Weise, wie das geht. Also mach weiter und pass auf.

https://www.youtube.com/watch?v=wlPr6EF6GAo

0
Gyan