SeedProd
SeedProd

SeedProd Dokumentation

Dokumentation, Referenzmaterialien und Tutorials für SeedProd

So verwenden Sie benutzerdefinierte Schriftarten mit SeedProd

SeedProd unterstützt benutzerdefinierte Schriftarten mit der CSS3 @font-face-Methode. Damit können Sie jede Schriftartdatei, die auf Ihrem Server gehostet wird, laden und auf Textelemente auf Ihren Seiten und Vorlagen anwenden.

Schritt 1: Bereiten Sie Ihre Schriftartdateien vor

Laden Sie die gewünschte Schriftart herunter und konvertieren Sie sie in webkompatible Formate. Um sicherzustellen, dass Ihre Schriftart auf allen Browsern und Geräten korrekt angezeigt wird, generieren Sie die folgenden Dateitypen mit dem FontSquirrel Webfont Generator:

  • WOFF: Web Open Font Format, geeignet für Webseiten.
  • WOFF2: Eine verbesserte Version von WOFF mit besserer Komprimierung.
  • TTF: TrueType-Schriftart, weit verbreitet auf Mac und Windows.
  • SVG: Scalable Vector Graphics-Schriftartformat.
  • EOT: Embedded OpenType, für die Kompatibilität von Webseiten.
  • OTF: OpenType-Format, unterstützt auf den meisten Plattformen.

Schritt 2: Laden Sie Ihre Schriftartdateien nach WordPress hoch

Laden Sie Ihre Schriftartdateien auf Ihren WordPress-Hosting-Server hoch. Sie können dies mit FTP, dem Dateimanager Ihres Hosting-Kontrollpanels oder einem Dateimanager-Plugin tun. Wählen Sie einen beliebigen Ordner in Ihrem /wp-content/-Verzeichnis als Upload-Ziel – zum Beispiel /wp-content/fonts/.

Notieren Sie sich den vollständigen URL-Pfad zu jeder hochgeladenen Schriftartdatei. Sie benötigen diese URLs im nächsten Schritt.

Schritt 3: Registrieren Sie die Schriftart in SeedPros globalem CSS

Öffnen Sie den SeedProd-Editor und gehen Sie zu Globale Einstellungen > Benutzerdefiniertes CSS. Fügen Sie eine @font-face-Regel hinzu, die auf Ihre hochgeladenen Schriftartdateien verweist. Ersetzen Sie YourFontName und die Beispiel-URLs durch Ihren tatsächlichen Schriftartnamen und Ihre Dateipfade.

Abschnitt „Globale Einstellungen – Benutzerdefiniertes CSS“ im SeedProd-Editor
@font-face {
  font-family: 'YourFontName';
  src: url('https://example.com/wp-content/fonts/YourFont.woff2') format('woff2'),
       url('https://example.com/wp-content/fonts/YourFont.woff') format('woff'),
       url('https://example.com/wp-content/fonts/YourFont.ttf') format('truetype'),
       url('https://example.com/wp-content/fonts/YourFont.otf') format('opentype'),
       url('https://example.com/wp-content/fonts/YourFont.svg') format('svg'),
       url('https://example.com/wp-content/fonts/YourFont.eot') format('embedded-opentype');
}

Schritt 4: Wenden Sie die Schriftart auf Elemente an

Sobald die Schriftart registriert ist, wenden Sie sie auf beliebige Elemente auf Ihrer Seite an, indem Sie eine zweite CSS-Regel im selben Abschnitt Benutzerdefiniertes CSS hinzufügen. Das folgende Beispiel wendet die Schriftart auf alle Überschriften-Tags an – passen Sie die Selektoren an, um die gewünschten Elemente anzusprechen.

h1, h2, h3 {
  font-family: 'YourFontName', sans-serif;
}
Benutzerdefinierte Schriftart, die über globales CSS auf Überschriften in SeedProd angewendet wird

Ihre benutzerdefinierte Schriftart ist jetzt auf Ihren SeedProd-Seiten verfügbar. Sie können zusätzliche CSS-Selektoren verwenden, um die Schriftart auf Absätze, Schaltflächen, Navigationslinks oder andere Elemente anzuwenden, um Ihre Typografie auf Ihrer gesamten Website konsistent zu halten.

Verwandte Artikel

SeedProd Dokumentation


  
Erhalten Sie kostenlose Tipps und Ressourcen direkt in Ihren Posteingang, zusammen mit über 60.000 anderen.

  

    

      

        

          
        

        

          
        

        

          
        

      

    

  

  

    Folgen Sie uns