How do I use a custom font with Phoenix 1.6 and ESBuild?

Phoenix Forum Questions / Help
, , ,
16

The solution I have come up with is to just skip all the ESBuild config stuff and manually convert the .ttf files to .woff2 and then just manually convert the .woff2 files to base64-encoded datauri strings that I manually include in my CSS file.

First, I use this tool to convert .ttf to .woff2: TTF to WOFF2 | CloudConvert

Then I use this tool to covert .woff2 to a base64-encoded datauri string: Woff2Base: Convert .woff2 to accurate Base64 css.

Then I create a /assets/css/fonts.css file and drop the @font-face rules in there, with the entire base64 string included, as follows:

@font-face { 
  font-family: "QuizDrill";
  src: url(data:application/octet-stream;base64,d09GMgABAAAAAHXIABIAAAAiNV/D/f09uyBBZB9W+3ovLSgYkiIYUScoOOMkzfm2/7LYcNpb5clKparZy9oQnYKYSgPwoISWRgs3iJBhX/+ib/4nZm3KxhqQXEcUACUh7T/8s/398//BtL3vL8qXMex/yq3LNP8q8SQUvyVQQT4d/DHVfj/7spNOX/8fzl6irz/pbkO/gdR55B/E35yUwY=);
}

Note that I have shortened the base64 string in this example because it is thousands (or tens of thousands) of characters long.

Then at the top of my /assets/css/app.css file I have the line:

@import "fonts";

This allows me to use these local fonts bundled with my CSS.

4 Likes