Verbinden von Schriftarten mit der CSS-Datei
Das Verbinden von Dateien über Ihr eigenes CSS erfordert Erfahrung im Schreiben von CSS-Code und einen eigenen Server zum Speichern der Datei.
Als Erstes benötigen Sie WOFF-Schriftdateien.
Sie erhalten sie, indem Sie eine Schriftart bei einem Schriftartendienst kaufen, z. B. myfonts.com. Wählen Sie beim Kauf die "WEB"-Lizenz, damit Sie sie online verwenden können.
Stellen Sie die Schriftdateien ins Internet
Sie können jeden beliebigen Server oder CDN-Dienst für die Platzierung der Dateien wählen. Die Hauptsache ist, dass der Server Access-Control-Allow-Origin CORS für die Verteilung an eine beliebige Domain unterstützt. (Zugangskontrolle-Ursprung zulassen: *)
Sie erhalten sie, indem Sie eine Schriftart bei einem Schriftartendienst kaufen, z. B. myfonts.com. Wählen Sie beim Kauf die "WEB"-Lizenz, damit Sie sie online verwenden können.
Stellen Sie die Schriftdateien ins Internet
Sie können jeden beliebigen Server oder CDN-Dienst für die Platzierung der Dateien wählen. Die Hauptsache ist, dass der Server Access-Control-Allow-Origin CORS für die Verteilung an eine beliebige Domain unterstützt. (Zugangskontrolle-Ursprung zulassen: *)
Wenn Sie Dateien auf Ihrem eigenen Server hosten
Erstellen Sie eine .htaccess-Datei im Stammverzeichnis der Website und fügen Sie den folgenden Code hinzu:
Erstellen Sie eine .htaccess-Datei im Stammverzeichnis der Website und fügen Sie den folgenden Code hinzu:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>Erstellen Sie Ihre eigene CSS-Datei und legen Sie sie auf Ihrem Server oder CDN-Dienst ab.
Wie man eine CSS-Datei erstellt
Im Folgenden finden Sie ein Beispiel dafür, wie CSS geschrieben wird. Sie können es in einem gewöhnlichen Texteditor erstellen, es mit der Erweiterung .css speichern und dann auf einen Server oder ein CDN hochladen.
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
font-weight: 700;
font-style: bold;
}
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
font-weight: 700;
font-style: bold;
}
Wie man CSS verwendet
The numbers 300,400... in the font-weight property indicate the weight of the font. Here is the complete list:
100 - thin
200 - extra light
300 - light
400 - normal
500 - medium
600 - semibold
700 - bold
800 - extra bold
900 - black
Browsers on the web display fonts slightly differently than they might look in, say, Photoshop. They usually come out a little bolder. Sometimes it's helpful to know the little tricks: you can specify, for example, a Light weight file to get a Normal font rendering.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
And vice versa. If you don't have a Semi-bold (600) file, specify Bold instead. That way, semi-bold headings will be displayed in bold instead of the regular body text style.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 500;
font-style: bold;
}
If you only have one font file, you can specify it for all styles, listing them separated by commas: 300,400,500,600,700
100 - thin
200 - extra light
300 - light
400 - normal
500 - medium
600 - semibold
700 - bold
800 - extra bold
900 - black
Browsers on the web display fonts slightly differently than they might look in, say, Photoshop. They usually come out a little bolder. Sometimes it's helpful to know the little tricks: you can specify, for example, a Light weight file to get a Normal font rendering.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
And vice versa. If you don't have a Semi-bold (600) file, specify Bold instead. That way, semi-bold headings will be displayed in bold instead of the regular body text style.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 500;
font-style: bold;
}
If you only have one font file, you can specify it for all styles, listing them separated by commas: 300,400,500,600,700
Gehen Sie zurück zu Tilda. Website-Einstellungen → Schriftarten und Farben → Eigene Schriftart. Fügen Sie den Link zur CSS-Datei ein. Fügen Sie den Namen der Schriftart wie in der CSS-Datei angegeben ein.
Speichern Sie alle Seiten und veröffentlichen Sie sie erneut.
Wichtig: Sie sehen Ihre Schrift nur, wenn Sie die Website veröffentlichen. Im Bearbeitungs- oder Vorschaumodus kann keine CSS-Datei eines Drittanbieters eingebunden werden, d. h. Ihre Schrift ist nicht sichtbar (dies geschieht aus Sicherheitsgründen).
