I've seen the Google Web Fonts Helper and I will use it for sure, however Bootstrap Studio does not allow me to add the font files to myself. I'm forced to add them after export, which results in the fact that I won't see the font in BSS. I could select the font in BSS to see it, but this means that I have to remove the <link> entry in the <head> section after export. Both solutions are clunky. Why I cannot add my own font files to BSS? Why I cannot tell BSS not to use external fonts?
Linking externally is the right way to go. It's still not clear if google fonts are GDPR compliant atm:
Notice: Official Statement by Google Fonts made April 17, 2018
Google is working hard to prepare for the EU General Data Protection
Regulation (GDPR), and is committed to helping our customers and
partners succeed under the GDPR. Our existing Google Fonts FAQ
provides information on how Google Fonts handles data about users.
Google Fonts acts as a "data controller" for any personal data that
Google processes in connection with your use of Google Fonts web and
Android APIs. For any personal data you process, we encourage you to
familiarize yourself with the provisions of the GDPR, and check on
your compliance plans.
Also, please note that Google LLC is certified under both the EU-U.S.
and Swiss-U.S. Privacy Shield frameworks and our certifications can be
viewed on the Privacy Shield list.
but I'm quite confident that Google will clarify/fix that issue. So BSS solution is the right one.
Link to an external resource is much better, no need to keep and update local copies, fonts are always updated, great performance, and better use browser cache, so users just need to download fonts just once per month (IIRC) so website loading is faster.
"It’s still not clear if google fonts are GDPR compliant atm" - Yes, and this makes it not compliant at this time.
"but I’m quite confident that Google will clarify/fix that issue. So BSS solution is the right one." - I'm not really sure. You see, the GDPR requires the website owner to inform the user about data that will be given away BEFORE it will be given away. So tell me, how can a person sign before fonts are loaded? This can only be achieved by a gateway page that has not accomplished a connection to external service provides so far, until the user agree's on the policy. You see, the case is tricky, and there were lawsuits because of this, already.
"Link to an external resource is much better, no need to keep and update local copies, fonts are always updated, great performance, and better use browser cache, so users just need to download fonts just once per month (IIRC) so website loading is faster." - This is true if you use a commonly used CDN provider such as Google Fonts. As soon as you setup your own CDN on your own domain the GDPR issue might be solved, but the benefits of this are lost. So there is no difference in hosting your fonts yourself as CDN or embedded into the BSS project. The only difference is that an own CDN still creates a dependency to my own server. So when I open the BSS project without an internet connection it cannot show the fonts and this is horrible.
"that’s by design." - That first intention was pretty fine. BSS wanted to encourage people to use CDNs when it was absolutely legit. However, laws have changed and the devs of BSS have to react to this. If BSS would allow me to import any files, like own font files, tell it to not include external links in the export, I'd never dare to complain about all this. But now, this design choice puts obstacles into my way, because there are two solutions to the GDPR case and none of them are very satisfying:
Host the font files on the server and add an external CSS reference to your BSS project. <- Not good, because I end up with an online dependency, the project cannot be viewed the way it is without internet connection
Adding the files myself after export and changing the external link in the index.html to point to my added CSS file <- Not good, because I have to repeat the process for every export. Yes I can write a script to do the job, but it makes absolutely no sense to me that BSS lacks doing such a mandatory thing. (Apparently BSS is not even able to execute python scripts.)
Btw.: The same goes to the animation feature of BSS. It adds an CDN, which was fine in past, now this is not usable either. Even when I add my own animation.min.css to the project it will include the CDN link.
I'm not very happy how people want to solve this issue in such a way, here.
@marty if you run your own nginx server a quick workaround for most issues is https://github.com/google/fonts/issues/1637 (i'd suggest limiting the referrer to your website only)
you don't get the benefits of a cdn, but i'd say you solve BSS and GDPR issue that way. At least until there's a better solution. It's idiotic that all Europe can't use a cdn making more than 60% of websites slower because can't use cached fonts.
not all external linking is illegal because of GDPR, all resource used must comply to GDPR so you have to check that specific website/CDN policy too.
I don't run my own nginx server. Instead I ended up having a python script next to the BSS project file and an ext folder. The ext folder contains:
ext
-- assets
---- css
------ fonts.css (contains CSS from Google Fonts Helper)
------ animate.min.css (contains animations)
---- fonts (contains font files from Google Fonts Helper)
Then I let BSS execute this script on export:
#!/usr/bin/env python
import sys
import os
import shutil
import fileinput
import re
def recursive_overwrite(src, dest, ignore=None):
if os.path.isdir(src):
if not os.path.isdir(dest):
os.makedirs(dest)
files = os.listdir(src)
if ignore is not None:
ignored = ignore(src, files)
else:
ignored = set()
for f in files:
if f not in ignored:
recursive_overwrite(os.path.join(src, f),
os.path.join(dest, f),
ignore)
else:
shutil.copyfile(src, dest)
recursive_overwrite(os.path.join(os.path.dirname(sys.argv[0]), "ext"), sys.argv[1])
with open(os.path.join(sys.argv[1], "index.html"), "r") as file:
content = file.read()
content = re.sub(r'<link rel="stylesheet"[^>]*googleapis[^>]*>', r'', content)
content = re.sub(r'<link rel="stylesheet"[^>]*cdn[^>]*>', r'', content)
content = re.sub(r'</head>', r'<link rel="stylesheet" href="assets/css/fonts.css"></head>', content)
content = re.sub(r'</head>', r'<link rel="stylesheet" href="assets/css/animate.min.css"></head>', content)
with open(os.path.join(sys.argv[1], "index.html"), "w") as file:
file.write(content)
It removes external links in the index.html and puts all that is in ext into the export directory and links the additional local CSS files in the header.
It's ridiculous that I had to go this route, but at least now it's 100% GDPR compliant and automated, entirely.
considering that to support modern browser woff2 and woff are the only 2 formats needed, BSS could still use the linked version and when exporting, USE CDN FOR LIBRARIES option (or better 'create local resources for all libraries) could also include google fonts.
using a solution like this: https://google-webfonts-helper.herokuapp.com/fonts could be the solution.
all @martin should do to completely fix the issue is to add an export option to create a local copy for Google fonts or simply include fonts in the "use cdn for libraries and Google fonts" that at the moment only creates a local copy for "jQquery, Bootstrap and icon fonts"
btw why do you think ALL cdn are not gdpr compliant? Not every CDN provider collect user data against the gdpr. You could also say that telcos, datacenters, all tech that have access to any router, switch, firewall, data cables in the path between the end user and your web server have access to the user IP. I'd say we're overreacting to a lesser problem. AFAIK (only) in Germany someone received a letter about the fonts issue. But I'm not aware of any real problems apart from that old, few issues. And removing all CDN, killing all browser caches is not a good solution. Maybe not even necessary