usa-reise.de Forum

Autor Thema: Google Fonts jetzt intern gespeichert  (Gelesen 6133 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Thomas

  • Master of Disaster
  • Administrator
  • Diamond Member
  • *****
  • Beiträge: 10.167
    • http://www.usa-reise.de
Google Fonts jetzt intern gespeichert
« am: 02.09.2022, 16:27 Uhr »
Hallo zusammen,

bislang wurde einer der hier im Forum verwendeten Fonts von Google heruntergeladen. Ich habe das eben geändert, ab sofort liegt dieser auf meinem Server.

Sollten irgendwelche komischen Effekte im Zusammenhang mit einer fehlenden Schriftart auftreten lasst es mich bitte wissen.

Danke!
Viele Grüße,

Thomas (webmaster@usa-reise.de)
Amerika von Fans für Fans

Mehr usa-reise.de: Übersicht | Fotogalerie - Social Media: Facebook | Instagram | Twitter

Jack Black

  • Platin Member
  • *****
  • Beiträge: 3.114
Antw: Google Fonts jetzt intern gespeichert
« Antwort #1 am: 02.09.2022, 17:47 Uhr »
Ich habe das eben geändert, ab sofort liegt dieser auf meinem Server.

Ist das denn erlaubt? Nicht dass Google Dir die Hölle heiß macht. Oder ist das ein freier Font?
Bornholm: '88, '91, '94, '96, '03, '10, '20
Korsika: '83, '84, '85, '87, '89, '90, '91, '92, '93, '95, '97
USA: '96, '97, '99, '02, '05, '06, '07, '08, '09, '10, '11 (2x), '12, '13, '14, '15, '17, '18 , '19, '24
Kanada: '08

Thomas

  • Master of Disaster
  • Administrator
  • Diamond Member
  • *****
  • Beiträge: 10.167
    • http://www.usa-reise.de
Antw: Google Fonts jetzt intern gespeichert
« Antwort #2 am: 02.09.2022, 20:05 Uhr »
Hallo Jack,

ja, das ist erlaubt. Die Fonts sind frei, es gibt sogar ein Tool damit man sich die diversen Fontdateien in allen Formaten (ttf. woff, woff2, ...) runterladen und auch das passende css File erzeugen kann.

Wird je nach Template und Plugin unterschiedlich gehandhabt, der Download von Google ist dahingehend praktisch, dass man sich im Backend des Templates z.B. einfach aus der Fontliste einen anderen Font wählt und nichts manuell kopieren etc. muss.

Das Thema ist nun durch die aktuelle Abmahnwelle die durchs Web rollt aktuell geworden (wobei nicht einmal sicher ist, dass das überhaupt abmahnbar ist).

Wer seine Homepage testen möchte: https://sicher3.de/google-fonts-checker/ - vor allem wer Joomla oder Wordpress einsetzt sollte das mal tun, manchmal ist das Template "sauber" aber Plugins laden hinterrücks Fonts nach.
Viele Grüße,

Thomas (webmaster@usa-reise.de)
Amerika von Fans für Fans

Mehr usa-reise.de: Übersicht | Fotogalerie - Social Media: Facebook | Instagram | Twitter

Doreen & Andreas

  • Diamond Member
  • *****
  • Beiträge: 8.002
    • http://www.neef-online.de
Antw: Google Fonts jetzt intern gespeichert
« Antwort #3 am: 05.09.2022, 09:00 Uhr »
Bei mir (ich benutze die alte Optik) wird das gesamte Forum jetzt mit einer anderen, kleineren Schriftart angezeigt.
Die ist zwar, wenn ich den Browserzoom eine Stufe erhöhe, ganz gut lesbar, aber dennoch ist das Erscheinungsbild des Forums jetzt erst einmal etwas gewöhnungsbedürftig.
Viele Grüße,
Andreas
------------------------------
http://www.neef-online.de

Thomas

  • Master of Disaster
  • Administrator
  • Diamond Member
  • *****
  • Beiträge: 10.167
    • http://www.usa-reise.de
Antw: Google Fonts jetzt intern gespeichert
« Antwort #4 am: 05.09.2022, 09:48 Uhr »
Hallo Andreas,

danke für den Hinweis, da werfe ich nochmal einen Blick drauf, eigentlich hätte sich nur das neue Layout ändern dürfen, da ich nur die voreingestellte Version geändert habe.
Viele Grüße,

Thomas (webmaster@usa-reise.de)
Amerika von Fans für Fans

Mehr usa-reise.de: Übersicht | Fotogalerie - Social Media: Facebook | Instagram | Twitter

Thomas

  • Master of Disaster
  • Administrator
  • Diamond Member
  • *****
  • Beiträge: 10.167
    • http://www.usa-reise.de
Antw: Google Fonts jetzt intern gespeichert
« Antwort #5 am: 05.09.2022, 23:28 Uhr »
Hallo Andreas,

ich habe mir die Layouts und meine Änderungen eben nochmal angesehen - ich habe lediglich im "neuen" Layout eine Schriftart auf den eigenen Server umgezogen.

Das alte Layout hat keine Google-Fonts verwendet und ich habe das auch nicht angefasst, habe mir jetzt extra nochmal die Zeitstempel der Dateien angesehen (spätnachts getane Änderungen vergisst man manchmal am nächsten Morgen...).

Entsprechend bin ich aktuell jetzt etwas ratlos. Ich begebe mich in den nächsten Tagen aber sowieso nochmal an die Werkbank, da ich alle Zeichensätze, Logos intern nochmal an einen zentralen Ort verschieben möchte, da schaue ich da nochmal drauf.
Viele Grüße,

Thomas (webmaster@usa-reise.de)
Amerika von Fans für Fans

Mehr usa-reise.de: Übersicht | Fotogalerie - Social Media: Facebook | Instagram | Twitter

Doreen & Andreas

  • Diamond Member
  • *****
  • Beiträge: 8.002
    • http://www.neef-online.de
Antw: Google Fonts jetzt intern gespeichert
« Antwort #6 am: 06.09.2022, 07:57 Uhr »
Es muß ja auch nicht unbedingt etwas mit Deinen letzten Änderungen zu tun haben; liegt doch aber nahe.

Im Frame links sehe ich übrigens noch den Font wie bisher, in den Threads ist aber ein anderer, neuer Font.

Viele Grüße,
Andreas
------------------------------
http://www.neef-online.de

Jack Black

  • Platin Member
  • *****
  • Beiträge: 3.114
Antw: Google Fonts jetzt intern gespeichert
« Antwort #7 am: 06.09.2022, 21:32 Uhr »
Ich habe es jetzt auch mal getestet. Wenn man als User das Thema "bootUS" benutzt (das neue Default Thema) und sich damit einlogged, dann wird hier im Forum der Font von Sans Serif auf Serif verändert.

Wenn man nicht eingelogged ist, wird dasselbe Thema mit einem serifenlosen Font dargestellt,
Bornholm: '88, '91, '94, '96, '03, '10, '20
Korsika: '83, '84, '85, '87, '89, '90, '91, '92, '93, '95, '97
USA: '96, '97, '99, '02, '05, '06, '07, '08, '09, '10, '11 (2x), '12, '13, '14, '15, '17, '18 , '19, '24
Kanada: '08

mrh400

  • Diamond Member
  • *****
  • Beiträge: 15.747
  • work is the curse of the drinking classes -O.Wilde
Antw: Google Fonts jetzt intern gespeichert
« Antwort #8 am: 06.09.2022, 21:58 Uhr »
Ich habe es jetzt auch mal getestet. Wenn man als User das Thema "bootUS" benutzt (das neue Default Thema) und sich damit einlogged, dann wird hier im Forum der Font von Sans Serif auf Serif verändert.

Wenn man nicht eingelogged ist, wird dasselbe Thema mit einem serifenlosen Font dargestellt,
Kann ich - zumindest am Tablet - nicht nachvollziehen. Auch bootUS wird serifenlos dargestellt.
Gruß
mrh400

Jack Black

  • Platin Member
  • *****
  • Beiträge: 3.114
Antw: Google Fonts jetzt intern gespeichert
« Antwort #9 am: 06.09.2022, 22:33 Uhr »
zumindest am Tablet

Das bestätigt meinen Verdacht, dass es etwas mit dem "responsiven" Code zu tun hat. Ich kann hier auch keine Bilder hochladen, wenn ich "Erweiterte Optionen" anklicke, verennt sicht das Scipt total. Und in der Forenansicht ist oben links ein CSS Fragment zu sehen, was da nicht hingehört. Ich muss es auf meine eigene Seite hochladen, um es überhaupt zeigen zu können.

Bornholm: '88, '91, '94, '96, '03, '10, '20
Korsika: '83, '84, '85, '87, '89, '90, '91, '92, '93, '95, '97
USA: '96, '97, '99, '02, '05, '06, '07, '08, '09, '10, '11 (2x), '12, '13, '14, '15, '17, '18 , '19, '24
Kanada: '08

Thomas

  • Master of Disaster
  • Administrator
  • Diamond Member
  • *****
  • Beiträge: 10.167
    • http://www.usa-reise.de
Antw: Google Fonts jetzt intern gespeichert
« Antwort #10 am: 06.09.2022, 23:36 Uhr »
Hallo zusammen,

danke fürs Testen und euer Feedback.

Angefasst habe ich nur das neue Layout, das unter dem Namen "usa-reise.de 2.0" fungiert und auch das Default-Layout für alle Benutzer ist. bootUS ist das vorherige Thema, was aktuell noch von einigen wenigen (<10) Benutzern verwendet wird.

Im neuen Layout ist nur eine einzige Schrift betroffen, die per Include nun statt von Google von meinem Server geholt wird. Die Stylesheets der anderen beiden Layout (bootUS - das vorherige und das SMF-Standard-Layout) habe ich nicht angepasst, da diese keine Google-Fonts verwenden bzw. diese vorher schon lokal abgelegt hatten.

@Jack Black: den Schnipsel, den Du oben links in dem alten Layout siehst könnte auch ein Fragment des alten Ausklapp-Menüs sein, das ja früher in der Ecke zu finden war.

Ich schaue mir das gerne auch noch weiter an, von mir aus drehe ich die Änderung auch mal in einem vorher abgesprochenen Zeitfenster zurück. Ich will sowieso noch etwas am Template schrauben, gibt ja auch noch ein paar kleine offene Baustellen im neuen Layout.

Passiert dann nächste Woche, Do./Fr. muss ich meinen Urlaub für ein Offsite unterbrechen.
Viele Grüße,

Thomas (webmaster@usa-reise.de)
Amerika von Fans für Fans

Mehr usa-reise.de: Übersicht | Fotogalerie - Social Media: Facebook | Instagram | Twitter

Jack Black

  • Platin Member
  • *****
  • Beiträge: 3.114
Antw: Google Fonts jetzt intern gespeichert
« Antwort #11 am: 07.09.2022, 13:25 Uhr »
So, ich habe mal ein wenig Ursachenforschung betrieben.

1) Dieser verstümmelte CSS Tag oben links ist AUCH auf dem Tablet zu sehen, das hängt also nicht vom Browser oder so ab. Ich habe im Quellcode (HTML) einfach mal nachgeschaut, da wird definitiv Schrott generiert im BODY-Tag. Hier ist die entscheidende Zeile aus dem Source:

<script type="text/javascript" src="https://ezodn.com/detroitchicago/consentsettings.js?cb=2"></script></head><body>&#39;, &#34;&#34;, {
wrapCss: &#34;margin: 0; width: calc(100vw - 30px); height: calc(100vh - 30px);&#34;
});
});
});

Wie man in der ersten Zeile sieht, wird dort (weit hinten) das BODY-Tag "<body>" eröffnet. Direkt danach folgen diverse Sonderzeichen a la &#39;, &#34;&#34;, (das ist die Unicode Darstellung der Zeichen Singlequote ' gefolgt von zwei Kaufmanns-Und &), da ist sicherlich irgendein Default-Wert leer geblieben, dann folgt die geschweifte Klammer auf und in der nächsten Zeile steht das "wrapCss", was man dann zu sehen bekommt). Das ist ziemlich schlimmer Code, welcher wilde Fehler dafür verantwortlich ist, kann ich von hier aus nicht sagen.

2) Die Fonts-Geschichte ist sehr einfach gelöst, hat mit responsive (vielleicht?!) doch nichts zu tun (oder vielleicht doch), jedenfalls wird die Forenansicht mit dem Font "Open Sans" generiert und zwar so, dass der Font vom Browser (= vom Betriebssystem des Clients) zur Verfügung gestellt werden muss. Anscheinend gehört "Open Sans" zum Lieferumfang von Android (oder irgendeinem Standardwerkzeug unter Android), aber beispielsweise Linux oder auch Windows liefert diesen Font nicht aus. Fehlende Fonts werden mit dem Default Font aus den internen Browser Einstellungen ersetzt, das ist anscheinend bei den meisten irgendein Serifen Font.

Man kann Open Sans als TrueType Font im Internet herunterladen und sich auf dem Rechner installieren - danach sieht auch auf dem Laptop das Forum wieder "normal" aus (mit Abstrichen, der generierte Code aus Punkt 1) bleibt natürlich erhalten).
Bornholm: '88, '91, '94, '96, '03, '10, '20
Korsika: '83, '84, '85, '87, '89, '90, '91, '92, '93, '95, '97
USA: '96, '97, '99, '02, '05, '06, '07, '08, '09, '10, '11 (2x), '12, '13, '14, '15, '17, '18 , '19, '24
Kanada: '08

Thomas

  • Master of Disaster
  • Administrator
  • Diamond Member
  • *****
  • Beiträge: 10.167
    • http://www.usa-reise.de
Antw: Google Fonts jetzt intern gespeichert
« Antwort #12 am: 08.09.2022, 00:29 Uhr »
Hallo Jack,

vielen Dank für die Analyse.

1, gebe ich weiter, das kommt von Ezoic.

2, Open Sans (Pro) ist tatsächlich ein Google-Font, den ich lokal umgezogen habe und der jetzt auf einem meiner Webspaces liegt, vielleicht ist das tatsächlich die Ursache. Das Komische ist, dass dieser Font nur von dem neuen Layout verwendet wird, die css-Stylesheets der beiden anderen Templates habe ich nicht angefasst.

Ich werde den Font mal direkt hier in das Template-Verzeichnis verschieben ohne externe Aufrufe, vielleicht löst das dann das Problem. Wäre sehr überraschend, aber experimentelle IT hat man ja öfters mal.

Das Ganze wird aber frühestens im Laufe des Wochenendes passieren, Do./Fr. bin ich wie erwähnt in Klausur.
Viele Grüße,

Thomas (webmaster@usa-reise.de)
Amerika von Fans für Fans

Mehr usa-reise.de: Übersicht | Fotogalerie - Social Media: Facebook | Instagram | Twitter

Jack Black

  • Platin Member
  • *****
  • Beiträge: 3.114
Antw: Google Fonts jetzt intern gespeichert
« Antwort #13 am: 08.09.2022, 12:58 Uhr »
2, Open Sans (Pro) ist tatsächlich ein Google-Font, den ich lokal umgezogen habe und der jetzt auf einem meiner Webspaces liegt, vielleicht ist das tatsächlich die Ursache. Das Komische ist, dass dieser Font nur von dem neuen Layout verwendet wird, die css-Stylesheets der beiden anderen Templates habe ich nicht angefasst.

Ich werde den Font mal direkt hier in das Template-Verzeichnis verschieben ohne externe Aufrufe, vielleicht löst das dann das Problem. Wäre sehr überraschend, aber experimentelle IT hat man ja öfters mal

Das Problem ist der CSS Code. Der ist in Plain Text lesbar und so wie es im Dokument steht, ist das die Standardkonfiguration für Fonts, die beim Client installiert sein müssen. Wenn man einen Webfont in einem HTML Dokument benutzen will, muss man eine andere Syntax benutzen, insbesondere muss man einen "src"-Tag füllen, der auf die physikalische Fontsdatei auf irgendeinem Server verweist. Das sehe ich da aber nicht und dann kann der Browser ja auch nicht wissen, dass es in irgendeinem Template Verzeichnis bei usa-reise.de eine Fontsdatei gibt, die er für den Font laden soll. Das kann ja nicht gehen.

Denkbar ware es natürlich, dass der CSS Code auch dynamisch generiert wird und bei Vorhandensein bestimmter Webfonts im Serververzeichnis der entsprechende Code generiert wird. Dagegen spricht allerdings, dass die Dateien mit den Webfonts Container sind, die nicht den gleichen Namen wie der Fonts selbst haben müssen. Irgendwie muss man dem PHP Generator ja mitteilen, wie die Fontsdatei heißt, wo der Open Sans Font abgespeichert ist.

Ich persönlich glaube nicht, dass es damit getan ist, einfach Fonts vom Google Server herunterzuladen und auf einen anderen Server in irgendein Templateverzeichnis zu kopieren. Irgendwelche Konfigurationen muss man sicherlich auch noch vornehmen.

P.S.: Ich benutze in Chrome das Entwicklerwerkzeug für die HTML Dokumente, das ist eine Art HTML Debugger. Der zeigt mir auf, dass im Dokument https://forum.usa-reise.de/Themes/bootUs-v1/css/bootstrap.css auf Zeile 281 der CSS Code für den body-Tag wie folgt definiert ist:

body {
  font-family: 'Open Sans';
  font-size: 14px !important;
  line-height: 1.42857143;
  color: #333;
  background-color: #ebebeb;
}

Wie Du siehst, ist das der stinknormale Tag font-family für den Zeichensatz, dahinter steht der Wert 'Open Sans', das ist der interne Name des Fonts, wie er beispielsweise auch in Office Dokumenten heißen würde. Der muss als lokal beim Client installiert sein, dort, wo der Browser läuft.

Die Einrichtung und Definition von Webfonts hat eine andere Syntax, hier mal ein Codebeispiel aus einem Tutorial:

@font-face {
font-family: "CustomFont";
src: url("https://yoursite.com/css/fonts/CustomFont.eot");
src: url("https://yoursite.com/css/fonts/CustomFont.woff") format("woff"),
url("https://yoursite.com/css/fonts/CustomFont.otf") format("opentype"),
url("https://yoursite.com/css/fonts/CustomFont.svg#filename") format("svg");
}

Du siehst die Angabe der Tags "src" und "url", die zusätzlich zur font-familiy gemacht werden müssen. Diese Tags verweisen physikalisch auf die Server und die Dateien, wo die Container (hier CustomFont.woff beispielsweise) physikalisch liegen. So etwas müßte auch im HTML Code dieses Forums zu finden sein, wenn die Fonts von usa-reise.de geladen werden sollen, also ungefähr so:

@font-face {
font-family: "Open Sans";
src: url("https://forum.usa-reise.de/Themes/bootUs-v1/fonts/OpenSans.woff" format("woff");
...
}
Bornholm: '88, '91, '94, '96, '03, '10, '20
Korsika: '83, '84, '85, '87, '89, '90, '91, '92, '93, '95, '97
USA: '96, '97, '99, '02, '05, '06, '07, '08, '09, '10, '11 (2x), '12, '13, '14, '15, '17, '18 , '19, '24
Kanada: '08

Thomas

  • Master of Disaster
  • Administrator
  • Diamond Member
  • *****
  • Beiträge: 10.167
    • http://www.usa-reise.de
Antw: Google Fonts jetzt intern gespeichert
« Antwort #14 am: 09.09.2022, 00:00 Uhr »

Ich persönlich glaube nicht, dass es damit getan ist, einfach Fonts vom Google Server herunterzuladen und auf einen anderen Server in irgendein Templateverzeichnis zu kopieren. Irgendwelche Konfigurationen muss man sicherlich auch noch vornehmen.

@font-face {
font-family: "CustomFont";
src: url("https://yoursite.com/css/fonts/CustomFont.eot");
src: url("https://yoursite.com/css/fonts/CustomFont.woff") format("woff"),
url("https://yoursite.com/css/fonts/CustomFont.otf") format("opentype"),
url("https://yoursite.com/css/fonts/CustomFont.svg#filename") format("svg");
}

Du siehst die Angabe der Tags "src" und "url", die zusätzlich zur font-familiy gemacht werden müssen. Diese Tags verweisen physikalisch auf die Server und die Dateien, wo die Container (hier CustomFont.woff beispielsweise) physikalisch liegen. So etwas müßte auch im HTML Code dieses Forums zu finden sein, wenn die Fonts von usa-reise.de geladen werden sollen, also ungefähr so:

@font-face {
font-family: "Open Sans";
src: url("https://forum.usa-reise.de/Themes/bootUs-v1/fonts/OpenSans.woff" format("woff");
...
}

Hallo Jack,

danke nochmals für die Details - die url und src Parameter habe ich auch beim lokalen Umzug der Fonts (bzw. des Fonts, war ja nur einer) verwendet.

Es gibt ein Webtool, bei dem man den Namen des Google-Fonts eingibt sowie den neuen lokalen Pfad, dann wird das entsprechende css-Stylesheet generiert. URL und src stehen im Stylesheet, nicht im HTML-Code.

Nochmal an dieser Stelle: ich habe das bootUs-Template nicht angefasst, es hat keinen Font verwendet, die der von Google nachgeladen wurde, alle Fonts in diesem Template waren bereits lokal.

Geändert habe ich nur das aktuelle usa-reise.de 2.0 (intern: usa-reise.de-vVide) und da auch nur einen Font ersetzt (mit url und src). Deswegen wundere ich mich ja, dass es plötzlich eine Änderungen in der Optik des alten Templates gegeben hat wo sich dort nichts geändert hat

Am Wochenende mehr, ich bin noch auf der Klausurtagung und erst Freitag abend wieder am heimischen Rechner.
Viele Grüße,

Thomas (webmaster@usa-reise.de)
Amerika von Fans für Fans

Mehr usa-reise.de: Übersicht | Fotogalerie - Social Media: Facebook | Instagram | Twitter