Fonts play an important influence in a website's overall visual appeal. A well-chosen typeface will aid in conveying the proper message and establishing trademark consistency to the visitors. A great online font should be readable and web-safe, which means it should render well across diverse devices, browsers, and operating systems.
Choosing a proper typeface, on the other hand, is not always so simple. Fonts that are visually beautiful but aren't web-safe are prevalent, and vice versa. Just for the record, web-safe typefaces are those that come standard with most operating systems. This guarantees that the fonts display correctly across multiple devices and browsers.
For example, Arial, Times New Roman, and Helvetica are some of the most popular web-safe typefaces.
What is the issue with Google Fonts?
Google Fonts (formerly known as Google WebFonts before June 2013) is a computer font and web font service owned by Google. This includes free and open source font families, an interactive web directory for browsing the library, and APIs for using the fonts via CSS and Android.
Popular google Fonts include Roboto, Open Sans, Lato, Oswald, Montserrat, Source Sans Pro, and Raleway. As of February 2023, Google Fonts had 1,482 font families, including 288 variable font families.
Nowadays, Google Fonts is used by more than 60 millions websites, according to trends.builtwith.com
BUT
In January 2022, a German court ruled that a website using Google Fonts violated the European Union General Data Protection Regulation (GDPR) by passing personally identifiable information (IP address) to Google without the user's consent or a legitimate interest in doing so.
The website received a fine of 100€. The Munich court clearly wanted to set an example. They even mentioned the next fine will be 250.000€ for the website operator if they don’t comply.
If you're not aware, millions of websites are using Google Fonts and the company behind the famous search engine uses this free service to collect our data without our consent. I think that is what we call a dark pattern.
By using Google Fonts, the Terms of Service that specifically applies is for the Google API because you usually embed the fonts with <link> or @import into your CSS one of these URLs: fonts.googleapis.com or fonts.gstatic.com.
The APIs are designed to help you enhance your websites and applications (“API Client(s)”). YOU AGREE THAT GOOGLE MAY MONITOR USE OF THE APIS TO ENSURE QUALITY, IMPROVE GOOGLE PRODUCTS AND SERVICES, AND VERIFY YOUR COMPLIANCE WITH THE TERMS. This monitoring may include Google accessing and using your API Client, for example to identify security issues that could affect Google or its users.
Google APIs Terms of Service
Depending on your project or your client's needs, this isn't necessarily a major issue. Or what you believe or who you put your trust in. Alternatively, your internet and privacy standards.
Yet I am certain that we must be aware of this. And, if you are not already aware of this dark pattern when using web fonts, keep on read this article.
What are my options to be GDPR compliant?
If your website is running Google Fonts, you have 3 options:
- Host the fonts locally: You can already download your fonts from Google Fonts website directly.
- Keep using Google Fonts and ask your users for consent: Because of the data transfer to Google you're forced to ask your users for their consent. Build a Consent Banner that lists Google Fonts as one of the Data Processing Services (DPS). Also, you must obtain your user's permission before requesting the Google Font service. Postponing typeface files is never a good idea.
Loading fonts from a local folder might have a performance impact on your site.
- Use a GDPR compliant fonts service: Surprisingly, there are more than 25 alternatives to Google Fonts, not only websites but also apps for a variety of platforms, including Android, iPhone, Android Tablet and iPad. You probably already know services like Font Squirrel, Font Library, dafont.com, Adobe Fonts and Fonts.com.
Just ask yourself if the additional value of Google Fonts' convenience is worth it to pay the price for data privacy.
How to add a GDPR compliant font in Joomla 4?
So, you've decided to stop using Google Fonts? Great!
As you're probably not a developer and changing some lines of code in the files of your website can be scary for many, I've wrote this tutorial to show you how to add a GDPR compliant font to Joomla.
And you'll see, it's stupidly easy.
Now, it's time to talk about a kind bunny (not the one from Hugh Hefner): bunny.net.
Bunny.net is a Slovenian company started in 2014 with a simple idea of helping developers deliver content without breaking the bank. From there, it became a much more ambitious vision to help shape the internet. Bunny offers many web services like CDN, hosting and also, fonts! And of course, all these fonts are free and totaly GDPR compliant.
In this tutorial, we gonna replace Roboto with Open Sans which is a good option. Note in that case, Bunny uses the Google API but without any tracking.
- Open https://fonts.bunny.net and search for "Open Sans".
- Pick your style and select font weights and styles that best fit your unique website design, layout, and branding by clicking "Add variant" buttons
- Generate the CSS by clicking the "Font +" button on the top of the page to generate the CSS
@importor HTML<link>tag. Here, we copy the@import.
- Open your Joomla admin panel, navigate to System > Site Templates and open your template.
- Open your user.css or your custom.css file located in the CSS folder and paste the code generated above. Finaly, we add some rules to apply the new font to the body and to the titles of the website:
@import url(https://fonts.bunny.net/css?family=open-sans:300,300i,400,400i,500,500i,600,600i,700,700i,800i);
body {font-family: 'Open Sans', sans-serif;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-family: 'Open Sans', sans-serif;}- Save and close your CSS file.
- Before closing your admin panel, check that your template isn't loading external fonts.
Et voilà, you're done!
Wrapping up
Utilizing an HTML web font helps ensure that your site looks consistent across all devices. Furthermore, depending on the font employed, it will contribute to the website's professional, formal, or elegant appearance.
Keep in mind that each typeface has its own personality, so select one that is both legible and indicative of your business.
In this article, I’ve explained you why using Google Fonts on your website could be an issue, provided you some advices to protect your users's privacy and showned you how to add a GDPR compliant font to your Joomla website.
I really hope that Joomla will drop down the Google Fonts service because privacy is important and because there are free GDPR compliant solutions available.
