Adding fonts in TailwindCSS and Laravel

  fonts, laravel, tailwind-css

I’m pretty new to Laravel and Tailwind, but I’m trying to learn as I go with different projects. Currently, I’m working with importing a font. I have downloaded the font from google fonts which gave me a ttf file. I put it in /resources/fonts/NewTegomin-Regular.ttf. Now I can’t figure out how to use this font.

Here is my app.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base{
    @font-face {
        font-family: 'New Tegomin';
        src: url(../fonts/NewTegomin-Regular.ttf) format("truetype");
    }
}

My Tailwind.config.js:

module.exports = {
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        'chalk': ['New Tegomin', 'serif']
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

And my html

<div class="logo flex items-center font-chalk text-3xl">Title</div>

Am I missing something obvious here?

Source: Laravel

Leave a Reply