CTRL K
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:
- It's missing the fixed width font
Computer Typewriter - 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 .