Plugin für Google Fonts (ohne Besucher-IP zu verwenden)

Re:Later · 4. Januar 2020

Eine kleine Spielerei, obwohl mir das Thema eigentlich ziemlich wurst ist, wo meine Google Fonts abgeholt werden Paar Kunden von mir aber nicht.

Im Plugin kann man mehrere Google Fonts hinterlegen in der Art

Das sind die Links wie man sie auf Google Fonts angeboten bekommt.

der Art

Code

https://fonts.googleapis.com/css?family=

Auch kombinierte Links, die mehrere Fonts in einem enthalten können eingesetzt werden.

Ob es nun alles an Link-Möglichkeiten kann, keine Ahnung.

Das Plugin lädt die Fonts und zugehörige CSS herunter. Dabei verwendet es die IP des Servers, auf dem das Plugin läuft und nicht die IP des Besuchers, was ja "DSGVO-schlimm-schlimm-schlimm" ist.

Dafür verwendet es zwar den UserAgent, also die Kennung des Browsers (Firefox, Chrome oder sonstwas, Version, Betriebssystem usw.), des Besuchers, aber das ist ja nicht "DSGVO-schlimm-schlimm-schlimm" und ohne private Infos. Das macht es, um auch jeweils das passende unicode-range-Gedöns im CSS zu haben.

Fonts und CSSe werden in Joomla in Ordner media/fontsghsvs gespeichert, um beim nächsten mal wiederverwendet zu werden. Eine Verfallzeit kann man einstellen. Danach werden dann die Fonts und CSSe gelöscht und (ggf. neuere) Versionen des Fonts geladen und gespeichert.

Das Einbinden der Fonts und CSSe findet final also vom eigenen Server statt und nicht von Google.

Wie oft bei mir, sind noch nicht alle Hilfstexte vorhanden oder ins Deutsche übersetzt, aber das Plugin läuft seit > 1 Jahr ohne größere Probleme auf diversen Haus-und Wiesen-Seiten.

Was es nicht kann: Verhindern, dass dann irgendwo anders konfigurierte Fonts (z.B. in einer CSS-Datei) dann doch vom Google abgeholt werden.

Es bindet das Font-CSS inline in den <HEAD>...</HEAD> ein, sollte man noch wissen, also nicht die CSS-Datei per <link>. Keine Ahnung, warum ich das damals so gemacht habe

https://github.com/GHSVS-de/plg_system_importfontsghsvs
Dort unter Releases.

Fragen, Gemecker, Input, Sonstwas (Deutsch oder Englisch) unter

https://github.com/GHSVS-de/pl…m_importfontsghsvs/issues

oder via Kontaktemail ghsvs.de/kontakt

breaker · 5. Januar 2020

Schau auch mal hier

Damit ist ein Tracking seitens Google ausgeschlossen: https://google-webfonts-helper…ts/sarpanch?subsets=latin

Re:Later · 5. Januar 2020

Musst halt genau lesen oder vielleicht mal ausprobieren.

Das Plugin macht ja nichts anderes als die herokuapp-Seite

PLUS der Features:

Zitat von Re:Later

Das macht es, um auch jeweils das passende unicode-range-Gedöns im CSS zu haben.

Das meint CSSe exakt passend und optimiert für den jeweiligen UserAgent. Und da liefert Google Diverses aus.

Zitat von Re:Later

Danach werden dann die Fonts und CSSe gelöscht und (ggf. neuere) Versionen des Fonts geladen und gespeichert.

Zitat von Re:Later

Auch kombinierte Links, die mehrere Fonts in einem enthalten können eingesetzt werden.

Exakt das waren die Gründe, warum ich mich überhaupt damit beschäftigt habe.

Es gibt auch eine Einstellung, dass man die Standard-UserAgents verwenden kann, die dein Link auch verwendet. Damit werden dann alle Fonts exakt so runtergeladen (eot, ttf usw.), wie es auch die herokuapp-Seite macht. Je nach Einstellung dann aber mit Erneuerung der Version in eingestellten Zeitintervallen.

Mindestens aber eine Erleichterung für Leute, die dann Probleme oder Mühe damit haben, die Fonts und CSSe per FTP ins richtige Verzeichnis zu legen.

christine2 · 5. Januar 2020

Hallo Re:Later,

Zitat von Re:Later

Fragen, Gemecker, Input, Sonstwas (Deutsch oder Englisch) unter

https://github.com/GHSVS-de/pl…m_importfontsghsvs/issues

oder via Kontaktemail ghsvs.de/kontakt

Nee, Gemecker nicht, eher unter Sonstwas Ist ja (auch für mich zu Testzwecken als Spielerei) toll, dass Du Dein Plugin zur Verfügung stellst

Vorgeschichte: In 2018 hatte ich das mal gemacht, lt. Link von breaker. Hab da diese markanten Zeilen in einer CSS.

Jetzt Dein Plugin installiert und lt. screenshot ... / Arimo eingesetzt plus: Aktiv angeheuert.

Sehe es aber nirgends. Vermutung und Fragen zugleich:

Es handelt sich um eine Protostar Kopie. Ist das hier ev. relevant, dass in template/Stile eine font steht?

Bzw. kann dort stehen was will, weil lt. templateDetails.xml ich folgendes habe:

Code

<field name="googleFont"
    type="radio"
    class="btn-group btn-group-yesno"
    default="1"
    label="TPL_MEINNAME_FONT_LABEL"
    description="TPL_MEINNAME_FONT_DESC"
>
<option value="1">JYES</option>
    <option value="0">JNO</option>
    </field>

<field name="googleFontName" class="" type="text" default="Open+Sans"
    label="TPL_MEINNAME_FONT_NAME_LABEL"
    description="TPL_MEINNAME_FONT_NAME_DESC" />

Alles anzeigen

Liebe Grüße & Danke,

Christine

Edit: sehe erst jetzt neues Post.

Re:Later · 5. Januar 2020

Zu #3

Oder, die mit diversen Fonts erst mal rumprobieren wollen, weil man ja beliebig viele einbinden kann und deaktivieren oder nicht. Da wäre natürlich ein weiteres Feature hübsch, dass man seinen eigenen "font-family" definieren kann, der dann für die geladenen Fonts im CSS verwendet wird, so, dass man tatsächlich nur noch im Plugin umschalten muss und der Blah-Font über das selbe "font-family" wie der Blubb-Font angesprochen wird. Da ich selbst aber mit SCSS ode LESS arbeite, ist das kein Thema. Da stellt man einfach die entsprechenden font-Variablen einmalig um und gut ist's...

Re:Later · 5. Januar 2020

Zitat von christine2

Es handelt sich um eine Protostar Kopie. Ist das hier ev. relevant, dass in template/Stile eine font steht?

Den musst natürlich deaktivieren, wenn du keine Verbindung mit Google für deine Besucher haben willst. Egal, ob du nun das Plugin verwendest oder die Fonts selber runterlädst. Das meinte ich oben mit.

Zitat von Re:Later

Was es nicht kann: Verhindern, dass dann irgendwo anders konfigurierte Fonts (z.B. in einer CSS-Datei) dann doch vom Google abgeholt werden.

Da müsste man dann vermutlich einen HTTP-Header oder so verwenden, dass Verbindung mit den relevanten Google-Links verboten ist. Kenn ich mich aber zu wenig aus, um das jetzt schon einzubauen oder auszuprobieren.

Und gilt ja auch :

Zitat von Re:Later

obwohl mir das Thema eigentlich ziemlich wurst ist, wo meine Google Fonts abgeholt werden

Für mich ist das Teil lediglich eine extreme Arbeitszeit-Ersparnis. Das dämliche Runterladen-Einbinden-Ausprobieren-Andern-Runterladen-USW-Getue fällt weg.

Re:Later · 5. Januar 2020

Zitat von christine2

Hab da diese markanten Zeilen in einer CSS.

Jetzt Dein Plugin installiert und lt. screenshot ... / Arimo eingesetzt plus: Aktiv angeheuert.

Sehe es aber nirgends. Vermutung und Fragen zugleich:

Sehen tust du das, indem du den Font jetzt halt mal irgendwo in deinem CSS ausprobierst:

Der Firefox-Inspektor ist mittlerweile nett genug den tatsächlich verwendeten Font zu unterstreichen:

Welche font-family man für welchen Font zu verwenden hat, sagt einem Google

christine2 · 5. Januar 2020

Zitat von Re:Later

Für mich ist das Teil lediglich eine extreme Arbeitszeit-Ersparnis. Das dämliche Runterladen-Einbinden-Ausprobieren-Andern-Runterladen-USW-Getue fällt weg.

Will ich ja auch so hinkriegen, allerdings wird bei mir noch (nichts)? abgeholt

Glaube auch, dass ich es in meiner templateDetails.xml ändern müsste bzw. die derzeitige das "Abholen" verhindert?

Zum HTTP-Hheader, meinst ev. hier?: https://github.com/zero-24/plg_system_httpheader

Liebe Grüße

Christine

Scho wieder Edit: Huch, da kommen ja tolle screenshots. Danke.

Re:Later · 5. Januar 2020

Über die Inspektor-Netzwerkanalyse ist das etwas hieroglyphischer zu ermitteln, da die Fonts nicht mit "sprechenden" Dateinamen gespeichert werden. Sieht man dann aber am Krikelkrakel-Dateinamen und dem Pfad media/fontsghsvs/, ob sie geladen wurden

Und, wenn man dann zusätzlich das Log-Feature des Plugins verwendet, wird man auch hingewiesen, wenn was nicht geklappt hat.

Dabei habe ich gerade einen kleinen Bug (Notice durch das Log-Feature) gefunden. Danke also für die Rückfrage

Re:Later · 5. Januar 2020

Zitat von christine2

Glaube auch, dass ich es in meiner templateDetails.xml ändern müsste bzw. die derzeitige das "Abholen" verhindert?

Die beiden Einstellungen haben nichts miteinander zu tun. Das Plugin holt trotzdem ab und bindet ein.

Das blödste was passieren kann, ist, dass du im Plugin und im Template den selben Font einträgst. Dann holt sowohl das Plugin als auch das Protostar den Font ab. Das Protostar bindet es halt "unerwünscht" mit Besucher-Verbindung zum Google ein. Das Plugin lädt ihn herunter, speichert ihn bei dir und lädt ihn dann.

Hast denn die Einstellung "Enable front-end actions" auch aktiviert? Die ist deshalb da, weil man dann das Plugin aktivieren kann, obwohl sich noch gar nichts tut im Frontend. In einem deaktivierten Plugin funktionieren aber meine AJAX-Buttons nicht.

Weiters solltest im Seitenquelltext einen zusätzlichen Wust sehen. Mehr oder weniger umfangreich.

Das meinte ich mit

Zitat von Re:Later

Es bindet das Font-CSS inline in den <HEAD>...</HEAD> ein, sollte man noch wissen, also nicht die CSS-Datei per <link>. Keine Ahnung, warum ich das damals so gemacht habe

Re:Later · 5. Januar 2020

Zitat von Re:Later

Das blödste was passieren kann, ist, dass du im Plugin und im Template den selben Font einträgst. Dann holt sowohl das Plugin als auch das Protostar den Font ab. Das Protostar bindet es halt "unerwünscht" mit Besucher-Verbindung zum Google ein. Das Plugin lädt ihn herunter, speichert ihn bei dir und lädt ihn dann.

Um es zu ergänzen: Das Problem hast aber auch, wenn du brav deine Fonts via der herokuapp.com-Seite lokal einbindest und im Protostar nochmals drinnen hast.

Das Blöde beim Protostar ist, dass es das IMMER tut, wenn du "Google-Schriftname" was einträgst. Man muss sein CSS selbst bearbeiten/ergänzen und in der index.php dieses Gedöns selber umarbeiten/deaktivieren:

christine2 · 5. Januar 2020

Zitat von Re:Later

Hast denn die Einstellung "Enable front-end actions" auch aktiviert? Die ist deshalb da, weil man dann das Plugin aktivieren kann, obwohl sich noch gar nichts tut im Frontend. In einem deaktivierten Plugin funktionieren aber meine AJAX-Buttons nicht.

selbstnatürlich - gleich am Anfang nach Installation, nachdem ich gelesen hatte: "if NO, it will do nothing ...."

Zitat von Re:Later

Weiters solltest im Seitenquelltext einen zusätzlichen Wust sehen. Mehr oder weniger umfangreich.

Nö. diesen Wust sehe ich auf Deiner Seite

Deine Ergänzung #11 muss ich mir - eigentlich alles, noch studieren.

Liebe Grüße

Christine

breaker · 5. Januar 2020

Zitat von Re:Later

Sehen tust du das, indem du den Font jetzt halt mal irgendwo in deinem CSS ausprobierst:

Der Firefox-Inspektor ist mittlerweile nett genug den tatsächlich verwendeten Font zu unterstreichen:

Welche font-family man für welchen Font zu verwenden hat, sagt einem Google

Alles anzeigen

Die meisten Styles und Font-Angaben werden vom Bootstrap überschrieben, das müsstest du dann auch noch ändern... dort ist zum Teil aber der Font "FontAwesome" eingetragen, welcher die Pfeile für die Breadcrumb-Navi usw. bereitstellt.

Re:Later · 5. Januar 2020

Das sind ja Icon-Fonts und haben mit diesem Thema hier gar nichts zu tun. Hier geht es um Google Fonts.

Zitat von breaker

Die meisten Styles und Font-Angaben werden vom Bootstrap überschrieben, das müsstest du dann auch noch ändern... dort ist zum Teil aber der Font "FontAwesome" eingetragen, welcher die Pfeile für die Breadcrumb-Navi usw. bereitstellt.

Bootstrap ist das nicht unbedingt. FontAwesome wird von Bootstrap gar nicht im original verwendet und gibts auch nicht auf GoogleFonts. Wenn es also drin steht, ist das kein "original Bootstrap".

BS 3 liefert Glyphicons-Font und diesen lokal.

https://github.com/twbs/bootstrap/tree/v3.4.1/dist/fonts

https://www.ghsvs.de/programmi…ap-uebersicht-css-klassen

Bootstrap-2 (wenn überhaupt, nachträglich selbst reingepopelt) unter Joomla 3 und Joomla 3 "pur" verwenden den lokal liegenden Icomoon-Font.

https://www.ghsvs.de/programmi…-klassen-css-icomoon-font

Und in Bs 4 hat man Abschied davon genommen überhaupt einen Font beizulegen. Den kann man sich aber per SCSS recht ""bequem"" reinbasteln, muss ihn aber selbst hinterlegen auf seiner Seite (oder extern per CDN laden lassen) und die Pfade zum Font im SCSS entsprechend einstellen. Joomla 4 hat da ganz gute Vorlagen dabei. Und, um die alten Icomoon Font Auszeichnungen auf FontAwesome umzuleiten, ein brauchbares "Übersetzungs-SCSS" zum Spicken dabei, so, dass man nicht alles im HTML ändern muss.

Und für Bootstrap 5 ist ein eigener Icon-SVG-Font geplant. Ob der dann aber direkt beigelegt wird, weiß ich nicht.

https://github.com/twbs/icons

Re:Later · 5. Januar 2020

Zitat von breaker

Die meisten Styles und Font-Angaben werden vom Bootstrap überschrieben

Wahrscheinlich habe ich dich aber auch falsch verstanden.

Deshalb meine Idee, für die ich aber viel zu faul bin:

Zitat von Re:Later

Da wäre natürlich ein weiteres Feature hübsch, dass man seinen eigenen "font-family" definieren kann, der dann für die geladenen Fonts im CSS verwendet wird, so, dass man tatsächlich nur noch im Plugin umschalten muss und der Blah-Font über das selbe "font-family" wie der Blubb-Font angesprochen wird. Da ich selbst aber mit SCSS ode LESS arbeite, ist das kein Thema. Da stellt man einfach die entsprechenden font-Variablen einmalig um und gut ist's...

Kurz im CSS steht unverändert font-family: Sonstwas.

Mein Plugin fügt dass Font-CSS so ein, dass aber der Irgendwas-Font verwendet wird

Code

@font-face {  font-family: 'Irgendwas'; ... src: local('Irgendwas'), local('Irgendwas')

Das ist aber schon wieder mit so vielen Unwägbarkeiten bei der Pflege durch User verbunden und ekligen Erklärbär-Aktionen, dass ich noch weniger Lust habe

Re:Later · 5. Januar 2020

Zitat von christine2

Nö. diesen Wust sehe ich auf Deiner Seite

Dann aktiviere das Log-Feature und vergiss erst mal dein Protostar-Problem. Vielleicht auch Cache aktiv oder JCH, dass "alte" Seite geladen wird. Ich habe eben eine neue Version vö., wo die PHP Notices korrigiert wurden, nur nebenbei.

Kannst auch schaun, ob der Ordner media/fontsghsvs überhaupt angelegt wurde und Unterordner hat.

Ob der Ordner geschrieben werden darf vom Joomla kannst testen mit "Silent Front-End: NEIN", Frontend aufrufen, ob Fehler-Message angezeigt wird.

christine2 · 5. Januar 2020

Zitat von Re:Later

Dann aktiviere das Log-Feature und vergiss erst mal dein Protostar-Problem. Vielleicht auch Cache aktiv oder JCH, dass "alte" Seite geladen wird. Ich habe eben eine neue Version vö., wo die PHP Notices korrigiert wurden, nur nebenbei.

Wegen "Protostar-Problem vergessen". Wollte vor Deinem jetzigen post, folgendes melden & berichte es trotzdem:

Zitat

Das Blöde beim Protostar ist, dass es das IMMER tut, wenn du "Google-Schriftname" was einträgst. Man muss sein CSS selbst bearbeiten/ergänzen und in der index.php dieses Gedöns selber umarbeiten/deaktivieren:

Hab das damals wohl in der index.php - siehe screenshot #11, dies rausgelöscht und in der user.css steht:

Code

/*webfont 16jun2018*/
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

Alles anzeigen

JCH hab ich nicht, Cache aktiv wohl auch nicht.

Zitat

Kannst auch schaun, ob der Ordner media/fontsghsvs überhaupt angelegt wurde und Unterordner hat.

Log-Feature hatte ich auch schon geschaut. Da ist nix. Sogar der Update-Server hatte funktioniert

Liebe Grüße & Danke für Deine Infos.

Sorry für Kuddelmuddel, aber vielleicht erklärt obiges meine Ist-Situation bzw. wie ich es seit damals habe.

Christine

Re:Later · 5. Januar 2020

Musst mir mal Zugangsdaten zu deiner Spielwiese mit dem Plugin zuschicken. Hab die nicht mehr.

Zitat von christine2

Sogar der Update-Server hatte funktioniert

Sollte er noch mal klingeln, einfach noch mal machen, das Update. Hatte da einen Fehler drin mit Version. Sonst aber nichts. Ist schon vorher geupdatet.

Re:Later · 5. Januar 2020

Zitat von Re:Later

Musst mir mal Zugangsdaten zu deiner Spielwiese mit dem Plugin zuschicken. Hab die nicht mehr.

Per privater Nachricht, bitte. Meine Mailserver sind wegen "krassem" Spam mittlerweile ziemlich dicht.

astrid · 5. Januar 2020

Re:Later Ich habe mir dein Plugin gerade angesehen. Vielen Dank fürs Teilen.

Verstehe ich das richtig: Dein Schwerpunkt liegt darin Schriftarten lokal verfügbar zu haben. Um das Deaktivieren bereits vorhandener Aufrufe im Template oder Dritterweiterungen muss man sich selbst kümmern, oder?

Aus gegebenem Anlass: Vielleicht magst du einen Hinweis in die Logdatei einfügen, wenn eine Schriftart erfolgreich heruntergeladen wurde. Wenn man nicht richtig lesen kann und in media/plg_system_importfontsghsvs/fontsghsvs anstelle von media/fontsghsvs sucht, findet man die Schriften schneller.