web fonts

This article is a stub. You can help the IndieWeb wiki by expanding it.

web fonts are a way to serve custom fonts on websites, and used by some IndieWeb sites.

Why

Web fonts are one way of presenting different typography as part of the visual design of a web site. Choosing different fonts can give your website a more unique and hand-crafted appearance.

Why Not

Web fonts can slow down page load times. Depending on the configuration, web fonts can either hide text while the page loads or cause layout shifts when switching to the new font. Consider limiting the number of web fonts and/or using web-safe system fonts instead.

How to

See the MDN tutorial for how to get started using web fonts:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts

How to self-host

Elliot Jay Stocks (guest article on Google Fonts site): Self-hosting web fonts

How to compress

Advanced techniques for compressing web fonts:

https://daveon.design/introducing-fontimize-subset-fonts-to-exactly-and-only-your-websites-used-characters.html

IndieWeb Examples

Examples of IndieWeb sites using web fonts.

Sarah Hibner

hibs has used web fonts on her personal site https://sarah-hibner.com/ and ideas site https://outer-outer.space/ since at least 2020

Jason Gatewood

JL Gatewood is currently using a combination of self hosted and CDN hosted webfonts on his site http://starrwulfe.xyz

See also presentation at IndieWebCamp 2020 East:

An Intro to Variable Fonts

Past Examples

Ashton McAllan used a custom handwriting font for article titles on acegiak.net from 2014-2021 which was documented here: Handwritten Post Titles (original post offline since ~2021: http://acegiak.net/2014/09/20/handwritten-post-titles/)
Anthony Ciccarello used to use Google's Roboto font via Google Fonts, and later self hosting. However since 2023-10-01 his site has used system fonts to reduce the page size.

Tools

https://www.yourfonts.com/ — paid service for creating a custom font from your handwriting
https://github.com/system-fonts/modern-font-stacks - list of system font stacks that can be used instead of web fonts

Why