-
Posts
-
Hey there,
in the last few days in Germany there have been the first adhortatory letters/warnings sent by lawyers to companies for using google web fonts on their webpages due to the new GDPR. Reason for those letters is, that the visitor of the webpage does not have a choice to either agree or disagree the usage of google web fonts. (Even the Cookie Information Modal Windows would not safe you from getting such a letter, since the webfonts are already loaded when the modal window opens and the user gets the option to disable the web fonts).
As a consequence I started to replace the google webfonts on my enfold projects today by local hosted google webfonts, even if i don’t think that these letters are justified. But currently you do not have a choice. You will have to pay the fee, or start a legal fight against those law agencies… And thats nothing i or my customers want to do…
In this thread I’d like to share a “how to” download and integrate the google web fonts locally, since it’s not as easy as downloading the Webfonts from google. (You only get True Type Font Files which will your homepage not make look the same as before).
So here is how to get your Hompeage look identical, with local hosted google web fonts
- 1. Download the google Webfont you need from https://google-webfonts-helper.herokuapp.com. You will get a zip file which contains all necessary font files: ttfs, woff woff2 ttfs svg and eot
- 2. Extract the Zip file on your pc
- 3. Rename the Files, since enfold would not recognize the font weight types:
300 = Light
400 = Regular
600 = SemiBold
700 = Bold
800 = ExtraBlacke.g.: open-sans-v15-latin-600.woff2 becoms open-sans-v15-latin-SemiBold.woff2
- 4. Zip the font files
- 5. Upload the Font Files to Enfold (Enfold Theme Settings -> Import/Export
- 6. Enable the Font in Enfold (general Styling -> Fonts)
For Open Sans you only need the 400 and 600 fonts, so i only uploaded them. You can identify the font-weights you need by looking into the source code of your enfold webpage below the
<!-- google webfont font replacement -->in the <head> section.Hope this Helps other people.
Greetings.
why do you think that does not work via the Custom Font Manager in ENFOLD 4.4?
I cannot see any difference in displaying the fonts …I am actually using the Custom Font manager from Enfold. But when i upload the font file downloaded from Google Webkit Fonts, there is quite a difference in Font Weight and displaying bc. google only serves ttf files and not woff2 or woff files.
After Downloading the SAME font from google webfont helper (which is not hosted by google JFYI.) and renaming them so that the font weights are recognized the same, i got the same looking.
Hm, don’t know …
But the ZIP file that you download from Google and upload with the Custom Font Manager of Google contains all font weights or respectively those that you have collected at Google fonts for that specific font:In ENFOLD 4.4 theme settings -> Import/Export you upload the ZIP:
And for different Headlines, texts or whatever, you define a
font-weight: 400;or something like that in that specific CSS class.
Do you have tested this with “special heading” element and Google embedded video?
I have set all fonts to websafe fonts. But google fonts are loaded in some elements.
I just found out what the difference was:
First of all i guess there was a caching Problem or the fonts have not been loaded correctly the frist time. The fonts were actually ugly…
Second i recognized that enfold just loads Open Sans 400 and 600 when using the google webfont service. When downloading the fonts from google you get all the font weights, just as you said. Since the “special Heading modern style” uses font weight 300 the displaying changed due to using the downloaded zip, since the font weight 300 is included. Using the default open sans served by google it is not, since enfold just does not load it. That why it differed. When i downloaded the fonts by google webfont helper i just selected the font weights 400 and 600 and this is why it looked the same.
@Hokuspokus: What exactly do you mean? I am Using the special headings a lot in my web projects, and they are served by the custom web font. Important is, that you select the right font in generel styling -> fonts tab.
Hey. Do you have checked this with Firefox lightbeam or Console and click around your pages, what events are loaded and what fonts comes from outside servers?
I have for headings Helvetica and Veranda for body text defined.
Youtube and “special heading” as h2 loading stuff from google at my page. Youtube loads “roboto” as video description.All cookies are deleted before. For my understanding, kriesi has forgotten to change the rule for this. But it’s only my opinion.
You will don’t find it in source code. I have tested it. It’s only in other tools visible.Thank you for the detailed description, however I have a question regarding this matter:
I use the Open Sans font locally but on the contact page where I have a Google Maps embeded the Google Fonts are still loaded from the Google server.
How can you manage to force Google Maps to use the localy stored fonts?Hi,
You cant.
Google decides from where they want to load for speed of the maps.Best regards,
BasilisHi Basilis,
thank you for your quick reply.
You offer a shortcode in the privacy policy section: [av_privacy_google_webfonts] that allegedly disables google fonts. That means that this would not work either?What about the extra filter called “avf_output_google_webfonts_script” that allows to programmatically deactivate google fonts from the last update 4.4.1? How can this be implemented?
RegadsDear Smilefactory, upload the google fonts direct to your server. This is also good for Performance. You don’t must request to google servers.
The shortcode in the privacy policy section gives user the wrong sign and wrong security.An automatic opt-in short-code / modal windows is useless: With the first visit, all datas are sended to google. It makes no sense to give the user the option for opt out after the datas are sended. This is not the sense of privacy policy. The sense is: The user must have always the control about which data is sent, when and why. And with a “after sent data” opt out is it not possible.
Hi,
We are working on an update to cover as many of those cases as possible.
Thank you!
Best regards,
BasilisI am also interested to learn about how to implement avf_output_google_webfonts_script filter.
Thanks.Hi,
That filter allows you disable the theme’s google font feature completely which is not recommended because it will render the font options useless. Try this filter.
add_filter('avf_output_google_webfonts_script', 'avf_output_google_webfonts_script_mod', 10, 1); function avf_output_google_webfonts_script_mod($font) { $font = false; return $font; }OR
add_filter('avf_output_google_webfonts_script', function() { return false; });Best regards,
Ismael
- You must be logged in to reply to this topic.