That’s what I thought, so I had pushed ‘Oswald’ to the front of the list and also tried creating a font-body that has ‘Oswald’ as the only choice. That also didn’t work. I think my issue is that the font files are not being found.
Ok, now this seems weird. When I’m in Web Inspector and double click on the font (in red because it can’t be found), I get this error message in a new window:
Phoenix.Router.NoRouteError at GET /fonts/Oswald/static/Oswald-Regular.ttf
no route found for GET /fonts/Oswald/static/Oswald-Regular.ttf (MyApp.Router)
First, it has the wrong path despite the fact that i fixed it in app.scss and in app.css. But also … why is it looking for that path in the router???
As @cmo wrote, Livebook installs fonts through npm, and it does so with the Fontsource npm library maintained by our good JavaScript brothers and sisters over at Vercel. You can just install open source fonts individually and use them with a simple import statement. Here’s their getting started guide. It’s really simple to use.
So I guess I’ll be using either something like @kokolegorille’s method or Fontsource.
1 Like
It’s not clear where You put, and how You use fonts…
You can try simple…
- create assets/static/fonts and put some fonts here
- edit your endpoint, plug static to serve fonts. If You don’t, it won’t work.
- puts assets/static/css/fonts.css
- link the stylesheet in root.html.eex
This is the no bundler path.
where You make reference to /fonts/…
Or more complicate, You could use webpack… because it’s an asset bundler. You need to add file-loader, and add a rule for fonts in webpack.config.js
It’s tricky until You get it right, because if You mess the path, You will find fonts anywhere in priv/static. But You could always watch what’s happening in priv/static when You start the server.
Sometime, copy-webpack-plugin is misconfigured because recently it’s config has changed. If it is not correct, it will not even build anything.
Many hates webpack because it’s complicate to configure. But it’s a good bundler 
It’s not related to Phoenix, it’s the js world, and all it’s PITA.
2 Likes
Once you’ve managed to install the font correctly, you also have the simple option of a css class with your desired font when you don’t want to use whatever you’ve set up in your tailwind config. So like in myapp.css,
.oswald { font-family: "Oswald" }
Btw, if you have in your tailwind.config
fontFamily: {
'sans': ['Oswald', 'Graphik', 'sans-serif'],
'serif': ['Merriweather', 'serif'],
'title': ['Special_Elite'],
'body': ['Merriweather']
},
then in your html classes you should call sans and not Oswald, right? You call the fonts by the key and not the value. So serif will always call “Merriweather” (the font we all read and love in Hex docs), and if you try to use Merriweather in your html files’ classes directly it won’t work. And here if you want to use “Special_Elite” you’d use the class title . You’ll have no problem once you see what’s going on.
[Edit: consolidated two posts to avoid bombing the thread…]
1 Like
@cmo , @kokolegorille , @malloryerik
I think I’m seeing where I went terribly wrong.
I created a folder in assets called fonts (my_app/assets/fonts). I then just downloaded the fonts from Google and put them in the folder myself.
You all are talking about “loading” the fonts via a script, Fontsource or webpack … which I didn’t do. I just saw that Phoenix recommends Brunch for static assets. I also didn’t edit any endpoint to know about /assets/fonts. This is probably why the webpage can’t find the fonts.
I’m going to have to study everything you all have sent … and the Phoenix Static Assets page. Thanks for pointing me in the right direction!
OK, so, older versions of Phoenix used Brunch, but then switched to Webpack. So Phoenix currently uses Webpack and not Brunch.
We can divide your fonts issue into two parts:
- getting the fonts into your application, and
- using them.
For the first part, since you’re using Google Fonts, the easiest way to get the fonts into your app is probably just to use the Google Fonts cdn link from fonts.google.com, something like this:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather&family=Oswald&display=swap" rel="stylesheet">
You put that into the head of your root.html.leex file, so that’s in lib/myapp_web/templates/layout/root.html.leex
Just add the links in the head of that file, so somewhere <head> here </head>.
That’s what @kokolegorille meant when they said, “link the stylesheet in root.html.eex.”
Once that’s done you can get the second part right, making sure that you’re using the fonts correctly within your app.
Then when you are going to deploy or have a moment, you can work on a more performant way of getting the fonts installed in your app, like the way @kokolegorille code showed earlier, or just using the Fontsource way.
4 Likes
Share my method with you:
- add fonts via
@fontsourcerepos. An example is at here. - configure tailwind for using these fonts. An example is at here.
In this way, you don’t have to handle the Google Fonts manually. @fontsource provides all the good stuff to you.
I like to serve fonts from my own server or CDN. It reduces the complexity of cache.
2 Likes
YAY!!! The links worked! Thank you for dividing the issue in two parts and telling me where to put those links. Sometimes it is so embarrassing the basic things I don’t know. Sigh. I’m going to work on styling and then come back to this thread to investigate all of the options for “loading” the fonts for deployment. I will definitely check out @fontsource (thank you @c4710n for those links).
While it feels like I spent a week on fonts, it was really a valuable lesson on static assets. Thank you!
3 Likes
