articles/2025/Reducing-web-font-size.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!doctype html>
<html lang="EN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/style.css">
    <title>Reducing web font size</title>
  </head>
  <body>
    <header>
      <h1>Bloggings</h1>
      <a href="/index.php">Back</a>
      
    </header>
    
<main>
<article>
<h2>Reducing web font size</h2>
<h3>2025-04-06</h3>
<h4>I stumbled on a marvellous post</h4>
<p>I started using the Jetbrains font for this blog, but adding the font in the css file makes it 
pretty heavy, and I've been considering removing it. BUT...</p>
<p>I stumbled on <a href="https://neilzone.co.uk/2024/05/faffing-with-fonts-to-reduce-my-web-page-size-by-two-thirds/">this post</a>
and tried Neil's suggestion on the JetbrainsMono-Regular truetype font, and the font filesize was reduced from 274k to 66Kb</p>
<code>pipx install fonttools
pyftsubset JetbrainsMono-Regular.ttf --output-file=JetbrainsMono-Regular-reduced.ttf --unicodes=U+0020-007E</code>
<p>So I decided to try it on the JetBrainsMono Regular Nerdfont, a whopping 2.4Mb, but the result was even better, 18Kb!</p>
<code>.rw-r--r-- 66k philip  6 avril 23:04  JetBrainsMono-reduced.ttf
.rw-r--r-- 18k philip  6 avril 23:20  JetBrainsMonoNerd-reduced.ttf
</code>
<p>Understanding why will take a bit of forensics, in the mean time this blog has become much lighter.</p>
<h3>Update</h3>
<p>I wound up just using the default monospace for the main text, and Ultra (reduced) for the title .</p>

</article>
</main>
<footer>
<p>&nbsp;</p><p>§</p></footer>
</body></html>