So verbinden Sie Schriftarten mithilfe 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.
Das erste, was Sie brauchen, ist WOFF Font Datei(en).
Sie können sie erhalten, indem Sie eine Schriftart von einem Schriftartendienst kaufen, z. B. myfonts.com. Wählen Sie beim Kauf die Lizenz "WEB", damit Sie sie online nutzen können.
Platzieren von Schriftdateien im Web
Sie können einen beliebigen Server oder CDN-Dienst zum Platzieren von Dateien auswählen. Die Hauptsache ist, dass der Server Access-Control-Allow-Origin CORS für die Verteilung an jede Domäne unterstützen muss. (Access-Control-Allow-Origin: *)
Sie können sie erhalten, indem Sie eine Schriftart von einem Schriftartendienst kaufen, z. B. myfonts.com. Wählen Sie beim Kauf die Lizenz "WEB", damit Sie sie online nutzen können.
Platzieren von Schriftdateien im Web
Sie können einen beliebigen Server oder CDN-Dienst zum Platzieren von Dateien auswählen. Die Hauptsache ist, dass der Server Access-Control-Allow-Origin CORS für die Verteilung an jede Domäne unterstützen muss. (Access-Control-Allow-Origin: *)
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:
Header-Set Access-Control-Allow-Origin "*" Erstellen Sie Ihre eigene CSS-Datei und platzieren Sie sie auf Ihrem Server oder CDN-Dienst.
So erstellen Sie eine CSS-Datei
Unten ist ein Beispiel dafür, wie CSS geschrieben wird. Sie können es in einem gewöhnlichen Texteditor erstellen, mit der Erweiterung .css speichern und dann auf einen Server oder ein CDN hochladen.
@font-face {
Schriftfamilie: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
Schriftgewicht: 400;
Schriftart: Normal;
}
@font-face {
Schriftfamilie: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
Schriftgewicht: 700;
Schriftstil: fett;
}
Schriftfamilie: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
Schriftgewicht: 400;
Schriftart: Normal;
}
@font-face {
Schriftfamilie: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
Schriftgewicht: 700;
Schriftstil: fett;
}
Wie man CSS verwendet
Die Zahlen 300.400... Geben Sie in der font-weight-Eigenschaft die Schriftstärke an. Hier ist die vollständige Liste:
100 - dünn
200 - extra leicht
300 - Licht
400 - normal
500 - mittel
600 - halbfett
700 - fett
800 - extra fett
900 - schwarz
Browser im Web zeigen Schriftarten etwas anders an als beispielsweise in Photoshop. Sie kommen normalerweise etwas mutiger heraus. Manchmal ist es hilfreich, die kleinen Tricks zu kennen: Sie können zum Beispiel eine Lightweight-Datei angeben, um eine normale Schriftdarstellung zu erhalten.
@font-face {
Schriftfamilie: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
Schriftgewicht: 300;
Schriftart: Normal;
}
Und umgekehrt. Wenn Sie keine Datei mit Halbfettdruck (600) haben, geben Sie stattdessen Fett an. Auf diese Weise werden halbfett gedruckte Überschriften fett anstelle des normalen Textkörperformats angezeigt.
@font-face {
Schriftfamilie: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
Schriftgewicht: 500;
Schriftstil: fett;
}
Wenn Sie nur eine Schriftartdatei haben, können Sie diese für alle Stile angeben und sie durch Kommas getrennt auflisten: 300,400,500,600,700
100 - dünn
200 - extra leicht
300 - Licht
400 - normal
500 - mittel
600 - halbfett
700 - fett
800 - extra fett
900 - schwarz
Browser im Web zeigen Schriftarten etwas anders an als beispielsweise in Photoshop. Sie kommen normalerweise etwas mutiger heraus. Manchmal ist es hilfreich, die kleinen Tricks zu kennen: Sie können zum Beispiel eine Lightweight-Datei angeben, um eine normale Schriftdarstellung zu erhalten.
@font-face {
Schriftfamilie: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
Schriftgewicht: 300;
Schriftart: Normal;
}
Und umgekehrt. Wenn Sie keine Datei mit Halbfettdruck (600) haben, geben Sie stattdessen Fett an. Auf diese Weise werden halbfett gedruckte Überschriften fett anstelle des normalen Textkörperformats angezeigt.
@font-face {
Schriftfamilie: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
Schriftgewicht: 500;
Schriftstil: fett;
}
Wenn Sie nur eine Schriftartdatei haben, können Sie diese für alle Stile angeben und sie durch Kommas getrennt auflisten: 300,400,500,600,700
Geh zurück zu Tilda. Website-Einstellungen → Schriftarten und Farben → Ihrer eigenen Schriftart. Fügen Sie den Link zur CSS-Datei ein. Fügen Sie den Namen der Schriftart hinzu, wie in der CSS-Datei angegeben.
Speichern Sie alle Seiten und veröffentlichen Sie sie erneut.
Wichtig: Sie sehen Ihre Schriftart erst, wenn Sie die Website veröffentlichen. Im Bearbeitungs- oder Vorschaumodus kann keine CSS-Datei eines Drittanbieters verbunden werden, was bedeutet, dass Ihre Schriftart nicht sichtbar ist (dies geschieht aus Sicherheitsgründen).
