DEV Community

Discussion on: Next.js Trash Course - Part 2/3

Collapse
 
matjones profile image
Mat Jones

Good stuff! One thing that I noticed as a privacy enthusiast:

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400&display=swap');
Enter fullscreen mode Exit fullscreen mode

Don’t use Google fonts, especially not as dynamic imports. This basically unwittingly injects Google trackers into your users web browser.

Collapse
 
vinicius77 profile image
Vinicius Cerqueira Bonifácio

Thanks again, Mat.

I was not aware of that at all. Thanks for the hint. I am at his exact moment researching more about the topic. 🕶️ 📚

Collapse
 
singhrahul31 profile image
singhrahul31

Thanks Mat! What could be the alternative to this?

Collapse
 
dayvista profile image
Liam Davis

I use fontsource.org and the associated npm package. It allows you to install specific fonts as dependencies and import them into your project as you would any other library.

Collapse
 
matjones profile image
Mat Jones

My personal favorite is fontlibrary.org

Collapse
 
christiangroeber profile image
Christian Gröber

If you're using webpack there's a plugin that downloads the library on buildtime, that way you can still easily use google fonts without this privacy issue

Collapse
 
vinicius77 profile image
Vinicius Cerqueira Bonifácio

Thanks, Christian.

I am going to definitively check it out too. ✍️

Collapse
 
shrroy profile image
Shrroy

What the name of this plugin?

Collapse
 
tojacob profile image
Jacob Samuel G. • Edited

I was also unaware of this! I suppose it will be time to download the fonts and put them on my server. You can no longer trust anyone!

Collapse
 
dayvista profile image
Liam Davis

Check out the fontsource npm package

Collapse
 
vinicius77 profile image
Vinicius Cerqueira Bonifácio

I feel the same, Jacob. Looks like Google and similars are literally everywhere. 😨