WBCE Home | WBCE Hilfe | WBCE Addon Repository | Impressum | Datenschutz

WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 29.05.2018 22:00:17

ice
Member

Google Fonts - DSE / Alternativen

Was mir bei den meisten Generatoren auffällt:

Es fehlen Hinweise zu Google Webfonts und Google Maps. Setzt man sowas ein, hat man schon eine Lücke.
Diese Hinweise habe ich bisher nur bei Datenschutzerklärungen gesehen, die gegen Geld verfügbar sind.

Ich habe hier eine schöne Anleitung gefunden, wie man die Webfonts selber auf seiner Seite hostet (ist zwar für Wordpress, im Grunde ist es aber das gleiche): https://wp-ninjas.de/wordpress-google-fonts

Last edited by ice (29.05.2018 22:13:13)

Offline

#2 30.05.2018 05:52:19

screamindan
Member

Re: Google Fonts - DSE / Alternativen

https://www.activemind.de/datenschutz/d … generator/
Bei Activemind kann man beides mit ankreuzen.

Online

Liked by:

ice

#3 30.05.2018 08:01:33

florian
Projektmanagement und Support WBCE CMS

Re: Google Fonts - DSE / Alternativen

Ich hab's mal vom Ursprungsthread abgetrennt, weil dieser als Linkliste zu Datenschutzerklärungen gedacht ist.
Zum Thema Webfonts: der o.g. Artikel ist - nach groben Überfliegen - leider zu Wordpress-Spezifisch. Aber die Schriften selbst zu hosten ist nicht so schwierig.

1) Herunterladen der Schrift

Auf www.fontsquirrel.com stehen so ziemlich alle Schriften, die es bei Google Fonts gibt, zum Download zur Verfügung (und noch etliche mehr).
Achtung: Auf die Lizenz achten. Nicht alle dort verfügbaren Schriften dürfen in Webfonts konvertiert werden oder es muss zumindest (z.B. im Impressum) die Quelle angegeben werden.
Das gilt übrigens auch für jegliche Schriften aus anderen Quellen, die Verwendbarkeit als Webfont ist nicht selbstverständlich. Vorsicht auch mit Downloadportalen, bei denen Schriften, die bei myfonts.com oder linotype.com richtig Geld kosten, scheinbar gratis angeboten werden. Davon sollte man lieber die Finger lassen.

2) Umwandeln in Webfont

Nach dem Download liegt die Schrift im TrueType- oder OTF-Format vor, das nützt fürs Web aber erstmal noch nichts. Die Schrift muss nun in das browserspezifische Schriftenformat WOFF umgewandelt werden. (SVG, EOT usw. braucht man heutzutage nicht mehr).
Praktischerweise gibt es auf Fontsquirrel ein Tool, um Schriften zu konvertieren.
Unpraktischerweise verarbeitet dieser maximal vier Einzeldateien und noch unpraktischerweise arbeitet deren Server meist am Limit, sodass es gerne mal eine Viertelstunde dauern kann, bis die Schriften hochgeladen, verarbeitet und zum Download bereitgestellt werden. Wenn man es dennoch mit dem Tool probiert, auf "Expert..." klicken und in der Zeile "CSS" recht weit unten in der Mitte "Style Link" anklicken.
Eine gute Alternative scheint mir transfonter.org zu sein, hier einfach auf Add Fonts klicken, Schriften hochladen, auf Convert klicken, Zip runterladen. Alle Voreinstellungen dort sind sinnvoll und brauchen i.d.R. nicht geändert zu werden.
Achtung: Es ist nicht legal, dies mit kommerziellen Schriften durchzuführen! Man darf also nicht die FF Meta, die Scala Sans oder sonstige (teure) Modeschriften einfach so in Webfonts umwandeln und auf seiner Seite verwenden.

3) Hochladen

Im Zip sind nun - je nach Generator und Einstellungen - ein Stylesheet und eine oder mehrere woff-/woff2-Dateien. Letztere sind die Schriften, die per FTP auf den Server geladen werden müssen - ich mache das immer so, dass ich ein Untervezeichnis "fonts" im Verzeichnis des vewendeten Templates anlege und da die Schriften ablege, damit es übersichtlich bleibt und nicht lauter Schriften und Bilder usw. durcheinander schwirren. Aber das ist natürlich Geschmackssache.
Nun muss noch die eigentliche Schrifteinbettung erfolgen. Schaut man in das von den Konvertierungstools erzeugte Stylesheet, sieht das in etwa so aus:

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Bold.woff2') format('woff2'),
        url('Roboto-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-BoldItalic.woff2') format('woff2'),
        url('Roboto-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Italic.woff2') format('woff2'),
        url('Roboto-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Regular.woff2') format('woff2'),
        url('Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Diesen Code kann man nun entweder ganz an den Anfang ins bestehende Template-Stylesheet kopieren, muss dann aber die url-Angaben relativ zum Speicherort des Stylesheet entsprechend anpassen.
Wenn das Template-Stylesheet im Template-Ordner liegt und die Schriftartendateien in /fonts, müssen also alle URL-Angaben geändert werden zu
url('fonts/Roboto-Regular.woff2') usw.
Gibt es ein Verzeichnis /assets und darin dann /css, /fonts usw. und liegt das Template-Verzeichnis in /css, muss die url-Angabe geändert werden zu
url('../fonts/Roboto-Regular.woff2') usw.

Die einfachere Möglichkeit ist, das vom Schriftenkonvertierungstool erzeugte Stylesheet mit ins Schriftenverzeichnis auf dem Server zu kopieren und es im selben Verzeichnis wie die Schriften abzulegen.

4) Initialisieren

Nun muss noch darauf geachtet werden, das die Webfonts mit dem richtigen Namen angesprochen werden. D.h. die font-family-Anweisungen im Stylesheet des Templates müssen zu den @font-face-Deklarationen passen.

Beispiel: Im Template-Stylesheet steht

body {
  font-family:"Roboto";
}

Im vom Schriften-Konvertierungstool generierten Stylesheet steht jedoch

@font-face {
    font-family: 'roboto_regular';
    src: url('Roboto-Regular.woff2') format('woff2'),
        url('Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Da passt was noch nicht - d.h. entweder müsste bei der @font-face-Anweisung
    font-family: 'roboto_regular';
geändert werden zu
    font-family: 'Roboto';
...oder aber im Template-Stylesheet müsste(n) umgekehrt die font-family-Anweisung(en) entsprechend der @font-face-Angaben geändert werden.

5) Aufrufen

In der index.php und (Achtung, Fallstrick!) ggf. den Template-Stylesheets (u.a. editor.css !) müssen nun die Aufrufe der Google Fonts entfernt werden. D.h. in der index.php darf nicht mehr so etwas stehen wie

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

und in den Stylesheets darf nicht mehr so etwas stehen wie

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic);

Wenn die font-face-Anweisungen für die selbst gehosteten Fonts nicht in die bestehende Stylesheet-Datei integriert wurden, müssen die Links zu Google Fonts durch die Links zu den erzeugten neuen Schriftdefinitionen ersetzt werden, also z.B. wenn die neue CSS-Datei "fonts.css" heißt und im Unterverzeichnis /fonts des Template-Verzeichnisses liegt, muss dann
- in der index.php des Templates stehen:

<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/fonts/fonts.css" />

- in der editor.css stehen:

@import url(fonts/fonts.css);

Wenn alles korrekt ist, sollte nun die Schrifteinbindung lokal erfolgen. Leider werden die Schriften teilweise etwas unschön gerendert, d.h. man kann mit geübtem Auge durchaus Unterschiede zwischen Google Fonts und selbst gehosteten/konvertierten Schriften feststellen.
Ob die Schrifteinbindung tatsächlich lokal erfolgt, lässt sich in Firefox mit F12 und Aufruf der Netzwerkanalyse und F5 Neu laden der Seite feststellen. Hier darf dann bei Host nirgends mehr "fonts.gstatic.com" o.ä. erscheinen.

6) Hinweise

- Für das Funktionieren der Schrifteinbettung ist es unabdingbar, URL-Weiterleitungen auf die Hauptdomain einzurichten. Stichwort "Same origin policy": Schriften werden nur von derselben Domain geladen - und eine Adresse mit www ist technisch gesehen eine andere (Sub-)Domain als die Domain ohne www und https und http machen natürlich auch einen Unterschied.

- Damit das Laden der Webfonts für alle Schriftschnitte korrekt erfolgt, d.h. für fett und kursiv tatsächlich der passende Webfont und nicht irgend eine vom Browser typografisch furchtbar zurechtgerenderte Hilfskrücke erscheint, ist der "Style Link" (Fontsquirrel) bzw. "Family Support" erforderlich, denn diese Anweisungen sorgen dafür, dass bei den font-face-Deklarationen alle Schriftschnitte denselben font-family-Namen erhalten und die jeweiligen font-weight / font-style-Anweisungen ergänzt werden.

- Die meisten Schriften stehen unter einer Lizenz, die es nicht erlaubt, diese in ein Template-Bundle zu integrieren. Deshalb sind in den ganzen WBCE-Templates noch die "bösen" Google-Fonts.

- Wer Webfonts von kommerziellen Schriften bei myfonts.com usw. lizenziert hat, muss diese (leider) auch weiterhin "nach Hause telefonieren" lassen. Ein entsprechender Hinweis darauf ist in der DSE also erforderlich. Konkrete Textvorschläge habe ich dafür nicht, und auch die DSE-Generatoren scheinen diesen Fall nicht zu kennen. Da muss man dann also seine eigenen Formulierungskünste bemühen.

So, das war der Crashkurs Webfonts... es ist einfacher, als es nach dieser länglichen Beschreibung den Eindruck erwecken mag. Mit etwas Routine ist sowas in ein paar Minuten gebaut.

Last edited by florian (30.05.2018 17:51:13)

Offline

Liked by:

ice, petero, mk70, better-work, jean

#4 30.05.2018 08:48:22

ice
Member

Re: Google Fonts - DSE / Alternativen

Wow, danke für die sehr ausführliche Anleitung!

Offline

#5 30.05.2018 10:27:12

grindmobil
Member

Re: Google Fonts - DSE / Alternativen

Dass das Thema Google Fonts nicht so groß erwähnt wird, liegt vielleicht daran, dass dabei ja nur eine Ressource von einem andere Server angefordert wird. Ebenso wie oft jQuery oder irgendwelche Bilder.

Wenn man jetzt auch noch anfängt, das zu bemäkeln, kann man das Internet ausschalten.

Es ist an sich auch keine schlechte Idee, gängige Fonts wie zb Open Sans von Google zu laden, weil sich diese dann schon sehr wahrscheinlich im Browsercache befinden, wodurch die Ladezeit sehr verkürzt wird.

Wenn kein Referrer übertragen wird, kann Google nicht feststellen, von welcher Website aus die Fonts angefordert wurden.
Google erfährt dann nur die IP-Adresse des Nutzers.

Last edited by grindmobil (30.05.2018 10:32:31)

Offline

Liked by:

colinax

#6 30.05.2018 10:57:14

florian
Projektmanagement und Support WBCE CMS

Re: Google Fonts - DSE / Alternativen

Allerdings ist die IP-Adresse ja bereits ein schutzwürdiges persönliches Datum, sagt die Rechtssprechung.
Ich möchte aber ungern eine Metadiskussion zu diesem Thema führen.

Hinsichtlich Performance: Viele gängige Schriften (Open Sans, Roboto) sind möglicherweise bereits lokal auf dem PC/smartphone/whatever installiert. Wer also mit dem Transfonter nicht gerade sehr exotische Schriften konvertiert, kann dort die Option "Add local() rule" aktivieren oder die entsprechende Anweisung von Hand nachtragen.

Vgl. https://developer.mozilla.org/de/docs/W … @font-face

Man kann durch die  local() Syntax die gewünschte Schriftart lokal suchen und ansprechen. Wenn der gewünschte Font auf dem jeweiligen Computer nicht gefunden wird, werden andere Quellen, die im CSS angegeben sind,  durchsucht.

Interessant ist auch die Option, die beide genannten Schriftgeneratoren anbieten, nämlich die Schrift als Base64 direkt im Stylesheet einzubetten. Damit reduziert sich die Anzahl der Requests an den Webserver, weil dann nur noch das Stylesheet und keine einzelnen Schriftartdateien mehr geladen werden. Natürlich sollte man das nur machen, wenn man nur eine oder sehr wenige unterschiedliche Schriften/Schriftschnitte laden möchte, da sonst das Stylesheet auf Megabytegröße anschwillt und nichts gewonnen ist. (Und das Stylesheet wird sehr bearbeitungsunfreundlich, wenn erst ein riesengroßer Blob aus wirren Zeichen und Ziffern drin steht.)

Offline

#7 30.05.2018 16:59:49

jean
Member

Re: Google Fonts - DSE / Alternativen

der Vollständigkeit halber Alternativen aus der Ecke einbinden/base64/konvertieren:
https://google-webfonts-helper.herokuapp.com/fonts
https://jaicab.com/localFont/
https://fontie.pixelsvsbytes.com/webfont-generator

Offline

#8 31.05.2018 15:12:04

berny
Member

Re: Google Fonts - DSE / Alternativen

Google muss ja auch gem der Dsgvo handeln.

ich erkenne das Problem nicht.

Offline

#9 31.05.2018 15:18:02

florian
Projektmanagement und Support WBCE CMS

Re: Google Fonts - DSE / Alternativen

Das stand gerade heute bei e-recht24 (Mitgliederbereich)

Abmahnung wegen der Einbindung von Google Fonts

Durch die Kanzlei [...] aus [...] wird die Einbindung von Google Fonts auf Webseiten abgemahnt. Gefordert werden Beseitigung der Verstöße, die Abgabe einer Unterlassungserklärung sowie die Übernahme der Kosten der Abmahnung.

Ich denk mir doch sowas nicht aus.
Ich schreibe auch niemandem vor, wie er zu verfahren hat, jeder kann meinetwegen weiterhin Google Fonts verwenden.

Last edited by florian (31.05.2018 15:18:37)

Offline

#10 31.05.2018 22:18:36

berny
Member

Re: Google Fonts - DSE / Alternativen

das ist mir schon klar, aber ist diese Abmahnung überhaupt gerechtfertigt?

Offline

#11 01.06.2018 16:52:17

berny
Member

Re: Google Fonts - DSE / Alternativen

übrigens sollte man den oben genannten Blog genau durchlesen, Ev auch dem Link zum "Rechtsmissbrauch" folgen.

Es ist eben NICHT sicher, dass Verstöße gegen die dsgvo zwingend das UWG betreffen, ausserdem, wie ich schon erwähnte, sind für diese Sachen die Datenschutzbehörden und eben nicht die Strafbehörden zuständig.

ich muss aber auch dazu sagen, das mir die deutsche Rechtsstruktir nicht wirklich geläufig ist...

Es sollten auf jedenfall die entsprechenden Empfehlungen umgesetzt werden.

Offline

Board footer

Powered by FluxBB

up