Google Fonts in CSS in HTML einbinden und verwenden

[leon1912]

Hallo,
ich möchte für meine gehostete Nextcloud eine HTML-Datei mit einem Impressum und eine mit einer Datenschutzerklärung einfügen.

Da ich die standardmäßige Schriftart überhaupt nicht schön finde, möchte ich über Google Fonts einige Schriftarten implementieren und ein wenig damit herumexperimentieren.

Ich möchte die ganzen Imports von Google Fonts ungern im head der HTML-Datei haben, weswegen ich mich dazu entschieden habe, dass in einer CSS-Datei zu machen.

Meine CSS-Datei sieht derzeit folgendermaßen aus:

@import url('https://fonts.googleapis.com/css?family=Roboto&family=Montserrat');

h1{
  font-family: 'Roboto', sans-serif;
}

textfonttest{
  font-family: 'Montserrat', sans-serif;
}

Jetzt möchte ich gerne die verschiedenen Klassen "h1" und "textfonttest" in der eigentlichen HTML-Datei aufrufen.

Den Link zur CSS in der HTML-Datei habe ich folgendermaßen gemacht:

<link rel="stylesheet" type="text/css" href="fonts.css">

Wie genau rufe ich jetzt h1 und textfonttest auf?

Ich habe schon mehrere Dinge probiert, welche alle leider nicht funktioniert haben.

In der Schule haben wir nur Python und leider nur ganz wenig (eigentlich gar kein) HTML und CSS gemacht bzw. gelernt.
Das mag vielleicht auch eine ganz blöde, simple Frage sein, aber leider komme ich nicht zum gewünschten Ergebnis.


Ich freue mich auf die Antworten und wünsche einen schönen Abend/Tag.



Mit freundlichem Gruß
Leon

 

[scatello]

Wenn du google-Fonts nutzen willst, würde ich diese nicht über https einbinden, sondern lokal auf den Server kopieren und dann einbinden. Ansonsten hast du nämlich ein Problem mit der DSGVO

Vor textfonttest fehlt en Punkt in der CSS-Datei: .textfonttest

<h1>Eine Überschrift</h1>
<p class="textfonttest">Ein Absatz</p>

fehlt ein Punkt in der CSS-Datei

 

[leon1912]

[...]
Vor textfonttest fehlt en Punkt in der CSS-Datei: .textfonttest

<h1>Eine Überschrift</h1>
<p class="textfonttest">Ein Absatz</p>

fehlt ein Punkt in der CSS-Datei

Moin @scatello,
vielen Dank für deine Antwort.

Leider hat es auch, nachdem ich den Punkt eingefügt habe, nicht funktioniert, die Klasse "textfonttest" aufzurufen.

Wie stelle ich das genau mit der CSS-Einbindung an, wenn ich die Font lokal speichere?

Viele Grüße

 

[scatello]

Wie stelle ich das genau mit der CSS-Einbindung an, wenn ich die Font lokal speichere?

In dem du Tante google fragst, die liefert nämlich knapp über 80.000 Treffer zu dem Thema. Sollte reichen, oder?

https://www.google.de/search?q=google+font+lokal+einbinden

 

[leon1912]

Hallo @scatello,
ja, ich habe Google gefragt.

Wie sieht jetzt der Aufruf in der HTML finden?

Dazu habe ich nichts gefunden.

Sorry...


Das ist jetzt die neue CSS:

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/montserrat-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/montserrat-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/montserrat-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/montserrat-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/montserrat-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/montserrat-v15-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/montserrat-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/montserrat-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/montserrat-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/montserrat-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/montserrat-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/montserrat-v15-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-700italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/montserrat-v15-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/montserrat-v15-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/montserrat-v15-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/montserrat-v15-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/montserrat-v15-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/montserrat-v15-latin-700italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}

 

[scatello]

Dazu habe ich nichts gefunden.

Echt nicht? Zumal du das ja schon im CSS stehen hattest, siehe #1

Siehe z.B. auch https://www.w3schools.com/cssref/pr_font_font-family.asp