Hilfe bei HTML - Schriftart ändern

VanessaSchreibt

Hallo ihr lieben Bloghexen,

ich möchte gerne komplett eine neue Schriftart auf meinem Blog (blogger.com) anwenden, die nicht von Blogger kommt (die man anwenden kann), also habe ich im Internet gesucht und gefunden, dass man bei fonts.google.com Schriftarten benutzen kann und unter dem Design (Anpassen) den HTML Code eingeben kann - ich habe nun den HTML-Code schon kopiert von meiner ausgesuchten Schriftart und jetzt steht, man soll den Code im >head< Bereich einfügen und jetzt bin ich planlos, weil ich es nicht finde.

Bitte helft mir!

Lieben Gruß

Vanessa

Lorenzo

Anleitung zum Hinzufügen einer Google Fonts-Schriftart in Blogger

Schritt-für-Schritt-Anleitung

Einloggen in Blogger: Melde dich in deinem Blogger-Konto an.
Design bearbeiten:
- Klicke links auf Design
- Wähle dann Bearbeiten HTML
HTML-Bereich finden:
- Suche nach dem <head> Tag im HTML-Code
- Der Head-Bereich befindet sich normalerweise ganz oben in der Vorlage, direkt nach dem <html> Tag
Google Fonts Code einfügen:
- Füge den kopierten Google Fonts HTML-Code direkt nach dem öffnenden <head> Tag ein
- Wichtig: Der Code sollte so aussehen:
  Code
```
html<link href="https://fonts.googleapis.com/css?family=Deine+Schriftart" rel="stylesheet"> 
```
CSS-Anpassung:
- Füge im <style> Bereich die CSS-Regel hinzu, um die Schriftart zu aktivieren:
  Code
```
cssbody {     font-family: 'Deine Schriftart', sans-serif; } 
```

Zusätzliche Tipps

Speichern nicht vergessen: Klicke nach den Änderungen auf Speichern
Vorschau: Überprüfe, ob die Schriftart korrekt angezeigt wird

Hinweis: Falls du Schwierigkeiten hast, kannst du auch den gesamten Google Fonts-Einbindungscode im Blogger-Design-Bereich unter Anpassen > Erweitert > Benutzerdefinierter HTML-Code einfügen.

Andre

Falls noch nicht vorhanden, sollte die Datenschutzerklärung entsprechend ergänzt und in ein DSGVO‑konformes Consent‑System eingebunden werden.

Lorenzo

Zitat von Andre

Falls noch nicht vorhanden, sollte die Datenschutzerklärung entsprechend ergänzt und in ein DSGVO‑konformes Consent‑System eingebunden werden.

Ja, das stimmt.

Anne

Hallo Vanessa,

grundsätzlich funktioniert das so, wie Lorenzo erklärt hat.
Allerdings solltest du die Schriftarten nicht direkt von Google einbinden (also über fonts.google.com), weil ansonsten bei jedem Seitenaufruf die IP-Adresse deiner Leser an Google gesendet wird. Das ist aufgrund der Datenschutzgrundverordnung nicht erlaubt ohne ausdrückliche Zustimmung der Leser.

Auf der sicheren Seite bist du, wenn du die Schriftart bei Google Fonts herunterlädst (das ist meistens eine .woff / .woff2-Datei) und anschließend als Datei in deinen Blog hochlädst. Das sollte auch bei Blogspot gehen, wenn ich mich nicht irre.

Kopier dir die Adresse deiner Schriftdatei und ruf sie über @font-face im CSS auf. Ins HTML bzw. in den head-Bereich der Seite musst du dann gar nicht eingreifen.

CSS

@font-face {
  font-family: 'Montserrat';
  src: url('https://deineadresse/montserrat.woff2') format('woff2');
  font-display: swap;
}

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

Ich hoffe, das hilft dir weiter!

Lorenzo

Ja, Anne, damit hast du natürlich recht. Ich habe die KI schnell befragen, ohne sie auf dem Umstand hinzuweisen.

VanessaSchreibt

Danke für die Antworten.

Das was Lorenzo kommentiert hat, war das, was mir bei Google angezeigt wurde und bis Schritt 4 auch verfolgt habe.

Ich kenne mich leider mit HTML und CSS so gar nicht aus und dann etwas Angst habe, etwas falsch zu machen und dann ist mein Blog weg oder so und das möchte ich nicht. Trotzdem danke.

Lorenzo

Sehr gerne, VanessaSchreibt

Kuechenlatein

Ich habe bei Wordpress mit Chatgpt gute css Erfahrungen gemacht. Ich bin ganz erstaunt, welch gute Ergebnisse Ida 'rauskamen

Anne

Zitat von VanessaSchreibt

Ich kenne mich leider mit HTML und CSS so gar nicht aus und dann etwas Angst habe, etwas falsch zu machen und dann ist mein Blog weg oder so und das möchte ich nicht. Trotzdem danke.

Keine Sorge, so schnell verschwindet da nichts.

Hat es denn geklappt?

Sayuchan

Zitat von Anne
Hallo Vanessa,
grundsätzlich funktioniert das so, wie Lorenzo erklärt hat.
Allerdings solltest du die Schriftarten nicht direkt von Google einbinden (also über fonts.google.com), weil ansonsten bei jedem Seitenaufruf die IP-Adresse deiner Leser an Google gesendet wird. Das ist aufgrund der Datenschutzgrundverordnung nicht erlaubt ohne ausdrückliche Zustimmung der Leser.
Auf der sicheren Seite bist du, wenn du die Schriftart bei Google Fonts herunterlädst (das ist meistens eine .woff / .woff2-Datei) und anschließend als Datei in deinen Blog hochlädst. Das sollte auch bei Blogspot gehen, wenn ich mich nicht irre.
Kopier dir die Adresse deiner Schriftdatei und ruf sie über @font-face im CSS auf. Ins HTML bzw. in den head-Bereich der Seite musst du dann gar nicht eingreifen.
CSS
@font-face {
  font-family: 'Montserrat';
  src: url('https://deineadresse/montserrat.woff2') format('woff2');
  font-display: swap;
}

body {
  font-family: 'Montserrat', sans-serif;
}
Ich hoffe, das hilft dir weiter!
Alles anzeigen

Sag mal, kann ich die einfach auf mein Webspace hochladen und dann so anwählen? also ganz ohne Plugin? dann könnte ich das nämlich doch rausschmeißen XD hab eins wo ich die halt hochlade über medien und dann so anwähle mit " font-family: 'Name';
" ohne das scr drunter

VanessaSchreibt

Zitat von Anne

Zitat von VanessaSchreibt

Ich kenne mich leider mit HTML und CSS so gar nicht aus und dann etwas Angst habe, etwas falsch zu machen und dann ist mein Blog weg oder so und das möchte ich nicht. Trotzdem danke.

Keine Sorge, so schnell verschwindet da nichts.
Hat es denn geklappt?

Ich habe es gar nicht ausprobiert, dabei möchte ich es gerne. Würde da aber tatsöchlich Hilfe gebrauchen.

VanessaSchreibt

Eine halbe Stunde später und ich habe mit Hilfe von Gemini versucht, den CSS-Link einzufügen. Habe ich getan, aber es hat sich nichts geändert.

Lorenzo

Was hast du gemacht?

VanessaSchreibt

Nach Gemini sollte ich die Zip Datei meiner ausgewählten Schriftart runterladen - über google-webfonts-helper, die sollte ich dann entpacken und in meinem Dashboard auf meinem Blog als Datei hochladen, das geht aber bei Blogger.com nicht. Also habe ich dann den CSS link meiner Datei kopiert und den habe ich dann unter Design in der Anpassung bei Erweitert im CSS hinzugefügt und alles gespeichert.

Lorenzo

Aha, okay.

✅ Schriftart in Blogger DSGVO-konform selbst einbinden (ohne Google Fonts)

🔹 Schritt 1: Schrift herunterladen

Öffnen: https://gwfh.mranftl.com/fonts
Wunsch-Schrift auswählen
Nur das Format .woff2 herunterladen (reicht völlig aus)

🔹 Schritt 2: Schriftdatei bei Blogger hochladen

In Blogger einen Beitrag öffnen
Bild/Datei hochladen
Nach dem Upload Rechtsklick → „Adresse des Links kopieren“

➡️ Diese URL wird gleich benötigt.

🔹 Schritt 3: Schrift per CSS einbinden

In Blogger zu Design → Anpassen → Erweitert → Zusätzliches CSS gehen
und folgenden Code einfügen:

Code

@font-face {
  font-family: 'MeineSchrift';
  src: url('HIER-DIE-SCHRIFT-URL-EINFÜGEN.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'MeineSchrift', sans-serif;
}

Alles anzeigen

📌 Wichtig:

MeineSchrift ist ein frei wählbarer Name
Die URL muss exakt die hochgeladene .woff2-Datei sein

🔹 Optional: Nur bestimmte Bereiche ändern

Nur Überschriften:

Code

h1, h2, h3 {
  font-family: 'MeineSchrift', sans-serif;
}

Nur Beitragsinhalt:

Code

.post-body {
  font-family: 'MeineSchrift', sans-serif;
}

✅ Vorteile dieser Methode

✔️ Keine Verbindung zu Google
✔️ DSGVO-freundlich
✔️ Schneller Seitenaufbau
✔️ Kein Eingriff in den HTML-Code nötig

Das sagt ChatGPT mir für dich.

VanessaSchreibt

Ich lass es einfach sein. Trotzdem Danke.

Lorenzo

Bitte sehr, VanessaSchreibt. Vielleicht kann dir Anne ja direkt helfen, so wie sie es bei mir gemacht hat.

Andre

Zitat von VanessaSchreibt

Ich lass es einfach sein. Trotzdem Danke.

Ich kenne blogger.com nicht. Hast du denn überhaupt die Möglichkeit, auf die Verzeichnisse zuzugreifen, um Dateien hochzuladen und Zugriff auf das CSS?

Sofern das möglich ist, lässt sich das problemlos und schnell umsetzen.

Im schlimmsten Fall bleibt dir nur die bereits erwähnte externe Einbindung, die jedoch einen Consent voraussetzt. Davon würde ich persönlich Abstand nehmen.

Lorenzo

Zitat von Andre

Ich kenne blogger.com nicht. Hast du denn überhaupt die Möglichkeit, auf die Verzeichnisse zuzugreifen, um Dateien hochzuladen und Zugriff auf das CSS?

Anscheinend ja. Auch wenn ich von Blogger.com wegen Google unabhängig davon weggehen würde.

Hilfe bei HTML - Schriftart ändern

Anleitung zum Hinzufügen einer Google Fonts-Schriftart in Blogger

Schritt-für-Schritt-Anleitung

Zusätzliche Tipps

✅ Schriftart in Blogger DSGVO-konform selbst einbinden (ohne Google Fonts)

🔹 Schritt 1: Schrift herunterladen

🔹 Schritt 2: Schriftdatei bei Blogger hochladen

🔹 Schritt 3: Schrift per CSS einbinden

🔹 Optional: Nur bestimmte Bereiche ändern

✅ Vorteile dieser Methode

Mach mit!

Tags