It turns out I don’t need to adjust my mix.exs file or my config/dev.exs file for the local font to work in my toy example app. I can just drop the font in my fonts folder, reference it in my CSS file, and I’m done. So I can get rid of the stuff having to do with the file loader for .ttf files.
tadasajon
tadasajon
Ok, so it turns out that I can entirely delete the priv/static/font directory and the assets/font directory and my toy app still has the American Typewriter font showing up. Maybe it is cached somewhere?
It seems like in my real app there is nothing I can do to get the American Typewriter font to work, and in my toy app there is nothing I can do to get it to stop working.
0
tadasajon
ok, so now I’ve commented out the @font-face rule in my CSS file and I’ve also deleted the assets/fonts directory and the static/fonts directory, which contained the American_Typewriter_Regular.ttf file.
But the font is showing up fine in my real app (not my toy app).
Before there was nothing I could do to make it work and now there is nothing I can do to break it. So I guess the font got cached somewhere.
But I want to make sure that the font works even if someone’s computer has never seen or heard of this font before, which is why I want to have a copy of the font bundled in my CSS. This appears to be hard to test because it is difficult to tell where a font is coming from.
I guess the lesson from all this is that playing around with fonts is just a stupid waste of time because there is no way to tell what is going on.
0
axelson
Scenic Core Team
I can’t help with the esbuild setup but from this it sounds like you installed the font on your computer. I’d recommend uninstalling until you verify that you have your site working.
0
tadasajon
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.
5
outlog
f0rest8
I recently converted to esbuild (after making an npm update that sent me back down the error rabbit hole), and I was getting these “mark the file as external” errors from esbuild and wondering how I mark the files as external, very excited to try this.
Thank you for sharing 
1
romenigld
I am trying this and is not working.
It needs to put the fonts in some place?
or just convert to this Base64 and put on the CSS file ?
0
BrooklinJazz
We had to remove the format for our code to work. So our CSS looks like this:
@font-face {
font-family: 'Sigmar';
src: url('../fonts/Sigmar-Regular.ttf');
}
Instead of:
@font-face {
font-family: 'Sigmar';
src: url('../fonts/Sigmar-Regular.ttf') format('ttf');
}
For some reason adding format to the url broke our font source.
I hope that helps anyone who might experience a similar issue.
4