Hi Leute,
wie lassen sich google-Webfonts lokal einbinden? Bisher bin ich immer über das BA > Layouteinstellungen > Webfonts gegangen.
Doch das ist wohl nicht mehr DSGVO-sicher, oder?
Hi Leute,
wie lassen sich google-Webfonts lokal einbinden? Bisher bin ich immer über das BA > Layouteinstellungen > Webfonts gegangen.
Doch das ist wohl nicht mehr DSGVO-sicher, oder?
hi ich hab das gefunden
https://t3n.de/news/google-fonts-selber-hosten-751438/
vielleicht hilf dir das
Hi Leute,
wegen der DSGVO will ich die google Webfonts local einbinden.
Ich bin nach dieser Anleitung gegangen und hab den Pfad im CSS so hier gelegt:
Aber das Ganze funktioniert nicht.Code:@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 300; src: url('files/fonts/source-sans-pro-v11-latin-300.eot'); /* IE9 Compat Modes */ src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('files/fonts/source-sans-pro-v11-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('files/fonts/source-sans-pro-v11-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('files/fonts/source-sans-pro-v11-latin-300.woff') format('woff'), /* Modern Browsers */ url('files/fonts/source-sans-pro-v11-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('files/fonts/source-sans-pro-v11-latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */ }
Im Verzeichnis files liegt der Ordner fonts, in dem die ganzen Schriften drin sind.
Das CSS hab ich im Layout extern eingebunden.
Es handelt sich um contao 3.5
Du musst die Pfadangaben relativ machen.
Angenommen dein CSS liegt in
/files/themes/yourtheme/css/fonts.css
und deine Schriften liegen in
/files/themes/yourtheme/fonts/source-sans-pro-v11-latin-300.*
Dann muss dein CSS so lauten:Das ist auch die Default Ausgabe des google-webfonts-helper.Code:@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 300; src: url('../fonts/source-sans-pro-v11-latin-300.eot'); /* IE9 Compat Modes */ src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('../fonts/source-sans-pro-v11-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/source-sans-pro-v11-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/source-sans-pro-v11-latin-300.woff') format('woff'), /* Modern Browsers */ url('../fonts/source-sans-pro-v11-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/source-sans-pro-v11-latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */ }
irgendwie geht das nicht :-(
im Ordner files liegen :
- Ordner fonts (mit den Schriften)
- fonts.css
- layout.css
Oder muß ich die Angaben aus der fonts.css in der layout.css einbinden?
Hast du das befolgt, was ich beschrieben habe? Du musst in deinem CSS die Pfadangaben korrekt relativ machen.
So hier:
Code:/* source-sans-pro-300 - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 300; src: url('../fonts/source-sans-pro-v11-latin-300.eot'); /* IE9 Compat Modes */ src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('../fonts/source-sans-pro-v11-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/source-sans-pro-v11-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/source-sans-pro-v11-latin-300.woff') format('woff'), /* Modern Browsers */ url('../fonts/source-sans-pro-v11-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/source-sans-pro-v11-latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */ }
Laut deiner Beschreibung stimmt das aber nicht. Deine CSS Datei befindet sich relativ zu den Schriften einen Ordner darüber.
klann es daran liegen, daß die CSS-Dateien direkt im Ordner files liegen, und nicht nochmal in einem Unterordner?
Du musst einfach dein CSS richtig schreiben . Sieh dir die Pfadangabe nochmal genau an. So wie du das jetzt geschrieben hast, stimmt das nicht - zumindest laut deinen Aussagen, wo sich die CSS Datei und die Font Dateien befinden.
ich hab jetzt im Ordner files noch einen Ordner CSS angelegt, in die dann die ganzen CSS-Dateien drin sind, also so hier:
files
fonts
css
- fonts.css
- layout.css
und jetzt funktioniert das mit " url('../fonts/..."
Danke für Eure Hilfe
Übrigens ich nutze immer den Webfontgenerator von Fontsquirrel ( https://www.fontsquirrel.com/tools/webfont-generator ) ... der wandelt einem auch gleich die Dateien um (also hauptsächlich ttf in woff und woff2). Die Pfade muss man zwar trotzdem noch anpassen. Die Anpassungen die man für die Fonts machen kann sind teilweise auch recht interessant.
Weiß jemand wie das eigentlich rein Lizenzrechtlich aussieht? Also die GoogleFonts selbst zu hosten? In den Kommentaren des t3n Artikels taucht die Frage auch auf und zumindest auf die Schnelle konnte ich nichts klärendes finden.
Vielleicht weiß ja hier jemand entsprechendes.
Auch wenn ich hier zB "FontSquirrel" lese geht bei mir das eine oder andere Warnlichtchen an. Zumindest sollte man sich lizenzrechtlich sicher sein was man da treibt, sonst kommt man schnell vom Regen in die Traufe.
Die DSVGO ist nicht alles und es existieren noch genügend andere Gesetze/Regelungen/Verordnungen die beachtet sein möchten
Grüße, Stefko
Im Zweifelsfall bei der jeweiligen Schrift nachschauen. Bei z.B. Roboto finde ich, daß die Schrift unter der "Apache License, Version 2.0" lizensiert ist. Sollte also OK sein.
Contao-Community-Treff Bayern: http://www.contao-bayern.de
Die Frage mit den Lizenzen interessiert mich auch.
Woran erkennt man, daß eine Schrift verwendet werden kann?
Wie schaut es bei der google-Font "Droid Sans" aus? Da wird man von google auf eine andere Seite geleitet, wo dann ein kostenpflichtiges Angebot erscheint..
Ich war immer der Annahme, das google-Fonts kostenfrei wären.
Hi,
hier mal ein FAQ Artikel bei Google:
https://developers.google.com/fonts/faq
Hier mal einige Fragen kurz durch den Google-Übersetzer geschickt(obwohl my English Onewallfree is ):
Can I use fonts from the Google Fonts catalog on any page?
Yes. The open source fonts in the Google Fonts catalog are published under licenses that allow you to use them on any website, whether it’s commercial or personal.
Search queries may surface results from external foundries, who may or may not use open source licenses.Kann ich Fonts aus dem Google Fonts-Katalog auf einer beliebigen Seite verwenden?
Ja. Die Open-Source-Fonts im Google Fonts-Katalog werden unter Lizenzen veröffentlicht, die es Ihnen ermöglichen, sie auf einer beliebigen Website zu verwenden, sei es geschäftlich oder privat.
Suchabfragen können Ergebnisse externer Gießereien aufdecken, die möglicherweise Open-Source-Lizenzen verwenden.
Can I download the fonts on Google Fonts to my own computer?
Yes. To download fonts, simply create a selection of fonts, open the drawer at the bottom of the screen, then click the "Download" icon in the upper-right corner of the selection drawer. You can download the fonts to use in mock-ups, documents, or locally on your machine.
Note that when browsers render websites that use the Google Fonts API, they will check if a font is installed locally on your computer, and prefer to use the local version over web fonts. To make sure the fonts installed locally on your personal computer are always up-to-date, we recommend using a fonts manager (such as SkyFonts) that automatically syncs the latest versions of fonts from the Google Fonts API to your computer.Kann ich die Schriftarten auf Google Fonts auf meinen eigenen Computer herunterladen?
Ja. Um Schriftarten herunterzuladen, erstellen Sie einfach eine Auswahl von Schriftarten, öffnen Sie die Schublade am unteren Bildschirmrand und klicken Sie auf das "Download" -Symbol in der oberen rechten Ecke des Auswahlfachs. Sie können die Schriftarten herunterladen, um sie in Modellen, Dokumenten oder lokal auf Ihrem Computer zu verwenden.
Beachten Sie, dass Browser, die Websites mit der Google Fonts-API rendern, prüfen, ob eine Schriftart lokal auf Ihrem Computer installiert ist, und lieber die lokale Version über Webschriftarten verwenden. Um sicherzustellen, dass die lokal auf Ihrem Computer installierten Schriftarten immer auf dem neuesten Stand sind, empfehlen wir die Verwendung eines Schriftarten-Managers (z. B. SkyFonts), der die neuesten Schriftarten automatisch mit dem Google Fonts API mit Ihrem Computer synchronisiert.
What does using the Google Fonts API mean for the privacy of my users?
The Google Fonts API is designed to limit the collection, storage, and use of end-user data to what is needed to serve fonts efficiently.
Use of Google Fonts is unauthenticated. No cookies are sent by website visitors to the Google Fonts API. Requests to the Google Fonts API are made to resource-specific domains, such as fonts.googleapis.com or fonts.gstatic.com, so that your requests for fonts are separate from and do not contain any credentials you send to google.com while using other Google services that are authenticated, such as Gmail.
In order to serve fonts quickly and efficiently with the fewest requests, responses are cached by the browser to minimize round-trips to our servers.
Requests for CSS assets are cached for 1 day. This allows us to update a stylesheet to point to a new version of a font file when it’s updated, and ensures that all websites using fonts hosted by the Google Fonts API will be using the most updated version of each font within 24 hours of each release.
The font files themselves are cached for one year, which cumulatively has the effect of making the entire web faster: When millions of websites all link to the same fonts, they are cached after visiting the first website and appear instantly on all other subsequently visited sites. We do sometimes update font files to reduce their file size, increase coverage of languages, and improve the quality of their design. The result is that website visitors send very few requests to Google: We only see 1 CSS request per font family, per day, per browser.
Google Fonts logs records of the CSS and the font file requests, and access to this data is kept secure. Aggregate usage numbers track how popular font families are, and are published on our analytics page. We use data from Google’s web crawler to detect which websites use Google fonts. This data is published and accessible in the Google Fonts BigQuery database. To learn more about the information Google collects and how it is used and secured, see Google's Privacy Policy.GrußWas bedeutet die Verwendung der Google Fonts API für die Privatsphäre meiner Nutzer?
Die Google Fonts API wurde entwickelt, um die Erfassung, Speicherung und Verwendung von Endbenutzerdaten auf das zu beschränken, was für die effiziente Bereitstellung von Zeichensätzen erforderlich ist.
Die Verwendung von Google Fonts ist nicht authentifiziert. Die Website-Besucher senden keine Cookies an die Google Fonts-API. Anfragen an die Google Fonts-API werden an ressourcenspezifische Domains wie fonts.googleapis.com oder fonts.gstatic.com gestellt, sodass Ihre Anforderungen für Fonts getrennt von Anmeldeinformationen sind, die Sie an google.com senden, und enthalten keine Anmeldeinformationen, die Sie an google.com senden andere Google-Dienste verwenden, die authentifiziert sind, z. B. Google Mail.
Um Schriftarten schnell und effizient mit den wenigsten Anforderungen zu bedienen, werden die Antworten vom Browser zwischengespeichert, um die Anzahl der Roundtrips zu unseren Servern zu minimieren.
Anforderungen für CSS-Assets werden für einen Tag zwischengespeichert. Dadurch können wir ein Stylesheet so aktualisieren, dass es bei der Aktualisierung auf eine neue Version einer Schriftartdatei verweist, und sicherstellen, dass alle Websites, die Schriftarten verwenden, die von der Google Fonts-API gehostet werden, innerhalb von 24 Stunden die neueste Version jeder Schriftart verwenden .
Die Font-Dateien selbst werden für ein Jahr zwischengespeichert, was kumulativ dazu führt, dass das gesamte Web schneller wird: Wenn Millionen von Websites auf dieselben Schriftarten verweisen, werden sie nach dem Besuch der ersten Website zwischengespeichert und sofort auf allen weiteren besuchten Websites angezeigt . Manchmal aktualisieren wir Schriftdateien, um ihre Dateigröße zu reduzieren, die Sprachabdeckung zu erhöhen und die Qualität ihres Designs zu verbessern. Das Ergebnis ist, dass Website-Besucher sehr wenige Anfragen an Google senden: Wir sehen nur 1 CSS-Anfrage pro Schriftfamilie, pro Tag, pro Browser.
Google Fonts protokolliert Datensätze der CSS- und der Schriftdateianforderungen, und der Zugriff auf diese Daten bleibt sicher. Aggregierte Nutzungsnummern verfolgen, wie beliebte Schriftfamilien sind und werden auf unserer Analytics-Seite veröffentlicht. Wir verwenden Daten aus dem Web-Crawler von Google, um festzustellen, welche Websites Google-Schriftarten verwenden. Diese Daten werden veröffentlicht und sind in der BigQuery-Datenbank von Google Fonts verfügbar. Weitere Informationen zu den Informationen, die Google erhebt und wie es verwendet und geschützt wird, finden Sie in der Datenschutzerklärung von Google.
tschero
Geändert von tschero (06.06.2018 um 11:23 Uhr)
@tschero
Die FAQs hatte ich mir auch mal angeschaut und diese hier
liefert meiner Meinung nach keine eindeutige Antwort, da ja nur vom eigenen und lokalen Rechner die Rede ist. Von fremden Servern und Hosting steht da nichts.Kann ich die Schriftarten auf Google Fonts auf meinen eigenen Computer herunterladen?
Ja. (...) Sie können die Schriftarten herunterladen, um sie in Modellen, Dokumenten oder lokal auf Ihrem Computer zu verwenden.
Aber wie @fiedsch schon schrieb kann ein Blick in die Lizenz der Schrift kein Fehler sein.
Ich wollte hier jetzt aber auch kein Fass aufmachen, sondern lediglich darauf hinweisen, dass wenn man nun (panisch) wegen der DSVGO wieder anfängt die Schriften selbst bereit zu stellen, zumindest aufpassen sollte, damit man nicht die nächste Baustelle aufreißt.
Grüße, Stefko
Ja stimmt,
der DSGVO-Wahn lässt einen den Blick für´s Ganze verlieren wenn man nicht aufpasst.
Also wenn die Lizenz passt (so wie bei Roboto) mache ich mir erst mal keine Sorgen.
Gruß
tschero
Wegen der DSGVO-Sache habe ich mir auch Gedanken gemacht, wie man mit Schriften umgehen könnte. Zudem habe ich bereit etwas länger nach einem Vorwand gesucht mal einen Bundle für Contao 4 zu erstllen, learning by doing sozusagen. Daraus entstand dann https://packagist.org/packages/spotb...nerator-bundle. Ist zwar nicht ganz fertig, aber scheint zu funktionieren, würde mich über Feedback freuen.
Hallo 23 spotbot2k,
das hatte ich gestern entdeckt und da war es im Manager als noch nicht kompatibel gekennzeichnet und lies sich nicht installieren.
Eben geguckt: Nun geht es, Schau ich mir gerne an und gebe Feedback.
---------------------------------
Beste Grüße planepix
Contao für Webdesigner (Website), Twitter: @contaowebdesign
weitzeldesign
Contao-Sprechstunde
Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
Contao Jahrbuch: www.contao-jahrbuch.de
Contao Agenturtag: www.contao-agenturtag.de
Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki
Schon wieder ein Update?
Glücklich sind die, die den Wert erkennen – und wertschätzen.
„Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”
Hallo Zusammen,
ich habe die Schrift, wie oben beschrieben lokal eingebunden und die Einträge im Seitenlayout entfernt.
Mache ich nun einen Test, wird mir angezeigt, dass Google trotzdem noch die IP Adresse zeiht
Hat Jemand eine Idee woran das liegen könnte?
Ohne einen Link zu haben wird das schwierig.
Contao in Kiel: kikmedia webdevelopment | Contao-Partnerin | Contao Usergroup Kiel | github | Contao-Community-Alliance | MetaModels-Team
Kann auch noch in den zusätzlichen Headtags eingetragen sein (im Seitenlayout), in einem angepassten Template eingetragen sein oder z.B. durch Google-Maps etc. nachgeladen werden.
Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
Unterstütze bitte das Contao-Projekt (Button Links)
Weitere Spendenmöglichkeiten
------------------------------------------------------------------------------------------------------
Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
Contao-Online-Video-Kurse: Contao Academy
Funktionalität erweitern: Contao-Erweiterungen
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
Mein Host rät mir, die Google-Map auf der Seite gleich zu deaktivieren, da die immer Schriften lädt und man die nicht auf den lokalen Server kriegt?? Und nun?
Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
Unterstütze bitte das Contao-Projekt (Button Links)
Weitere Spendenmöglichkeiten
------------------------------------------------------------------------------------------------------
Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
Contao-Online-Video-Kurse: Contao Academy
Funktionalität erweitern: Contao-Erweiterungen
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
Danke für die Antworten.. (war ein paar Tage Krank)..
hier mal der Link zur Seite:
https://www.pflegedienst-querfurt.org/
Wie gesagt, ich habe die Google Schriften entfernt aber es wird trotzdem noch etwas nachgeladen.
Was soll Google auch sonst tun, wenn Du Google Analytics einbindest?
Contao in Kiel: kikmedia webdevelopment | Contao-Partnerin | Contao Usergroup Kiel | github | Contao-Community-Alliance | MetaModels-Team
Ich habe jetzt im Header noch diese Zeile gefunden und entfernt:
<link href='https://fonts.googleapis.com/css?family=Fira+Sans:400,300,300italic,400italic,5 00,700,700italic' rel='stylesheet' type='text/css'>
Seitdem geht es.
Danke nochnal für die Hinweise.
Ich brauche doch nochmal eure Hilfe. Ich bekomme es nicht hin.
ICh möchte die Schrift Lokal einbinden.
Dazu habe ich eine neue CSS namens Fonts angelegt und auch im Seitenlayout eingebunden.
Danach die Schrift mittels Code:
der Pfad für die Schrift im Filezille lautet:HTML-Code:@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; src: url('../fonts/fira-sans-v16-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Fira Sans'), url('../fonts/fira-sans-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/fira-sans-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/fira-sans-v16-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/fira-sans-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/fira-sans-v16-latin-regular.svg#FiraSans') format('svg'); /* Legacy iOS */ }
/html/files/fonts/fira-sans-v16-latin
Der Link zur Seite:
https://www.pflegedienst-querfurt.org/
Wo liegt der Fehler?
Der Pfad zu den Fonts muss relativ zur CSS-Datei korrekt sein.
Nach deinem Code würde von Deiner CSS-Datei ausgehend einen Ordner nach oben gegangen werden und dort direkt im Ordner fonts die Schrift-Dateien gesucht werden.
Deinen Angaben aus Filezilla entnehme ich, dass die Datei in einem Unterordner unter fonts liegen.
Zusätzlich habe ich gesehen, dass Du m.E. das Theme Vision von Rocksolid benutzt. Dort dürften die CSS-Dateien im Ordner files/vision/css liegen wenn ich mich nicht täusche. Wenn das so ist, müsste die Pfadangabe für src dann wie folgt aussehen (Beispiel nur für eot, Rest analog):
Alternativ verschiebst Du die Schriftart-Dateien direkt in files/vision/fonts - ohne Unterordner. Dann dürfte Dein Code für @font-face so stimmen wie Du ihn gepostet hast.Code:... url('../../fonts/fira-sans-v16-latin/fira-sans-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ ...
Informationen zu relativen Pfaden findest Du diverse im Netz z.B. https://www.akademie.de/de/wissen/ht...relative-pfade. Für das Verständnis ist es empfehlenswert, sich mit diesem Thema zu beschäftigen.
Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
Unterstütze bitte das Contao-Projekt (Button Links)
Weitere Spendenmöglichkeiten
------------------------------------------------------------------------------------------------------
Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
Contao-Online-Video-Kurse: Contao Academy
Funktionalität erweitern: Contao-Erweiterungen
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
Oder gleich alle Punkte vorne weglassen '/files/fonts/x/y.woff' dann ist das relativ zum base-tag und nicht mehr relativ zur generierten css-Datei.
Hat bei mir jedenfalls immer so geklappt.
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)