Google Fonts im Divi-Builder hochladen: Schritt-für-Schritt-Anleitung
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:
- 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
- Installiere das Code Snippets Plugin über die WordPress Plugin-Bibliothek.
- Erstelle ein neues Snippet und füge den untenstehenden Code ein.
Option 2: Child-Theme verwenden
- Öffne die
functions.php-Datei deines Divi Child-Themes. - 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:
- Öffne die Seite, auf der du die Schriftart verwenden möchtest, zum Beispiel die Startseite.
- Aktiviere den Divi-Builder.
- 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!
Bewerbungs-formulare
Benötigen Sie ein Bewerbungsformular für Ihre Webseite? Ich erstelle benutzerfreundliche und professionelle Formulare, die perfekt auf Ihre Anforderungen abgestimmt sind.
0 Kommentare