philihpAboutPGPLightning

Importing the Computer Modern font as Woff2

Philihp Busby,1 min read

I came across this repo , which advertised that Computer Modern could be added to a website by simply including a bit of CSS. This is great, except:

  1. It's missing the fixed width font Computer Typewriter
  2. It's broken because of a Github Pages issue in that repo

So I reinvented the wheel. I got the OTF fonts from CTAN , which are usable as they are but I compressed them to WOFF2 with this , so they’re only half the size. Now I can include them with the CSS:

<link rel="stylesheet" href="https://philihp.com/assets/fonts/fonts.css" /> <style> body { font-family: "Computer Modern", serif; font-display: fallback; } pre, code { font-family: "Computer Typewriter", monospace; font-display: fallback; } </style>

You can use this  as long as you don’t care for anyone using Internet Explorer, and I’m okay with that .

The value you use for font-display is probably personal taste. How do you feel about late swaps of the font? I think fallback is a good compromise. IE also fails at this .

GitHub · Bluesky · LinkedIn · Instagram · KeybaseRSS

Built from 8f0906ac CC BY 4.0 — with love from San Francisco.