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

I answered (almost) the same question here:

Just change the extensions or follow the links

Wow, thanks much. Following you suggestion I have adjusted my config/dev.exs file and it now reads as follows:

watchers: [
    esbuild:
        {Esbuild, :install_and_run,
        [:default, ~w(--sourcemap=inline --watch --loader:.ttf=file)]}
]

I have also adjusted my mix.exs file and it now shows the following:

"assets.deploy": [
    "cmd --cd assets npm run deploy",
    "esbuild default --minify --loader:.ttf=file",
    "phx.digest"
]

But I’m still not getting the font to work on my website.\

Could my problem have something to do with the fact that I’m telling ESBuild to use a file loader, but in my app.css file I have specified a URL?

Also, it is not clear to me how the ESBuild file loader is supposed to know where to find the file. How does it know whether to look in priv/static/assets/fonts vs assets/css/fonts vs assets/fonts, etc?

Could my problem have something to do with the fact that I’m telling ESBuild to use a file loader, but in my app.css file I have specified a URL?

Not really, what this loader does is copy the file to the output folder, if you used the dataURL it would convert the font to base64 and paste it at the start of the generated css.

Can you access the font file going straight to its url in the browser?

What exactly the error says?
Could not resolveor No loader is configured for ".ttf" files, if it is Could not resolve it means that the loader isn’t finding the file, in my referenced post the person put the font in priv and used a relative path like: background-image: url('../../priv/static/images/background.jpg');

Yes, if I visit http://localhost:4000/fonts/American_Typewriter_Regular.ttf in my browser, then I get a popup saying “Do you want to allow downloads on “localhost”?” – which suggests to me that the browser can find the file and is prompting me to download it because displaying it is not an option.

I’m not getting any error, though – when I run mix phx.server it just runs normally. I can use my website as expected. The only problem is that the font is not showing up so I don’t get the cool American Typewriter look.

Can you try @import instead of @font-face?

ok, I’ve adjusted my assets/css/app.css file and it now has the following:

@import {
  font-family: 'American Typewriter';
  src: url('/fonts/American_Typewriter_Regular.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
}

This causes my VSCode editor to give me some red underlines and warnings, though. The font is still not showing up.

I have also tried different paths, such as:

  src: url('/fonts/American_Typewriter_Regular.ttf') format('ttf');
  src: url('fonts/American_Typewriter_Regular.ttf') format('ttf');
  src: url('/assets/fonts/American_Typewriter_Regular.ttf') format('ttf');
  src: url('/static/fonts/American_Typewriter_Regular.ttf') format('ttf');
  src: url('../fonts/American_Typewriter_Regular.ttf') format('ttf');
  src: url('static/assets/fonts/American_Typewriter_Regular.ttf') format('ttf');
  src: url('../assets/fonts/American_Typewriter_Regular.ttf') format('ttf');

I have the .ttf file stored in two places:

1. priv/static/fonts/American_Typewriter_Regular.ttf
2. assets/fonts/American_Typewriter_Regular.ttf

Forget about the @import, I was thinking of other stuff…

My last guess is to use ../../priv/static/fonts/American_Typewriter_Regular.ttf and hope for the best…

Ok, so I’ve made a repo here: GitHub - tadasajon/use_local_font: use a local font in Phoenix 1.6.2 using ESBuild · GitHub

This was generated with mix phx.new use_local_font --no-ecto and it tries to do just one thing: use a local font.

I’ll obviously be delighted to receive a pull request from anyone.

Screen Shot 2021-11-11 at 5.33.52 PM1091×965 52 KB

Ok, well, the font works fine for me in that repo that I just made. I used the following settings:

In my assets/css/app.css:

@font-face {
  font-family: 'American Typewriter';
  src: url('/fonts/American_Typewriter_Regular.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
}

.use-local-font {
  color: darkblue; 
  font-family: 'American Typewriter'

}

in my lib/use_local_font_web/templates/layout/root.html.heex file:

<div style="margin:16px; padding:16px;outline:4px solid red;font-size:28px;text-align:center;background-color:lightyellow;">
    <span>
        This text should be in the default font. &nbsp;&nbsp;&nbsp;&nbsp; Q
    </span>
    <br />
    <span class="use-local-font">
        This text should be in American Typewriter Regular font. &nbsp;&nbsp; Q
    </span>
</div>

in my mix.exs file:

"assets.deploy": ["esbuild default --minify --loader:.ttf=file", "phx.digest"]

in my config/dev.exs file:

watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    esbuild:
      {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch --loader:.ttf=file)]}
  ]

Screen Shot 2021-11-11 at 5.45.43 PM1057×1006 64.7 KB

So I guess my problem has something to do with the way I have tailwind configured in my app, since it isn’t working in the setup I have in my real app, but it is working in this toy setup.

Wow, what a time suck this has been for me.