annad
Documentation for adding fonts to Liveview Project
I am using Tailwinds and I want to use a font family I found on Google. I have a url for the font, but I think it would be safer to download and add the font to my project. I can’t find any documentation (on the Phoenix site) on how to do this. I have found some previous Elixir Forum posts, but they are old posts and don’t know if they apply to 1.5.
Could someone point me in the right direction?
Most Liked
kokolegorille
I made a small script to retrieve fonts and have them locally…
#!/bin/sh
for family in $*; do
for url in $( {
for agent in \
'Mozilla/5.0 (X11; Linux i686; rv:6.0) Gecko/20100101 Firefox/6.0' \
'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1' \
'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)' ;
do
curl -A "$agent" -s "http://fonts.googleapis.com/css?family=$family" | \
grep -oE 'http://[A-Za-z0-9/._-]+'; \
done } | sort -u ) ;
do
extn=${url##*.} ;
file=$(echo "$family"| tr +[:upper:] _[:lower:]);
echo $url $file.$extn;
curl -s "$url" -o "$file.$extn";
done
done
For example.
$ ./get_font.sh Roboto
http://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxM.woff roboto.woff
http://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxPKTU1Kg.ttf roboto.ttf
Usually I put them in assets/fonts and have them processed by webpack, and file loader.
Then I just add a font stylesheet… like this.
@font-face {
font-family: roboto;
src: url("../fonts/roboto.ttf") format("truetype"); /* For IE */
src: local("roboto"), url("../fonts/roboto.ttf") format("truetype"); /* For non-IE */
src: local("roboto"), url("../fonts/roboto.woff") format("woff");
}
and the webpack rule.
// Load fonts
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
// Relative to output public_path
outputPath: "./fonts/"
}
}
]
},
You need to install file_loader npm package to do this…
malloryerik
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.
annad
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!
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
The deployment platform built for Elixir: PaaS ease, VPS control.
Categories:
Sub Categories:
Forums
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Practical resources that improve the lives of professional developers.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"