Day150 — Embedding font in HTML or SVG
I wanted to embed the font in an SVG for a project. Here records the method I used.
Embedding ensures font availability. Once the HTML is downloaded, the font is never missed. Although a full set of font can be large in size, it can be a subset to only include letters and numbers, or even a single character, to reduce its footprint.
The embedding involves converting the font into a base64 format. It will introduce a 33% overhead to the original file size. The font type I tried to embed is woff2, but not other font types, such as ttf, otf, but they should be working fine too.
Procedure to create an embedded font using FontSquirrel
- go to FontSquirrel
- download the selected font, says “ANONYMOUS”.
- go to “Gebfont Generator” and upload that font (Anonymous.ttf). I found that you can’t upload a font downloaded from Google font. It will say the font is corrupted.
- select below configuration. Remember to check the “Base64 Encode” option.
5. Download the kit and unzip it.
6. “stylesheet.css” stores the embedded font. You can use it in your CSS.
Summary
oringal font file size: 137KB
base64 font file size after subset: 18KB
original SVG file size: 2KB
SVG embedded with font: 20KB
1080x1080 png file size: >200KB
Although the file size is 10 folded after the font is embedded, it is still much smaller than the png version.
FontForge is used to view the font
additional resources:
