[tw5] Re: [TW5] How to embed a font (using @font-face and data-url)

Google Group (Read Only)
#1

I encode it manually instead:

  1. download the font file, for example, FiraCode-VF.woff2
  2. base64 '/Users/linonetwo/Downloads/Fira_Code_v6.2/woff2/FiraCode-VF.woff2' -o '/Users/linonetwo/Downloads/Fira_Code_v6.2/woff2/FiraCode-VF.woff2.base64.txt' as said in css - Converting and rendering web fonts to base64 - keep original look - Stack Overflow
  3. put base64 string in the `
    src: url(‘data:@file/octet-stream;base64,yourbase64’);

as said in html - Base64 encoded OpenType font-face using data URI - Stack Overflow

An example: fix: fira code loading is slow, use local version · tiddly-gittly/itonnote-theme@ff75e1a · GitHub

在2017年10月2日星期一 UTC+8 06:32:39 写道：

Embedding a font into Tiddlywiki
#2

Hi Lin OneTwo,

It isn’t necessary to do the base64 encoding manually. Have a look at the font embedded in the “Startlight” theme that is accessed via the <<datauri>> macro:

Best wishes

Jeremy

2 Likes