I built a free tool you can use to check if a website is using Google Fonts. It tests the website using headless Chrome (Puppeteer), so all methods of font loading are captured, not just hardcoded references.
I've found that for this sort of thing, @next/font (<a href="https://beta.nextjs.org/docs/optimizing/fonts" rel="nofollow">https://beta.nextjs.org/docs/optimizing/fonts</a>) is a pretty handy library (from Vercel) for Next.js projects. You can import Google Fonts as simple as:<p><pre><code> import { Roboto } from '@next/font/google'
const { className } = Roboto({ weight: '500' })
</code></pre>
Now you can add this class name to any React elements and they'll have the Roboto font. Next.js will handle all of the self-hosting and wiring behind-the-scenes (i.e. no requests made to Google from the client).<p>Believe this was one of the announcements to come out of the most recent Next.js conference, so info may only be available on the beta version of their docs site (linked above).
I'm not sure how interesting this is, but considering the result urls are sequential, it's very simple to see what sites have been checked.<p><a href="https://fontsplugin.com/google-fonts-checker/?test_id=19110" rel="nofollow">https://fontsplugin.com/google-fonts-checker/?test_id=19110</a><p><a href="https://fontsplugin.com/google-fonts-checker/?test_id=19111" rel="nofollow">https://fontsplugin.com/google-fonts-checker/?test_id=19111</a><p><a href="https://fontsplugin.com/google-fonts-checker/?test_id=19112" rel="nofollow">https://fontsplugin.com/google-fonts-checker/?test_id=19112</a>
If you're hosting your website with a static site generator on github/gitlab/sourcehut etc., check the documentation for whatever theme you're using. I'm using the Beautiful Hugo theme and switching to self-hosted fonts (and javascript) was as easy as adding<p><pre><code> [Params]
selfHosted = true
</code></pre>
in the top-level config.toml.
Thanks for this tool.<p>One piece of feedback – it's not great that the `test_id` is a small sequentially generated integer; it's trivial to iterate across all of the URLs that have been tested.
as a big fan of self-hosting all the things, without CDNs (except vids or hi res galleries), i've been a regular user of google-webfonts-helper:<p><a href="https://gwfh.mranftl.com/fonts" rel="nofollow">https://gwfh.mranftl.com/fonts</a>
This is nice.<p>Hosting fonts locally is something i've advocated since the beginnings of Google Fonts.<p>Apart from the stated benefits it also means fewer DNS lookups i.e. yet another point of failure gone and yet another privacy bonus. It's not just google that can spy on you, also your ISP.<p>PS: It's not just Google Fonts, this applies to all fonts stored on CDNs.