Google Fonts

  • http://www.wvs-gs.de

    Hallo,

    ich habe auf o.g. Website die Schrift auf Google Fonts umgestellt. Im verwendeten Helix-Ultimate-Template sind diese bereits integriert.

    Mich treibt jetzt die Frage um, ob die Schrift nun jeweils vom Google Server abgerufen oder irgendwie vom Template geregelt wird.

    Ich habe schon im FireFox (F12) rauf und runter gesucht, finde aber in der Netzwerkanalyse keinen Hinweis. Die Schriftart wird über den "Inspector" zwar angezeigt, es gibt aber keinen Hinweis darauf, wo die herkommt.

    Kann mir da jemand helfen?

    Reinhard

  • Die Schriftart wird über den "Inspector" zwar angezeigt, es gibt aber keinen Hinweis darauf, wo die herkommt.

    Auf die Zeile klicken. Dann siehst du unter "Kopfzeilen" oben das GET.


    Weiters findest auch CSS-Einträge auf fonts.googleapis.com. Ab dem Moment, wo die da sind, wird auch der Font bei G abgeholt. Das steht dann in der CSS von G so drinnen. B<eipiel:


    Code
    @font-face {
      font-family: 'Source Serif Pro';
      font-style: italic;
      font-weight: 300;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/sourceserifpro/v11/neIVzD-0qpwxpaWvjeD0X88SAOeauXEGCSmay60rRrI.woff2) format('woff2');
      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }

  • Danke für die Klärung.

    Dazu gleich noch eine Anschlussfrage (eventuell ot):

    Ich habe die Verwendung von Google Fonts in die Datenschutzerklärung eingearbeitet.

    Bedarf es dazu noch eines weiteren Hinweises beim Aufruf der HP (opt in/out oder so was)?

  • Wie bei (fast) allem bzgl. DSGVO gibt es diesbzgl. keine ganz klare Linie. Da muss man ja leider oft auf Gerichtsurteile warten. Die meisten interpretieren wohl so, dass kein Opt-In nötig ist wegen "Dies stellt ein berechtigtes Interesse im Sinne von Art. 6 Abs. 1 lit. f DSGVO dar.".


    Ich verwende halt mein eigenes Plugin, dass die Besucher-IP beim Abruf der Fonts nicht sendet, die Fonts und CSS lokal ablegt und von da lädt. Aber das ist natürlich machtlos, wenn Templates oder Template-Frameworks Ihren eigenen Stiefel unterjubeln oder das nicht können (wollen).


    Da gibt es jetzt zwar auch wieder Plugins, die dann dieses fonts.googleapis.com etc. aus der bereits gerenderten Seite wieder entfernen, aber, wenn dann G-Fonts über JavaScripte oder anderweitig abgerufen werden, sind die meist nicht zweckmäßig. Wäre ja auch ein Riesen-Performance-Verlust, wenn die dann alles durchwühlen würden.

  • Bedarf es dazu noch eines weiteren Hinweises beim Aufruf der HP (opt in/out oder so was)?

    Ich denke schon, da der Besucher über die GF im Prinzip getrackt werden kann. Die IP des Besuchers wird weitergegeben. Viele Content Conset Tools (Cookiehinweis-Banner), binden die Option jedenfalls mit ein. Und es gibt alternativen, zB. binde ich die GF nur noch lokal ein. Weiterer Vorteil, das die Seite i.d.R. schneller wird.


    Schau Dir mal dieses Plugin dazu an: https://github.com/joomtools/plg_system_jtaldef

    Download: https://github.com/joomtools/plg_system_jtaldef/releases

  • Und es gibt alternativen, zB. binde ich die GF nur noch lokal ein.

    Ich bin gerade dabei, diesen Vorschlag umzusetzen, scheitere aber daran, dass die template.css (Helix Ultimate), in die ich den Font_CSS-Code am Anfang einsetzen will, nur im Fließtext zu öffnen ist. Weil dies für mich total unübersichtlich ist, habe ich Bammel davor, hier einen Fehler zu machen.

    Gibt es einen Trick, die CSS-Datei struckturiert anzeigen zu lassen (bei meinen snderen Templates ist das von vorneherein so)?

  • Oha!

    Scheinbar kann man im Helix-Template keine Google-Fonts lokal verwalten, da diese im Template bereits eingebaut sind. Ich kann nur Systemschriften oder die vorgesehenen Google-Schriften verwenden - dann werden sie aber auch von Google geholt.

    Oder sehe ich das völlig falsch?

  • Das ist richtig, allerdings kannst Du in den Template-Einstellungen unter "Typography" alles auf "disabled" stellen, so dass nur Standardschriften gezogen werden. Anschließend setzt Du über den o.g. Custom Code, bzw. über eine custom.css Deine eigenen lokalen Fonts ein.

  • Ich habe mittels "google-webfonts-helper" meine Schriften ausgesucht.

    Brauchst du auch nicht machen, da in den Template-Optionen vom Helix Ultimate schon ein Feld dafür da ist:

    Den Code fügte ich ein, wie von Elwood vorgeschlagen. Die dazugehörigen Fonts legte ich in den "fonts"-Ordner des Templates.

    Die Fonts unter "Typographie" habe ich wieder deaktiviert.

    Nun sind nur noch die Systemschriften vorhanden.

    Anschließend setzt Du über den o.g. Custom Code, bzw. über eine custom.css Deine eigenen lokalen Fonts ein.

    Deswegen habe ich auch noch Dudelhofers Vorschlag umgesetzt, eine custom.css angelegt und den Code dorthin kopiert.


    Wo finde ich jetzt diese Schriften, um sie zu verwenden?

  • Da habe ich mich falsch ausgedrückt: Die Schriften habe ich schon heruntergeladen und ins FONTS-Verzeichnis verfrachtet.

    Meine Frage geht dahin, wo ich die Schriften bei der Anwendung finden kann, also in einem Beitrag oder für H1,2,3,.. usw.

  • In deinem eingesetzten CSS findest Hinweis auf die zu verwendende font-family (aber auch auf der Seite Google-Fonts findet sich das).


    z.B.

    Code
    @font-face {  font-family: 'Just Me Again Down Here';

    Jetzt verwendest z.B. in deiner custom.css

    Code
    h1
    {
     font-family: 'Just Me Again Down Here';
    }

    Im JCE-Editor gibt es auch die Möglichkeit in den Profil > Plugins eigene font families hinzuzufügen. Das sind dann aber inline-Stile, was igitt ist ;)