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:
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:
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
Starrwulfe 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:
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