Eigenen Webfont zum Theme Options Panel (Redux Framework) hinzufügen

  • riania

    (@riania)


    vor 8 Jahren, 11 Monaten

    Hallo, ich habe eine Theme gekauft, das hat ein Theme Options Panel, das mit dem Redux Framework gemacht wurde und da lassen sich so komfortabel Googlefonts in einem Dropdown Menü auswählen. Wie kann ich denn diesem Theme Options Panel zu dem Dropdown Menü meine zwei eigenen Websfonts hinzufügen?

    Bitte um Hilfe.

Ansicht von 3 Antworten – 1 bis 3 (von insgesamt 3)
  • Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 8 Jahren, 11 Monaten

    Vorab: Zu gekauften Themes können (und wollen) wir hier nur sehr allgemein Fragen beantworten, ohne auf die Besonderheiten des Themes eingehen zu können. Wir müssten uns das Theme jetzt erst einmal selber kaufen, damit wir dir dann kostenlos den Support anbieten können, für den du beim Kauf bezahlt hast.

    Wenn du in den Theme-Einstellungen Google Webfonts auswählen kannst, werden diese vom Google Server in deine Website eingebunden. Dabei wird ein Code verwendet, den Google vorgibt, z.B.
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Slabo+27px" rel="stylesheet">
    Die Namen der verwendeten Schriftarten können dann beliebig ausgetauscht werden, aber als Quelle wird immer https://fonts.googleapis.com/ angegeben – und da bekommst du deinen eigenen Fonts nicht hin.

    Um statt dessen einen eigenen Webfont zu verwenden, musst du zunächst ein Child Theme erstellen (Anleitung: Child Theme erstellen). In diesem Theme legst du ein Verzeichnis /fonts an, mit dem du deine Fonts ablegst. Im Stylesheet style.css des Child Themes kannst du dann eigene CSS-Regeln definieren, mit denen die Fonts verwendet werden, z.B.

    @font-face {
  font-family: Arvo;  
  src: url(http://www.deinedomain.de/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);  
  font-weight: normal;  
}
.h1 site-title { 
font-family: "Arvo", Arial, sans-serif; 
}

    (Quelle: How to add Custom Fonts in WordPress)

    Dabei musst du natürlich alle CSS-Regeln anpassen, in denen die Schriftart vorgegeben wird.

    Optimal wäre, wenn du außerdem die Funktion deaktivierst, mit der die Google Fonts geladen werden, weil du sonst deinen Webseiten-Besuchern mit einer Schriftart, die nicht verwendet wird, unnötigen Ballast mitlieferst. Um dir aber genau zu sagen, welche Funktion du jetzt wie deaktiverst, müsste ich das Theme kennen.

    Thread-Starter riania

    (@riania)

    vor 8 Jahren, 11 Monaten

    Hallo Bego,

    Danke für die schnelle Antwort. Ja genau, ich kann in den Theme Options die Google Fonts wählen und in diesem Dropdown wäre es eben für mich praktisch, wenn ich da meinen eigenen Corporate Webfont drin haben könnte, so zum Beispiel sollte das dann aussehen … Redux Theme Options Dropdown …

    Jetzt habe ich hier Anleitung zum Redux eine Anleitung gefunden, wie und wo man so eine Anpassung bei dem Redux Plugin macht. Da diese Anleitung scheinbar etwas älter ist oder eben auf ein spezielles Theme geschrieben ist, waren bei meinem Theme nur ein paar Pfade zur Datei etwas anders, ich habe aber die Datei gefunden (wp-content/plugins/redux-framework/ReduxCore/inc/fields/typography/field_typography.php), in der man die Anpassung machen muss (und noch eine kleine Anpassung in der Child functions.php), das hat schon mal geklappt. Ich habe nun die eigenen Webfonts als Dropdown in den Theme Options und kann diesen dann dort umstellen und sie wirken dann auch im Theme bei fast!? allen Elementen.

    Diese Anpassungen habe ich aber jetzt im Original Plugin Ordner im Quellcode gemacht, bei einem Update des Redux ist das dann wieder weg oder?

    Eine Frage noch zum Child Theme. In einigen wenigen css Elementen von dem Theme wirkt immer noch eine Stylesheet Datei aus parentoriginatheme/stylesheets/main.css. Im Child habe ich eine childtheme/styles.css und da werden dann Styles, die in der main.css vom Elterntheme als important! gekennzeichnet sind nicht überschrieben. Macht man das dann so, um das zukunftssicher zu machen, dass man in die functions.php vom Child diese Zeile einfügt …

    wp_enqueue_style( 'parent-style', get_template_directory_uri(). '/stylesheets/main.css' );

    und dann im Child das Verzeichnis stylesheets mit dem main.css hinterlegt und dann kann ich die main.css auch noch justieren, wie ich es brauche, habe ich das mit dem Childtheme so richtig verstanden?

    Danke schon mal wieder.

    Thread-Starter riania

    (@riania)

    vor 8 Jahren, 11 Monaten

    waren bei meinem Theme nur ein paar Pfade zur Datei etwas anders

    … genauer gesagt ein paar Pfade nicht im Theme sondern im Plugin waren anders …

Ansicht von 3 Antworten – 1 bis 3 (von insgesamt 3)

Das Thema „Eigenen Webfont zum Theme Options Panel (Redux Framework) hinzufügen“ ist für neue Antworten geschlossen.