Wie bekomme ich eine GoogleFonts Schriftart in den Quelltext?

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet
TechPech1984
Nutzer, der sehr aktiv auf gutefrage ist
im Thema Computer
10.01.2022, 19:15

ohne code beispiel können wir doch nix sagen , wenn du alles so gemacht hast wie beschrieben dann funktioniert es auch .

und code bitte mit </> formatieren . danke
Fragentyp930 
Beitragsersteller
 10.01.2022, 19:16

OK danke

TechPech1984  10.01.2022, 19:17
@Fragentyp930

du musst die aber über ein server (gern auch localhost)aufrufen ... nicht lokal als datei über ein browser .

Zahhak  10.01.2022, 19:50
@TechPech1984

Wie kommst du darauf, dass das als lokale Datei (file://) nicht funktionieren würde?

<!doctype html>
<html>
    <head>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=The+Nautigal&display=swap" rel="stylesheet">
        <meta charset="utf-8">
        <style>
            #googlefont-test{
                font-family: 'The Nautigal', cursive;
            }
        </style>
    </head>
    <body>
        <span id="googlefont-test">lorem ipsum dolor sit amet.</span>
    </body>
<html>

funktioniert ohne Probleme...

TechPech1984  11.01.2022, 20:39
@Zahhak

war nur meine erste vermutung wegen origin . einfach mal das ausschluss verfahren angenommen . bei scripten gehts ja nicht . . aber gut du das problem schon ausgeschlossen hast .

sinuss
Unternehmen, das auf gutefrage aktiv ist
11.01.2022, 13:29

es gibt zwei Arten wie du eine GoogleFonts einbinden kannst:

Einmal via HTML, dass muss in deinen <head> mit rein:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

oder via <style> in den <head>

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
</style>

oder in eine CSS Datei:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

Aufrufen oder stylen kannst du die Font im css mit folgenden befehlen:

p {
font-family: 'Roboto', sans-serif;
color: red
}
Woher ich das weiß:eigene Erfahrung
Fragentyp930 
Beitragsersteller
 11.01.2022, 20:36

Danke