Jump to content

Is Google Fonts ( and Maps) violating European GDPR? / How to install a custom Font with Squarespace ...

Recommended Posts

Posted (edited)

We've just been contacted by few EU client that received letters from shady law firms pushing for a payment of around $200 or more to settle the issue. At the beginning of 2022, Germany ruled the use of Google Fonts as a violation of the GDPR.

So far, I'm only aware of such letters in Germany and Austria yet but I believe this could happen in any EU country. I'm happy to open a discussion on this with best pratices. (inviting @paul2009 @KwameAndCo @colin.irwin @christyprice ....)I'm still not sure if replacing all fonts will 100% cut the bridge to a Google Server, but that what this post is here for, while I'm hoping to get a statement from Squarespace.

 

 Here's a related article by @Centerliner that becomes more and more relevant


Here is a great, detailed German article:
https://calysto-marketing.at/dsgvo/abmahnungen-wegen-nutzung-von-google-fonts-durch-rechtsanwalt-mag-hohenecker-im-namen-von-frau-eva-zajaczkowska-21-8-2022/?moderation-hash=2584c485cf8b3c3908d420c174dfa888&unapproved=1&utm_source=pocket_mylist

 

While right adjustment to your privacy settings can cover this as well, here is a quick tutorial

______________
QUICK TUTORIAL
how to install a custom font on your website (instead of loading it from a third party server - this is also the same procedure if a client asks you to use their custom font on the website)

  • set all fonts to a system font (like Arial) - thanks to @Selistina for the comment 🙂
  •  Get your font files ready (I mostly use .otf or .ttf as they work very well)
    NOTE: if you want have "light" and "bold" or "strong" you need to have an individual font file for that

 

  •  go to DESIGN > Custom CS

 

  •  At the bottom you'll find "MANAGE CUSTOM FILES"

644092902_Bildschirmfoto2022-08-24um07_14_18.thumb.png.bfe1849282cf12f34ba87870177ab96c.png

  • Just upload the font files

 

  •  When you click one of your uploaded fonts it will paste the file path into your css (make sure this doesn't mess with your existing CSS


Example:

https://static1.squarespace.com/static/624ac8c48e016a33e668e7db/t/6257cda47c57db4f2bb5146f/1649921445359/MessinaSans-Bold.ttf
  • Save those file links for later

 

  • Copy paste this CSS and give your uploaded fonts a NAME
@font-face {
font-family: 'SEMIBOLD';
src: url('https://static1.squarespace.com/static/624ac8c48e016a33e668e7db/t/6257ceb19301a214871b3282/1649921713264/MessinaSans-SemiBold.ttf');
}

@font-face {
font-family: 'REGULAR';
src: url('https://static1.squarespace.com/static/624ac8c48e016a33e668e7db/t/6257ce68e86b157650ac08a1/1649921641106/MessinaSans-Regular.ttf');
}

@font-face {
font-family: 'LIGHT';
src: url('https://static1.squarespace.com/static/624ac8c48e016a33e668e7db/t/6257cdbe9301a214871b2334/1649921471023/MessinaSans-Light.ttf');
}

 

  • Now you can individually apply those fonts to your website like this
h1, h2, h3 {font-family: 'SEMIBOLD'}

h4 {font-family: 'LIGHT'}
h4 strong {font-family: 'SEMIBOLD'}

p {font-family: 'LIGHT'}

.Header-nav {font-family: 'SEMIBOLD'}

.summary-title {font-family: 'SEMIBOLD'}

.summary-read-more-link {font-family: 'SEMIBOLD'}

Note: It's also possible to apply font weight settings (h4 is the light one and h4 strong is bold )

Please be aware that there are more font cases with your website ( e.g. .blog-title ... ) to this is not covering all of them

______________


 

Edited by ArminB
update

About Armin:
Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084
Website: www.braunsberger-media.com

Posted

Hi,

I am facing the same issues and your CSS solution seems to work well. Since I am not at all experienced in CSS and coding, do you know where I can find the CSS-"names" for all font cases (like p, h1, h2, ...)? That would be really helpful!

Thanks!

Posted
19 minutes ago, AndreasZed said:

That would be really helpful!

@tuanphan prepared a full list
https://beaverhero.com/squarespace-71-css-list/

We're currently evaluating how the privacy disclaimer needs to be adjusted so this might not be neccessary...


@tuanphan while you're here. I'm not sure if overwriting all text classes 100% gets rid of this Google API at all? What's your opinion @WillMyers?

About Armin:
Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084
Website: www.braunsberger-media.com

Posted (edited)
On 8/24/2022 at 6:49 AM, ArminB said:

I'm still not sure if replacing all fonts will 100% cut the bridge to a Google Server, but that what this post is here for, while I'm hoping to get a statement from Squarespace.

As you say @ArminB, you can avoid using Google Fonts, avoid using reCAPTCHAs and avoid using YouTube videos but we need a definitive answer, from a product specialist at Squarespace, to confirm that there are no other integrations that are causing site visitors to connect to Google servers.

I'm awaiting that definitive response from the Trust & Safety team.

Edited by paul2009
edited for clarity

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Posted

It is not enough to just overwrite the fonts. 

First step is to cut the connection to Google / Adobe servers. 

To do so you will have to set all fonts to system fonts like Arial and then set your custom fonts. 

I explained it here already, for both 7.0 and 7.1

To demonstrate, I removed all Google/Adobe fonts from this website: 

https://khaki-sapphire-m7jw.squarespace.com/ 
Passwort: 2022

There is no connection to Google or Adobe! See image attached.

Also to make sure a 7.0 site is GDPR (in Germany DSGVO) (more) complient you will need to remove the sharing buttons (even the like/heart button!)

Google fonts.png

Posted (edited)

The team have provided an initial list of circumstances when a visitor to a Squarespace website will connect to a Google server. This will happen if any of the following are true:

Note that this is not an exhaustive list (more to come).

Regarding fonts, note that in Squarespace 7.0 you can now choose GDPR-compliant fonts by clicking SET ALL TO SYSTEM FONTS at the bottom of the Site Styles panel. This replaces all the Google or Adobe fonts with system fonts. This is in addition to the font packs already available in 7.1.

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Posted
18 hours ago, paul2009 said:

Regarding fonts, note that in Squarespace 7.0 you can now choose GDPR-compliant fonts by clicking SET ALL TO SYSTEM FONTS at the bottom of the Site Styles panel.

Thank you for the information! I am using Sqaurespace 7.1 but can't find the SET ALL TO SYSTEM FONTS option at the bottom of the Site Styles panel. Where exactly is it?

Posted (edited)
3 hours ago, aureliaserena said:

I am using Squarespace 7.1

On Squarespace 7.1 you can select one of the built-in font packs:

  • Under Sans-serif, select Helvetica Neue
  • Under Serif, select Georgia
  • Under Mixed, select Verdana
Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Posted (edited)

Hey All! Was just talking about this with some other designers. This seems like a huge and very concerning issue.

Even with embedding fonts or uploading woff files, the google fonts will still load in the background. Not to mention it's just a huge hassle to upload a bunch of font files when they're already built right in. Also, any business owner who DIYs their site is definitely not going to know anything about this.

Does anyone from the Squarespace team have any insights into if/how this is being addressed?

Edited by ampddesigns
  • 2 weeks later...
Posted
On 9/2/2022 at 7:28 PM, ampddesigns said:

Does anyone...have any insights into if/how this is being addressed?

Squarespace are aware that this is an important issue. Teams are working to audit all the Google connections and integrations which could be passing a visitor's IP address to Google.

Understandably, this involves multiple teams and departments and so it isn't possible to give an estimated delivery time but they understand the urgency and hope to have this information available soon. 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

  • 4 weeks later...
Posted
On 9/2/2022 at 12:16 PM, paul2009 said:

On Squarespace 7.1 you can select one of the built-in font packs:

  • Under Sans-serif, select Helvetica Neue
  • Under Serif, select Georgia
  • Under Mixed, select Verdana

Hello, I followed the above steps, but there is still a google font being loaded by squarespace into the header of our site:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&family=Lato:wght@300">

It seems like this is a bug from squarespace, as duplicating the website following the described fix actually solves the problem. Please advise 🙏

Posted

Hi, is there a simple way to switch off Google Fonts?

Using Google Fonts is illegal in Europe, so we need a way to switch them off..

Thank you and all the best!

Posted

Well, this makes Squarespace only  useable in a legal way for programmers..

So your very first statement on your website is a lie..

Quote

 

Create your website

Easy-to-edit website templates, no coding needed

 

PLEASE FIX IT ASAP!!

Create your website

Easy-to-edit website templates, no coding needed

  • 3 weeks later...
Posted
On 8/23/2022 at 10:49 PM, ArminB said:

We've just been contacted by few EU client that received letters from shady law firms pushing for a payment of around $200 or more to settle the issue. At the beginning of 2022, Germany ruled the use of Google Fonts as a violation of the GDPR.

So far, I'm only aware of such letters in Germany and Austria yet but I believe this could happen in any EU country. I'm happy to open a discussion on this with best pratices. (inviting @paul2009 @KwameAndCo @colin.irwin @christyprice ....)I'm still not sure if replacing all fonts will 100% cut the bridge to a Google Server, but that what this post is here for, while I'm hoping to get a statement from Squarespace.

 

 Here's a related article by @Centerliner that becomes more and more relevant


Here is a great, detailed German article:
https://calysto-marketing.at/dsgvo/abmahnungen-wegen-nutzung-von-google-fonts-durch-rechtsanwalt-mag-hohenecker-im-namen-von-frau-eva-zajaczkowska-21-8-2022/?moderation-hash=2584c485cf8b3c3908d420c174dfa888&unapproved=1&utm_source=pocket_mylist

 

While right adjustment to your privacy settings can cover this as well, here is a quick tutorial

______________
QUICK TUTORIAL
how to install a custom font on your website (instead of loading it from a third party server - this is also the same procedure if a client asks you to use their custom font on the website)

  • set all fonts to a system font (like Arial) - thanks to @Selistina for the comment 🙂
  •  Get your font files ready (I mostly use .otf or .ttf as they work very well)
    NOTE: if you want have "light" and "bold" or "strong" you need to have an individual font file for that

 

  •  go to DESIGN > Custom CS

 

  •  At the bottom you'll find "MANAGE CUSTOM FILES"

644092902_Bildschirmfoto2022-08-24um07_14_18.thumb.png.bfe1849282cf12f34ba87870177ab96c.png

  • Just upload the font files

 

  •  When you click one of your uploaded fonts it will paste the file path into your css (make sure this doesn't mess with your existing CSS


Example:

https://static1.squarespace.com/static/624ac8c48e016a33e668e7db/t/6257cda47c57db4f2bb5146f/1649921445359/MessinaSans-Bold.ttf
  • Save those file links for later

 

  • Copy paste this CSS and give your uploaded fonts a NAME
@font-face {
font-family: 'SEMIBOLD';
src: url('https://static1.squarespace.com/static/624ac8c48e016a33e668e7db/t/6257ceb19301a214871b3282/1649921713264/MessinaSans-SemiBold.ttf');
}

@font-face {
font-family: 'REGULAR';
src: url('https://static1.squarespace.com/static/624ac8c48e016a33e668e7db/t/6257ce68e86b157650ac08a1/1649921641106/MessinaSans-Regular.ttf');
}

@font-face {
font-family: 'LIGHT';
src: url('https://static1.squarespace.com/static/624ac8c48e016a33e668e7db/t/6257cdbe9301a214871b2334/1649921471023/MessinaSans-Light.ttf');
}

 

  • Now you can individually apply those fonts to your website like this
h1, h2, h3 {font-family: 'SEMIBOLD'}

h4 {font-family: 'LIGHT'}
h4 strong {font-family: 'SEMIBOLD'}

p {font-family: 'LIGHT'}

.Header-nav {font-family: 'SEMIBOLD'}

.summary-title {font-family: 'SEMIBOLD'}

.summary-read-more-link {font-family: 'SEMIBOLD'}

Note: It's also possible to apply font weight settings (h4 is the light one and h4 strong is bold )

Please be aware that there are more font cases with your website ( e.g. .blog-title ... ) to this is not covering all of them

______________


 

Thanks for all the details.  I'm not a coder or a designer, just a girl with a dream and google.  

I'm trying to follow all the instructions and the GDPR complications.  I still can't seem to customize my fonts. 

Here's a screen grab of my code, using my blog as the tester 

On 8/23/2022 at 10:49 PM, ArminB said:

We've just been contacted by few EU client that received letters from shady law firms pushing for a payment of around $200 or more to settle the issue. At the beginning of 2022, Germany ruled the use of Google Fonts as a violation of the GDPR.

So far, I'm only aware of such letters in Germany and Austria yet but I believe this could happen in any EU country. I'm happy to open a discussion on this with best pratices. (inviting @paul2009 @KwameAndCo @colin.irwin @christyprice ....)I'm still not sure if replacing all fonts will 100% cut the bridge to a Google Server, but that what this post is here for, while I'm hoping to get a statement from Squarespace.

 

 Here's a related article by @Centerliner that becomes more and more relevant


Here is a great, detailed German article:
https://calysto-marketing.at/dsgvo/abmahnungen-wegen-nutzung-von-google-fonts-durch-rechtsanwalt-mag-hohenecker-im-namen-von-frau-eva-zajaczkowska-21-8-2022/?moderation-hash=2584c485cf8b3c3908d420c174dfa888&unapproved=1&utm_source=pocket_mylist

 

While right adjustment to your privacy settings can cover this as well, here is a quick tutorial

______________
QUICK TUTORIAL
how to install a custom font on your website (instead of loading it from a third party server - this is also the same procedure if a client asks you to use their custom font on the website)

  • set all fonts to a system font (like Arial) - thanks to @Selistina for the comment 🙂
  •  Get your font files ready (I mostly use .otf or .ttf as they work very well)
    NOTE: if you want have "light" and "bold" or "strong" you need to have an individual font file for that

 

  •  go to DESIGN > Custom CS

 

  •  At the bottom you'll find "MANAGE CUSTOM FILES"

644092902_Bildschirmfoto2022-08-24um07_14_18.thumb.png.bfe1849282cf12f34ba87870177ab96c.png

  • Just upload the font files

 

  •  When you click one of your uploaded fonts it will paste the file path into your css (make sure this doesn't mess with your existing CSS


Example:

https://static1.squarespace.com/static/624ac8c48e016a33e668e7db/t/6257cda47c57db4f2bb5146f/1649921445359/MessinaSans-Bold.ttf
  • Save those file links for later

 

  • Copy paste this CSS and give your uploaded fonts a NAME
@font-face {
font-family: 'SEMIBOLD';
src: url('https://static1.squarespace.com/static/624ac8c48e016a33e668e7db/t/6257ceb19301a214871b3282/1649921713264/MessinaSans-SemiBold.ttf');
}

@font-face {
font-family: 'REGULAR';
src: url('https://static1.squarespace.com/static/624ac8c48e016a33e668e7db/t/6257ce68e86b157650ac08a1/1649921641106/MessinaSans-Regular.ttf');
}

@font-face {
font-family: 'LIGHT';
src: url('https://static1.squarespace.com/static/624ac8c48e016a33e668e7db/t/6257cdbe9301a214871b2334/1649921471023/MessinaSans-Light.ttf');
}

 

  • Now you can individually apply those fonts to your website like this
h1, h2, h3 {font-family: 'SEMIBOLD'}

h4 {font-family: 'LIGHT'}
h4 strong {font-family: 'SEMIBOLD'}

p {font-family: 'LIGHT'}

.Header-nav {font-family: 'SEMIBOLD'}

.summary-title {font-family: 'SEMIBOLD'}

.summary-read-more-link {font-family: 'SEMIBOLD'}

Note: It's also possible to apply font weight settings (h4 is the light one and h4 strong is bold )

Please be aware that there are more font cases with your website ( e.g. .blog-title ... ) to this is not covering all of them

______________


 

Thanks for such detailed instructions.  I'm not a coder or a designer, just a girl with a dream and google. 🤣 

I *think* I'm halfway there because I've managed to change a single font format on my site.  But am puzzled as to why the others aren't working.  I'm using my blog page as the test because my full website it not designed yet.  https://rooted.to/blog

The blog menu page looks like the title font has been updated.  But the title formatting of the actual post is not correct.  Some of other font styles have updated (H4), but not all of them (paragraph, other headings, etc)

Here's a snipped of the css code - do you see any errors?

And for reference, here is what the font families are supposed to look like...

 

image.png

image.png

image.png

image.png

image.png

image.png

Posted

Hi, I've been working on this over the last days.

I've reseted the font styles to default before changing it to Proxima Nova which does not seem to be a Google Font. But unfortunately it still exists and it seems it has to do with the Youtube videos. I would like to have videos on our website tho..

Has anyone gotten an update from Squarespace on how this issue can be addressed? 

 

Posted

Hi @SuYinV,

Embedding Youtube videos, using map blocks, and adding Google reCAPTCHA to form and newsletter blocks will result in Google fonts loading in your site’s source code.

To avoid this from happening, use other third-party services for video hosting (like Vimeo) and embedding maps on to your site, and disable Google reCAPTCHA on your forms. 

Posted

Hi all, I am investigating the same issue and managed to replace the Google Fonts as described. However, as mentioned before there is a remainder in the code that I cannot remove:

Quote

All fonts Fijalla, Franklin and Roboto have been uploaded and are saved locally. Is the issue therefore something only Squarespace can solve or is there anything that can be done to remove this?
Thanks!

Posted

Now, a few weeks later, I believe that there is NO need for action and wait for EU and national data authorities. We advise clients to wait and see unless they get an official writing from an official department. So, it' not worth the effort at all. I don't feel comfortable taking money from clients for those work-arounds.
This is just panic - made by shady lawyers in need for fast cash.

PS: Wonderful organization - they actually fight for privavy in the right way (Founded by Marcus Schems an Austrian lawyer that already won a few cases against FB:
https://noyb.eu/de
 

About Armin:
Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084
Website: www.braunsberger-media.com

  • 2 weeks later...
Posted

Hi, we are located in Germany and received a legal notice from a Berlin law firm, requesting to comply by paying 170 EUR or else get sued. 

The practice might be shady, but it seems that legal grounds are given, based on a court ruling in Munich/Germany. Court ruling 19.01.2022

Our lawyers are onto it. Independently of the ethics and shady practices, I would expect that given our premium business subscription to have quickly a solution for this! 

We chose Squarespace to get great design and easy to setup website in order to focus on our core business. This whole thing already costs us (and I believe others) our valuable time. It would be great if Squarespace could include the fonts directly into the website, without accessing Google servers or at least offer a super-easy to use solution.

Thanks!

 

Posted
1 hour ago, atmesa said:

I would expect that given our premium business subscription to have quickly a solution for this! 

Please contact Squarespace Customer Care using a support ticket to raise the awareness of the impact of this issue on your business and the need for a better solution. Squarespace employees don't routinely monitor this forum for feedback (see the guidelines - item 6) so won't take action as a result of your forum post.

Did this help? Please give feedback by clicking an icon below  ⬇️

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Posted

I used the quick tutorial by @ArminB but for me it only works on certain browsers. Safari still defaults to the back up font, my Chrome is fine, but my client's Chrome defaults. Has anyone else had this issue?

  • 2 weeks later...
Posted
On 11/21/2022 at 11:06 AM, paul2009 said:

Please contact Squarespace Customer Care using a support ticket to raise the awareness of the impact of this issue on your business and the need for a better solution. Squarespace employees don't routinely monitor this forum for feedback (see the guidelines - item 6) so won't take action as a result of your forum post.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thanks Paul2009 for the advice. I just raised a support ticket addressing Google Fonts and GDPR compliance. If this issue concerns you too, please approach them as well. I fully agree with atmesa's post and hope Squarespace will prioritize this issue quickly.

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.