The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Serve Google Fonts Locally To Avoid Tracking

TODO: Pull subtitle into page object

Notes

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Serve Google Fonts Locally To Avoid Tracking

Google Fonts is a very cool service. I expect it's
done more for improving typography on the web than
pretty much everything else combined. But, I'm 
increasingly wary of the tracking. So, I've taken
to hosting my own versions of the fonts. Here's how
I do it:


-- list

- Select a font with an eligible license from the Google 
Fonts collection.

- Instead of downloading the font from the download
button, copy the link to the CSS file from embed codes
and open it directly. 

- Download the individual versions of the font from
the `src`` URLs and store them in your site directory 
structure. 

- Paste the CSS from the Google file into your 
site's CSS and update the `src:`` attributes to 
point to your copies. 

It took me about 15min to walk through that process
for a font. Given that I'm thinking on a twenty-year
timeline, that's an easy cost to pay. 


-- notes

- Fonts download as `.ttf`` files when I use the button
on the website. The URLs in the CSS file area `.woff2``
files that have been significantly smaller in my experience. 
For example, the set of Atkinson Hyperlegible .ttf fonts
is 217KB. The corresponding .woff2 files are 65KB. 

- There's 8 .woff2 files and only 4 .ttf. But, the .woff2 files
include both `latin`` and `latin-ext``. Depending on the 
site content you could cut down to just the four you need
and reduce the download size even more (e.g. `latin`` is
40KB)

- You don't have to use all the fonts. (e.g. I'm not using
the 700 weight bold italics. So, my download is three files
that weigh a collective 33KB)

- You don't get the benefit of standard google fonts likely
already being a browsers cache on your first site load. That
doesn't concern me.


-- ref
-- title: MDN: @font-face Documentation
-- url: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face


-- blurb

-- categories
-- Fonts
-- Design 
-- CSS 

-- metadata
-- date: 2023-04-14 12:55:05
-- id: 2oqsrjbv
-- site: aws
-- type: post
-- status: draft