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

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

Verwenden Sie die @importMethode:

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

Offensichtlich ist "Open Sans" ( Open+Sans) die importierte Schriftart. Ersetzen Sie es also durch Ihr. Wenn der Name der Schriftart mehrere Wörter enthält, codieren Sie ihn per URL, indem Sie +wie ich zwischen jedem Wort ein Zeichen einfügen.

Stellen Sie sicher, dass Sie das @importvor allen Regeln ganz oben in Ihrem CSS platzieren.

Google Fonts kann die @importDirektive 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 Familie ausgewählt" angezeigt. Klicken Sie darauf und es wird erweitert. Verwenden Sie die Registerkarte "Anpassen", um Optionen auszuwählen. Wechseln Sie dann zurück zu "Einbetten" und klicken Sie unter "Schriftart einbetten" auf "@import". Kopieren Sie das CSS zwischen den <style>Tags in Ihr Stylesheet.

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

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

Laden Sie die Schriftart ttf / andere Formatdateien herunter und fügen Sie dann einfach dieses CSS-Codebeispiel hinzu:

@font-face { font-family: roboto-regular; 
			 src: url('../font/Roboto-Regular.ttf'); } 
h2{
	font-family: roboto-regular;
}

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 Schriftnamen.

Ihre CSS-Datei sollte folgendermaßen aussehen:

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

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

1. Gehen Sie einfach zu https://fonts.google.com/
2. Fügen Sie die Schriftart hinzu, indem Sie auf + klicken
3. Gehen Sie zu ausgewählter Schriftart> Einbetten> @IMPORT> URL kopieren und fügen Sie sie in Ihre CSS-Datei über dem Body-Tag ein.
4. Es ist fertig.

Verwenden Sie das Tag @import

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

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

Vorteil:

• Mit dieser Option können Sie diese Google-Schriftarten selbst hosten, um bessere Antwortzeiten zu erzielen

• Wählen Sie Ihre Schriftart (en)

• Wähle deinen Zeichensatz
• Wählen Sie Ihre Schriftstile / Gewichtung
• Wählen Sie Ihren Zielbrowser
• und Sie erhalten die CSS-Snippets (zu Ihrem CSS-Stylesheet hinzufügen) sowie eine Zip-Datei der Schriftdateien, die in Ihr Projekt aufgenommen werden sollen

ZB 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;
}

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 einfügen. Dies wäre wahrscheinlich langsamer - besser, um es in Ihr CSS aufzunehmen.

<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 Schriftnamen 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.

Beispielsweise

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

Jus gehen Sie durch den Link

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

Verwenden Sie zum Importieren in ein Stylesheet

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

Wir können das leicht in CSS3 tun. 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