SeedProd
SeedProd

SeedProd-Dokumentation

Dokumentation, Referenzmaterialien und Tutorials für SeedProd

So verwenden Sie benutzerdefinierte Schriften mit SeedProd

SeedProd unterstützt benutzerdefinierte Schriftarten mithilfe von CSS3 @font-face Methode. Damit können Sie jede auf Ihrem Server gehostete Schriftartdatei laden und auf Textelemente auf Ihren Seiten und in Ihren 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 in allen Browsern und auf allen Geräten korrekt angezeigt wird, erstellen Sie mithilfe des FontSquirrel Webfont Generators die folgenden Dateiformate:

  • WOFF: Web Open Font Format, geeignet für Webseiten.
  • WOFF2: Eine verbesserte Version von WOFF mit besserer Komprimierung.
  • TTF: TrueType-Schriftart, die unter Mac und Windows weit verbreitet ist.
  • SVG: Schriftformat für skalierbare Vektorgrafiken.
  • EOT: Embedded OpenType, wird zur Kompatibilität mit Webseiten verwendet.
  • OTF: OpenType-Format, das auf den meisten Plattformen unterstützt wird.

Schritt 2: Laden Sie Ihre Schriftartdateien in WordPress hoch

Laden Sie Ihre Schriftartdateien auf Ihren WordPress-Hosting-Server hoch. Dazu können Sie FTP, den Dateimanager Ihres Hosting-Control-Panels oder ein Dateimanager-Plugin verwenden. Wählen Sie einen beliebigen Ordner innerhalb Ihres /wp-content/ Verzeichnis als Speicherort für den Upload – 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 im globalen CSS von SeedProd

Öffnen Sie den SeedProd-Editor und gehen Sie zu Globale Einstellungen > Benutzerdefiniertes CSS. Füge ein @font-face Regel, die auf Ihre hochgeladenen Schriftdateien verweist. Ersetzen Sie YourFontName und ersetzen Sie die Beispiel-URLs durch Ihren tatsächlichen Schriftnamen und Ihre Dateipfade.

Abschnitt „Benutzerdefiniertes CSS“ unter „Globale Einstellungen“ 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: Die Schriftart auf Elemente anwenden

Sobald die Schriftart registriert ist, können Sie sie auf beliebige Elemente Ihrer Seite anwenden, indem Sie im selben Abschnitt „Benutzerdefiniertes CSS“ eine zweite CSS-Regel hinzufügen. Im folgenden Beispiel wird die Schriftart auf alle Überschriften-Tags angewendet – passen Sie die Selektoren an, um die gewünschten Elemente anzusprechen.

h1, h2, h3 {
  font-family: 'YourFontName', sans-serif;
}
Über „Global CSS“ in SeedProd eine benutzerdefinierte Schriftart auf Überschriften anwenden

Ihre benutzerdefinierte Schriftart ist nun auf allen 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 und so eine einheitliche Typografie auf Ihrer gesamten Website zu gewährleisten.

Verwandte Artikel

SeedProd-Dokumentation


  

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

  

    

      

        

          
        

        

          
        

        

          
        

      

    

  

  

    Folgen Sie uns