Last Updated on May 17, 2023
- Does your website use Google fonts?
- Update to the Google Fonts Scam (Fall 2022)
- What can we do about Google Fonts and Why is it Important?
- STEP 1: Is your website bringing in, for example, Google Fonts?
- STEP 2: How do I find the link to the fonts in my website theme?
- STEP 3: Go to Google Fonts and choose the fonts you want.
- STEP 4: Open up your website hosting, or FTP tool.
- STEP 5: Let your website know you are using a specific font and where it is.
Does your website use Google fonts?
I am really excited to offer this new playlist of tech talks, together with Bridget Willard, and hope you will find them useful. An accessible net is only possible if we all understand how to use it. Let’s get everyone using and understanding the tools available!
You can find our TechTalk Playlist on YouTube right here!
Many of our website themes deliver fonts, icons, and other 3rd party material directly to our websites. This is easy and fast and something we don’t think about. This data is sometimes delivered unsecured, and over time it might become a lot of data, thus slowing down our websites.
Update to the Google Fonts Scam (Fall 2022)
For any of you living in Europe, you know that Data Protection laws can bring out the worst in people. Recently, especially in Germany and Austria, some law offices have been notifying people using Google Fonts via a direct link in the header that this is illegal. They have sent demands for fine payment or worse. Many people have fallen for this scam.
Luckily this is now under investigation, and thanks to my partner Bettina Heuser for alerting me to the fact.
This wave of warnings is illegal. On 21.12.2022, the public prosecutor’s office in Berlin took action against lawyer Kilian Lenard. Nearly 350,000 euro had this already extorted (per warning 170, – euro) however 420 warned Website operators had provided criminal complaint.
It looks bleak for the lawyer, because by means of a software homepages were searched, which did not install Google Fonts on the server side and thus the source text gives yes information. This software had logged a visit, not a person, so there is no violation of personal rights.
HOWEVER this does not mean you do not need to load Google fonts locally. People use your website, not bots.
What can we do about Google Fonts and Why is it Important?
- + This is an easy thing to change on your website.
- + This helps get your hands dirty and gives you confidence when it comes to larger problems.
- + It is a free way to improve your website!
STEP 1: Is your website bringing in, for example, Google Fonts?
Go to datasykdd and check. https://webbkoll.dataskydd.net/de Is there a 3rd party data coming in? If not, then we’re done LOL! If there is we have a few things to do. You MAY want to have Google fonts in your website later, so you may like to watch to the end of our video.
Do You Not Want Google Fonts?
If you simply no longer want Google Fonts, and are happy with a system font – such as I have on my own website – you can block them. WordPress offers a few good plugins like Disable & Remove Google Fonts or Autoptimize. There is also a Google font blocker from Borlabs: https://borlabs.io/borlabs-font-blocker/
STEP 2: How do I find the link to the fonts in my website theme?
Open up your dashboard. Look at your Theme Editor. Fonts are usually called up in the header.php, or a similar file. Once you identify it, you can comment it out.
Example:
/** wp_register_style( 'accelerate_googlefonts', '//fonts.googleapis.com/css?family=Roboto:400,300,100|Roboto+Slab:700,400&display=swap' ); wp_enqueue_style( 'accelerate_googlefonts' ); /** Note: when your theme updates, you will need to do this again, OR add a Child Theme. More about that in another talk!
STEP 3: Go to Google Fonts and choose the fonts you want.
https://fonts.google.com/ Google gives us free fonts that we can download to our own server. Download the fonts you want, and unzip the zip files they download in.
STEP 4: Open up your website hosting, or FTP tool.
Create a folder called Fonts in your wp-content folder – or similar media folder for your own CMS. Upload the font files into this folder.
STEP 5: Let your website know you are using a specific font and where it is.
After uploading your fonts, add the font family to your stylesheet.css file OR directly into the theme customizer. After that, add the path to your fonts also in your stylesheet.
Example:
This CSS tells my website what font family I want to use and where:
body, p, h1, h2, h3, h4, h5, h6 {font-family: 'Send Flowers', cursive;} This tells my website where it can find my font family:
@font-face {
font-family: 'Send Flowers';
font-style: normal;
font-weight: 400;
src: local('Send Flowers'), local('Send-Flowers'), url('/wp-content/fonts/SendFlowers-Regular.ttf') format('woff2')
}Save your stylesheet and now check to see if your website shows your font.
ALL DONE! You have saved some data protection headaches and possibly sped up your website page speed. Great job!
HOT TIP: You can do everything you need for the Google Font process now on one website: https://gwfh.mranftl.com/fonts
Contact Me with Your Questions About Website Page Speed too!
Contact me if you have any questions! I’d love to help.
With great thanks for the photo from Unsplash! https://unsplash.com/@brett_jordan