BigBear Logo – modernes Webdesign Branding



Über Mich

Hier kannst du mehr über mich erfahren und dir einen ersten Eindruck machen.

Portfolio

Hier findest du ausgewählte Projekte für einen schnellen und klaren Überblick.

Blog

In meinem Blog kannst du dich umfassend informieren.

Leistungen

Hier findest du meine Service leistungen für einen schnellen und klaren Überblick.

Web-Preise

Webseiten zur Miete, Datenschutzpaket auch einzeln buchbar und rechtssicher.

Kontakt

Jetzt Direkt mit mir in Kontakt treten und mit Deiner Website durchstarten

Google Fonts im Divi-Builder hochladen: Schritt-für-Schritt-Anleitung

Auf der linken Seite ist das Gesicht des Autors zu sehen. Rechts im Bild steht der Text: 'Google Fonts hochladen – Eine Schritt-für-Schritt-Anleitung', der das Thema des Tutorials ankündigt.

Google Fonts in den Divi Builder hochladen – Schritt-für-Schritt-Anleitung

Das Hinzufügen von benutzerdefinierten Google Fonts in den Divi Builder ist einfacher, als du vielleicht denkst. Mit dieser Anleitung zeige ich dir, wie du Google Fonts Schritt für Schritt hochlädst und in deinem Divi-Projekt verwendest.


1. Google Fonts herunterladen

Zuerst brauchst du die gewünschten Schriftarten auf deinem Computer. Gehe dazu auf die folgende Website:

Google Webfonts Helper

  • Wähle die gewünschte Schriftart aus.
  • Lade sie herunter und speichere die Datei entweder in deinem Download-Ordner oder direkt auf dem Desktop, damit du sie später leicht wiederfinden kannst.

2. Plugin oder Child-Theme vorbereiten

Um die Schriftarten in den Divi Builder hochzuladen, musst du bestimmte Dateiformate erlauben. Dazu kannst du entweder das Code Snippets Plugin nutzen oder direkt in deinem Child-Theme arbeiten.

Option 1: Code Snippets Plugin

  1. Installiere das Code Snippets Plugin über die WordPress Plugin-Bibliothek.
  2. Erstelle ein neues Snippet und füge den untenstehenden Code ein.

Option 2: Child-Theme verwenden

  1. Öffne die functions.php-Datei deines Divi Child-Themes.
  2. Füge den folgenden Code ein:


global $da_allowed_mimes;
$da_allowed_mimes = ['ttf' => 'application/x-font-ttf', 'otf' => 'application/x-font-otf', 'woff' => 'application/x-font-woff', 'woff2' => 'application/x-font-woff2'];

/**
 * Allow Custom Mime
 *
 * @param $mimes
 *
 * @return mixed
 */
if (!function_exists('pac_da_upload_mimes')):
    function pac_da_upload_mimes($mimes)
    {
        global $da_allowed_mimes;
        foreach ($da_allowed_mimes as $key => $val) {
            $mimes[$key] = $val;
        }
        return $mimes;
    }
endif;

/**
 * Allow Divi To Upload Fonts Format
 *
 * @return string[]
 */
if (!function_exists('pac_da_filter_divi_supportedt_font_formats')):
    function pac_da_filter_divi_supportedt_font_formats()
    {
        return ['otf', 'woff', 'woff2', 'ttf'];
    }

    add_filter('et_pb_supported_font_formats', 'pac_da_filter_divi_supportedt_font_formats', 999);
endif;

/**
 * Fixes the issue in WordPress 4.7.1 being unable to correctly identify type
 *
 * @param $file
 * @param $tmp_file
 * @param $filename
 * @param $mimes
 *
 * @return array|mixed|null
 */
if (!function_exists('pac_da_fix_mime_type_ext')):
    function pac_da_fix_mime_type_ext($file, $tmp_file, $filename, $mimes)
    {
        if (isset($file['ext']) && empty($file['ext'])) {
            $file_ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
            global $da_allowed_mimes;
            foreach ($da_allowed_mimes as $key => $val) {
                if ($key === $file_ext) {
                    $file['ext'] = $key;
                    $file['type'] = $val;
                }
            }
        }
        return $file;
    }
endif;
if (current_user_can('administrator')) {
    add_filter('upload_mimes', 'pac_da_upload_mimes');
    add_filter('wp_check_filetype_and_ext', 'pac_da_fix_mime_type_ext', 75, 4);
}


3. Google Fonts hochladen

Um die Schriftarten direkt hochzuladen, kannst du folgende Schritte ausführen:

  1. Öffne die Seite, auf der du die Schriftart verwenden möchtest, zum Beispiel die Startseite.
  2. Aktiviere den Divi-Builder.
  3. Klicke im Textmodul oder einem anderen Bereich, in dem du die Schriftart verwenden möchtest, auf Schriftart hochladen und wähle deine heruntergeladene Datei aus.

4. Zusätzliche Hilfe

Falls du weitere Unterstützung benötigst, findest du in meinem Blog eine ausführliche Schritt-für-Schritt-Video Anleitung. Viel Erfolg mit deinen neuen Schriftarten!


Viel Spaß beim Gestalten mit deinen neuen Schriftarten!

Jetzt beraten

Nutzen Sie jetzt die Möglichkeit einer telefonischen Erstberatung – schnell, unverbindlich und kompetent!

Termin buchen

Bewerbungs-formulare

Benötigen Sie ein Bewerbungsformular für Ihre Webseite? Ich erstelle benutzerfreundliche und professionelle Formulare, die perfekt auf Ihre Anforderungen abgestimmt sind.

Kontaktiere mich

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

WordPress Cookie Plugin von Real Cookie Banner