Google Webfonts selber hosten

google-webfonts-helper

Auf dieser Webseite kann man eine Schrift wie z.B.: Caveat auswählen.

Select charsets:
latin

Select styles:
regular
700

Customize folder prefix:
../fonts/(Standard z.B. für eine CSS-Datei im Unterververzeichnis) oder
./fonts/(für CSS direkt in eine Webseite)

Copy CSS Best support:
Hier empfiehlt sich diesen Inhalt zu kopieren.

Den Inhalt kann man Anfang des CSS-Bereiches der Webseite einfügen
(wie in dieser Webseite) oder
in eine separate CSS-Datei fonts.css im Unterverzeichnis ./css kopieren und
diese CSS-Datei im HEAD-Bereich der Webseite einbinden;
<link href="../css/fonts.css" rel="stylesheet">

In der CSS-Datei müssen dann alle URLs mit einem Punkt ergänzt werden:
src: url('./fonts/caveat-v9-latin-regular.eot');
zu
src: url('../fonts/caveat-v9-latin-regular.eot');
/* caveat-regular - latin */
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 400;
font-display:swap; /* Eine Systemschrift wird verwendet, bis die Schrift geladen ist. */
src: url('./fonts/caveat-v9-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('./fonts/caveat-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./fonts/caveat-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('./fonts/caveat-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
url('./fonts/caveat-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('./fonts/caveat-v9-latin-regular.svg#Caveat') format('svg'); /* Legacy iOS */
}
 
/* caveat-700 - latin */
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 700;
font-display:swap; /* Eine Systemschrift wird verwendet, bis die Schrift geladen ist. */
src: url('./fonts/caveat-v9-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('./fonts/caveat-v9-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./fonts/caveat-v9-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('./fonts/caveat-v9-latin-700.woff') format('woff'), /* Modern Browsers */
url('./fonts/caveat-v9-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('./fonts/caveat-v9-latin-700.svg#Caveat') format('svg'); /* Legacy iOS */
}
Button: Download canveat-v9-latin.zip

Google Webfonts auf den eigenen Server laden

Die ZIP-Datei entpacken und
mit einem FTP-Programm auf den eigenen Server in den Pfad ./fonts laden.

Google Webfonts vom Google-Server laden

Man kann auch die Webfonts vom Google-Server laden.

Wenn der Fontname Leerzeichen enthält,
müssen diese durch ein + ersetzt werden.
Will man mehrere Schriftarten verwenden,
muss man diese mit dem Pipezeichen | trennen.

In den Head-Bereich muss man den einzeiligen Link einfügen:
<link href="https://fonts.googleapis.com/css?family=Butterfly+Kids|Roboto"
rel="stylesheet">

Alternativ kann auch im CSS-Bereich der Webseite die Schriften einbetten:
@import url('https://fonts.googleapis.com/css?family=Butterfly+Kids|Roboto');

Da Google die Zugriffe auswerten kann,
sollte man wegen dem Datenschutz die Nutzer im Impressum darauf hinweisen.
Auf dieser Homepage werden auf keiner Seite Schriftarten vom Google-Server geladen.
Alle Fonts kommen ausnahmslos direkt vom Server dieser Homepage.

Beispiele für Schriftarten

Die roten Schriftarten sind Google Fonts.
SchriftartBeispiel normalBeispiel fettBeispiel kursiv
ohneImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
    
sans-serifImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
RobotoImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
ArialImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
HelveticaImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
VerdanaImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
CalibriImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
    
serifImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
CaveatImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
Architects DaughterImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
Butterfly KidsImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
BonbonImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
Gloria HallelujahImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
KalamImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
Patrick HandImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
Permanent MarkerImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
Pinyon ScriptImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
Irish GroverImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
Markazi TextImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
Reenie BeanieImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
RanchoImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
Rouge ScriptImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
Comic Sans MSImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
GeorgiaImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?
TahomaImmer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?Immer wieder 123 ÄÖÜäöüß?