Google Fonts in Premiumthemes deaktivieren

Raphael

Moin, moin,
weiss hier vielleicht jemand, wie man in den Premiumthemes, die Google-Fonts bereits drinnen haben, das Laden der Google-Fonts deaktivieren kann? Bis jetzt sind sämtliche Massnahmen bei mir gescheitert.

Es gibt ein paar Plugins, die das angeblich können. Auch Autooptimize kann das angeblich (Extras/ Google Fonts) Und ein Codeschnipsel in der functions.php kann das auch.

Sehr schön. Leider nicht bei mir. ;) Aktuell handelt es sich um das Theme florence, aber da seit ein paar Tagen die meisten wegen der DSGVO durchdrehen, werden noch viele andere Themes dazukommen, soweit ich das jetzt beurteilen kann. Fakt ist ja, dass kaum ein Premiumtheme der DSGVO entspricht. ;)

Danke für Tipps mit den Google-Fonts, dann hab ich schon mal eine Baustelle weniger. ;)
Raphael

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

b3317133

Wende Dich am besten an den Hersteller des jeweiligen Premiumthemes.

Viele der für den Zweck angebotenen allgemeingültigen Plugins funktionieren nicht wirklich, wenn man das im Einzelfall mal etwas genauer betrachtet.

In einigen Fällen kann man (am besten über ein kleines eigenes Plugin) das externe Laden des Themes via wp_dequeue_style() mit entspr. Priorität unterbinden und dann selbst die jeweils nötigen Schriftarten lokal einbinden.

Problematischer ist es meist bei Themes, die im Backend eine umfangreiche Schriftartenauswahl mitbringen. So eine Auswahl wird/kann dann nach passenden Änderungen nicht mehr funktionieren.

Manche Themes haben auch hardgecodete Links in header.php oder via wp_head() o.ä., hier sind dann Eingriffe direkt im Code erforderlich, manchmal geht es auch via Child-Theme, manchmal nicht.

Raphael

Hehe, gute Idee. Leider vollkommen praxisuntauglich. ;) Elegant-Themes hat angekündigt "irgendwann" in einem der kommenden Updates "auch" die DSGVO zu berücksichtigen. Und dabei ist Elegant-Themes mit Divi und Co. schon einer der großen Player.

b3317133

In der Demo des Theme florence werden am Rande bemerkt nicht nur drei Google Webfonts sondern auch noch zusätzlich Font Awesome über ein CDN geladen.

Raphael

Ja ja, aber wie mach ichs?

Code

add_action('wp_head', 'florence_styles' );


function florence_styles() {
wp_dequeue_style( 'florence-fonts' );}

hat mal nicht funktioniert. Und ganz allgemein, sollte es doch einen Codeschnipsel geben, der Google-Fonts global bei allen Themes ausperrt.

b3317133

Ermittle je nach Theme die passenden 'handles', hilfreich dafür ist das Lesen des Theme-Codes und/oder die Funktion "Seitenquelltext anzeigen" im Browser über die rechte Maustaste oder die Tastenkombination Strg-U.

Zitat von Raphael

Und ganz allgemein, sollte es doch einen Codeschnipsel geben, der Google-Fonts global bei allen Themes ausperrt.

Das kann und wird es nicht geben, siehe Ausführungen oben.

DustFireSky

Ich habe den entsprechenden "Schalter" zum deaktivieren in der functions.php des Themes gefunden. Du musst diese Fonts nicht komplett verbannen. Es geht schlicht darum, dass diese von deiner eigenen Seite geladen werden sollen und nicht von extern geladen werden müssen.

Hier mal ein Beispiel des Twentyseventeen Themes:

Code

/**
 * Register custom fonts.
 */
function twentyseventeen_fonts_url() {
    $fonts_url = '';


    /*
     * Translators: If there are characters in your language that are not
     * supported by Libre Franklin, translate this to 'off'. Do not translate
     * into your own language.
     */
    $libre_franklin = _x( 'on', 'Libre Franklin font: on or off', 'twentyseventeen' );


    if ( 'off' !== $libre_franklin ) {
        $font_families = array();


        $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i';


        $query_args = array(
            'family' => urlencode( implode( '|', $font_families ) ),
            'subset' => urlencode( 'latin,latin-ext' ),
        );


        $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
    }


    return esc_url_raw( $fonts_url );
}

Alles anzeigen

Im Standardfall sind die Fonts aktiv. Was wäre hier die einfachste Lösung um an die benötigten CSS Werte zu kommen ?

Du lässt Dir einfach die $fonts_url ausgeben, wodurch die genaue Adresse zu den CSS Angaben bekommst.

Am schnellsten geht das wohl wenn du unter (Es gibt viele Wege die nach Rom führen):

Code

$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );

Folgendes einfügst:

Code

die($fonts_url);

Nicht wundern! Danach siehst du eine weiße Seite mit der Adresse links oben. Die kopierst du einfach und machst den die($fonts_url); Code rückgängig. Somit ist die Seite wieder normal.

Die URL von eben rufst du auf und kopierst alles was du dort siehst und speicherst das als googlefonts.css ab.

In dieser Datei werden aber nach wie vor die Font Dateien von Google geladen. Deshalb musst du jeden Link der zwischen:

url(ICH_BIN_EIN_LINK)

steht aufrufen und die woff2 oder eine ähnliche Font Datei herunterladen. Die speicherst du einfachhalber als 1.woff2 oder ähnlich ab.

Den Pfad musst du anschließend, nachdem du die Datei heruntergeladen hast auf einen lokalen Pfad ändern.

Beispiel:
(/wp-content/themes/twentyseventeen/assets/fonts/1.woff2)

Der Fonts Ordner existiert in dem Theme nicht. Habe ich angelegt und jeder der 16 Woff2 Dateien heruntergeladen und darein kopiert.
Nachdem du das alles abgeändert hast, kannst du die googlefonts.css in das Verzeichnis:

/wp-content/themes/twentyseventeen/assets/css/

kopieren.

So, jetzt kommen wir zurück zu der Functions.php

Dort musst du aus dem on ein off machen.

Code

$libre_franklin = _x( 'on', 'Libre Franklin font: on or off', 'twentyseventeen' );

Diesen Code hier müsstest du noch einbinden, damit die Fonts, von nun an lokal geladen werden:

Code

/* Google Fonts Lokal einbinden */
wp_enqueue_style('googlefonts',get_template_directory_uri().'/assets/css/googlefonts.css',false,'1.0','all');

Entweder, du schreibst das auch in die functions.php oder halt in die header.php. Wo ist eigentlich egal, da es sowieso im Header landet.

Du müsstest in deinem Fall halt nur die Pfade anpassen und eventuell gibt es die Funktion bei Dir auch oder zumindest so ähnlich. Wenn ich Dir damit jetzt nicht unbedingt zu 100% helfen kann, dann zumindest all den Leuten die auch das Twenty Seventeen haben.

Ich habe fertig.

Raphael

Klingt interessant. ;) Ich muss mir das mal genauer ansehen, weil es doch recht komplex ist.

DustFireSky

Sieht schlimmer aus, als es ist.

b3317133

In jedem Theme ist die Einbindung anders geregelt, wie bereits oben beschrieben...
Der saubere Weg wäre das Zusammenstellen der Schriftart und das Erstellen des CSS-Codes (und das manuelle Erstellen der passenden Lizenzdatei lt. "Google Fonts Open Source Font Attribution" Link dort) z.B. mit diesem Online-Tool.

DustFireSky

Das weiß ich doch, das es nicht in jedem Theme gleich ist.Ich habe es doch selbst erwähnt. Ich habe mir wenigstens die Mühe gemacht es zu erklären und wie man das lösen könnte. Mit Links und Formulierungen kann hier jeder um sich schmeißen. Hier in dem Forum wird immer davon ausgegangen, dass die Nutzer schon halbe Profis sind. Das sollte man mal überdenken. Oder ich bin hier einfach falsch, wäre auch möglich.

Raphael

DustFireSky: Ja, danke für die Hinweise, ich muss mir das in Ruhe ansehen, momentan komme ich nicht dazu.
b3317133: Das Problem ist ja nicht das Einbinden, das ist superleicht. Das Problem ist das deaktivieren. Aber mit dem was in dem Thread bis jetzt gesammelt wurde, müsste ich schon klarkommen.

Raphael

OK, im Falle von Florence habe ich es so gemacht:
1) Das Theme mit einem geeigneten Programm durchsuchen, dabei habe ich das Suchwort googleapis genutzt.
2) In der functions.php habe ich die Stelle dann gefunden:

Code

wp_enqueue_style('default_headings_font', 'http://fonts.googleapis.com/css?family=Oswald:400,700');
    wp_enqueue_style('default_para_font', 'http://fonts.googleapis.com/css?family=Crimson+Text:400,700,400italic,700italic');
    wp_enqueue_style('default_body_font', 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700&subset=cyrillic,latin');

Ab dann wars recht leicht, ich musste nur noch die Angaben wider deaktivieren. In die functions.php des Child-Themes kam daher:

Code

add_action( 'wp_enqueue_scripts', 'remove_google_styles' );




function remove_google_styles() {
  wp_dequeue_style( 'default_headings_font' );
  wp_dequeue_style( 'default_para_font' );
  wp_dequeue_style( 'default_body_font' );
}

Hätte ich es aus dem Theme einfach rausgestrichen, wäre es beim nächsten Update wieder weg gewesen. ;)

OK, dann Google-Fonts runterladen, Auf https://www.fontsquirrel.com/tools/webfont-generator oder anderen Tools kann man Schriften umwandeln. Die lädt man dann lokal in eine Datei in den Themeordner (z. B. so: mein_theme/fonts/mein:wont.woff) und gibt in der style.css die neue Quelle an. z. B. so:

Code

@font-face {
    font-family: 'Open Sans';
    src: url('/fontsopensans-regular-webfont.woff2') format('woff2'),
         url('fonts/opensans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;


}

Einfacher geht es mit dem beschriebenen Link, das werde cih mir merken. ;) DANKE!

Die Lizenzdatei sollte man auch noch beachten, da habe ich aber keine guten Quellen gefunden. Eventuell reicht es ja den Link zur Lizenz in das CSS zu schreiben: (?) Irgend sowas z. B:
Schrift XY ist unter folgender Lizenz veröffentlich: http://www.apache.org/licenses/LICENSE-2.0

Aber das ist reine Vermutung.

b3317133

Wir nutzen das o.g. Online-Tool zum Download der Fonts und zum Generieren der CSS-Datei.

Zusätzlich dazu erstellen wir jeweils eine Textdatei mit im Order der Fonts, z.B. im Falle von "Open Sans" eine Datei [FONT=Courier New]open-sans-v15-latin_LICENCE.txt[/FONT] mit dem hier ganz unten unter "APPENDIX: How to apply the Apache License to your work" veröffentlichten Lizenztext, mit dem entspr. angepassten Copyright.

Ob/wie das juristisch so passt, dazu kann nur ein passender Anwalt eine entspr. Auskunft geben.

Für Mitleser, die Google Webfonts sind nicht alle unter der Apache Lizenz veröffentlicht, bei anderen Lizenzen wäre dann anderer Lizenztext zu verwenden.

Ergänzung zum Theme Florence, wie schon beschrieben nicht den Font Awesome vergessen, der kommt noch von einem anderen externen Server [plain]maxcdn.bootstrapcdn.com[/plain]

maxe

Zitat von DustFireSky

Hier in dem Forum wird immer davon ausgegangen, dass die Nutzer schon halbe Profis sind. Das sollte man mal überdenken. Oder ich bin hier einfach falsch, wäre auch möglich.

Wenn ein User eine Website will, die wie von einem Profi gemacht aussieht, muss er auch gewisse Ambitionen haben. Denn einfach mal so in 1-2 Sätzen ist vieles, was hier gewünscht wird, nicht möglich. Deshalb geben wir hier oft hilfreiche Stichworte, Links etc. um auf die richtige Spur zu lenken = Hilfe zur Selbsthilfe ;)

Leider wollen aber viele alles schnell und am besten über ein Baukasten (wie in der Werbung von 1und1, Strato, etc. gezeigt) oder über 2 Klicks ... geht aber in der Realität nicht so einfach.
Und für einen ausführlichen Workshop hier im Forum, haben die freiwilligen Helfer auch oft keine Zeit (ist schließlich alles Freizeit).

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Google Fonts in Premiumthemes deaktivieren

Jetzt mitmachen!