Help with adding font "Inter"

Phoenix Forum Questions / Help
1

I’d like to use font Inter together with tailwind in my project. Tailwind is working, but I have problems with getting Inter to work.

I figured the best way would be to install the npm package inter-ui.

So what I did was:

  1. Run npm install inter-ui --prefix assets in my project root directory.
  2. Add import "inter-ui" and import "inter-ui/inter.css" to /assets/app.js
  3. Modify /assets/tailwind.config.js to add the font “Inter” and “Inter var” to the font list.
  4. Added --loader:.woff=file --loader:.woff2=file to the esbuild args in config.exs

With these changes, I expect the default font to be “Inter” or “Inter var”. But I don’t see any change.

I can see that /priv/static/assets now additionally contains a number of .woff and .woff2 files. I can verify that the /assets/tailwind.config.js changes are at the correct place, by changing the default font to Arial and seeing the change happen. I do not see any warnings or errors. Not sure how to proceed with troubleshooting this.

2

I think this plugin just creates and loads the Inter font-family for you.
You still have to apply it on relevant CSS selectors:

html, body {
  font-family: "Inter var";
}

You can also use the the tailwindcss-font-inter package and apply the font-inter on your body element.

<body class="font-inter">
  ....
</body>
1 Like
3

Adding a font to the config as in step three does change the default font. As I said, when doing it with “Arial”, I can already see a result.

Here are the docs: Font Family - Tailwind CSS

And here’s the complete tailwind.config.js

// See the Tailwind configuration guide for advanced usage
// https://tailwindcss.com/docs/configuration

const defaultTheme = require('tailwindcss/defaultTheme')
let plugin = require('tailwindcss/plugin')

module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: [
          "Inter var",
          "Inter",
          // "Arial",
          ...defaultTheme.fontFamily.sans,
        ],
        serif: [
          ...defaultTheme.fontFamily.sans,
        ],
        mono: [
          ...defaultTheme.fontFamily.sans,
        ],
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    plugin(({ addVariant }) => addVariant('phx-no-feedback', ['&.phx-no-feedback', '.phx-no-feedback &'])),
    plugin(({ addVariant }) => addVariant('phx-click-loading', ['&.phx-click-loading', '.phx-click-loading &'])),
    plugin(({ addVariant }) => addVariant('phx-submit-loading', ['&.phx-submit-loading', '.phx-submit-loading &'])),
    plugin(({ addVariant }) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &']))
  ]
}

Thanks for the hint with the npm package. However, I’ve had nothing but issues with adding NPM packages, so changing the method will for sure work out the same as with the other package: not at all. So I’d prefer to stick with the “inter-ui” package for now and understand how to solve these problems.

4

What if you just download and use the font files without an npm package? Like described here:

I also remember adding the font-files to /priv/static for production.

1 Like