How do I use a monospaced font in my Phoenix website?

Phoenix Forum Questions / Help
1

I would like my whole site to use a monospaced font. Is there an easy way to do that?

I tried downloading this font, and placed it in a couple of places in my project, but I can’t get it to load. I tried placing the .ttf files under /assets/fonts, and /priv/static/fonts, and /fonts at the root. No luck.

My tailwind.config.js looks like this:

module.exports = {
  content: [
    "./js/**/*.js",
    "../lib/my_api2_web.ex",
    "../lib/my_api2_web/**/*.*ex"
  ],
  theme: {
          fontFamily: {
        primary: ["AnonymousPro"]
      },

    extend: {
      colors: {
        brand: "#FD4F00",
      }
    },
  },

And where I’m trying to use the font:

<main class="font-primary">
    <%= @inner_content %>
</main>

Here’s my app.css file:

@import "fonts.css";
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

And a new file, fonts.css, in the same folder as app.css:

@font-face {
    font-family: 'anonymous_pro';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    src: url("/fonts/AnonymousPro-Regular.ttf");
}

I followed the instructions over here, but that might be outdated by now? I’m not sure.

I’m using Phoenix 1.7.11.

2

from tailwind.config.js:

primary: ["AnonymousPro"]

from fonts.css:

@font-face {
  font-family: 'anonymous_pro';
  /* ... */
}

These must match. Casing doesn’t matter but the underscore is likely your problem.

3

Beautiful, that did the trick. Thank you.

Now I just need to figure out which one of the /fonts/ folders I created in various places should be kept :sweat_smile:

1 Like
4

Store them in priv/static/fonts. Stuff in assets/ are simply static assets that need processing—their targets are copied into priv/. Unless you have some sort of font processing set up, then they can just go straight into priv/ :slight_smile:

1 Like