KPC
Kevin Powell - Community•2w ago
curiousmissfox

Privacy Friendly Google Fonts Alternative

Going through and cleaning up some of my bookmarked tools and wanted to share this- when you want to use a google font but want to be GDPR compliant Cool Labs You just change your head from this: 
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
To This: 
<!— COOL LABS-GDRP COMPLIANT GOOGLE FONT —>
<link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin />

        <link href="https://api.fonts.coollabs.io/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<!— COOL LABS-GDRP COMPLIANT GOOGLE FONT —>
<link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin />

        <link href="https://api.fonts.coollabs.io/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
(Can also be used in css @import as well, see the GH link for examples)
GitHub
GitHub - coollabsio/fonts: A privacy-friendly drop-in replacement f...
A privacy-friendly drop-in replacement for Google Fonts - coollabsio/fonts
8 Replies
13eck
13eck•2w ago
Anything that helps protect against the Big G is a win! -# or you can download the font from G fonts and host it with your website 😉
ἔρως
ἔρως•2w ago
Khoa
Khoa•5d ago
fontsource is a better solution
curiousmissfox
curiousmissfoxOP•7h ago
What’s font source and what makes features make it superior ?
Khoa
Khoa•7h ago
you self host the font
Khoa
Khoa•7h ago
https://github.com/fontsource/fontsource
GitHub
GitHub - fontsource/fontsource: Self-host Open Source fonts in neat...
Self-host Open Source fonts in neatly bundled NPM packages. - fontsource/fontsource
Khoa
Khoa•7h ago
that's it Let's say I want to use Inter in my project: https://fontsource.org/fonts/inter/install it's just a simple npm install
curiousmissfox
curiousmissfoxOP•6h ago
For quick projects (like on codePen) where I want access to a font but don’t have access to a file system is my use case for using google fonts or cool-labs. If it’s a “real” project, I do always self-host the font somewhere or within the project. So I can’t see the benefit for my workflow personally but im sure someone else will benefit! Thanks for contributing ! 🙏

Did you find this page helpful?