Font loader doesn't work with .ttf fonts

[rmenai]

Steps to Reproduce

1. Download a font in 2 formats: ttf and woff2. For this example, I used the Rubik Vinyl font.
2. Import the ttf font:

   local: [
     {
       src: "/fonts/RubikVinyl-Regular.ttf",
       family: "Rubik Vinyl",
       display: "swap",
     },
   ],

Current Behavior

Now if you try to use the font it won't work. In the console, you will see this warning:

The resource http://localhost:3000/fonts/RubikVinyl-Regular.ttf was preloaded using link preload but not used within a 
few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded 
intentionally.

Expected Behavior

If instead you use the woff2 font it will work as excepted.

Additional Details

When externally importing the google font, it works as expected. This is because it using the woff2 format.

external: [
  {
    src: "https://fonts.googleapis.com/css2?family=Rubik+Vinyl:wght@400&display=swap",
    family: "Rubik Vinyl",
  },
],

This is not related but I'm using tailwindcss in order to generate the font class.

module.exports = {
  darkMode: "class",
  theme: {
    extend: {
      fontFamily: {
        rubik: ["Rubik Vinyl", "sans-serif"],
      },
    },
  },
  plugins: [],
};

• this generated the font-rubik css class.

Version

2.2.1

[ivodolenc]

The resource RubikVinyl-Regular.ttf was preloaded using link ...

If that notification appears, it means that the font has been loaded and is working as expected.

Most likely, you did not specify the font via css.

The module provides an option class and variable through which it automatically generates the styles needed to load fonts in templates.

The docs mentions this with example code.

// nuxt.config.ts

{
  fontLoader: {
    local: [
      {
        src: '/fonts/Aspekta.woff2',
        family: 'Aspekta',
        class: 'font-aspekta' // optional
      }
    ]
  }
}

<template>
  <!-- font is specified via 'font-aspekta' class -->
  <h1 class="font-aspekta">Nuxt Font Loader</h1>
</template>

Of course, these options are optional, which means that you don't have to use them, but then you have to manually create a css class with a specific font.

Create custom class inside your main.css file or specified global font via body or html it's up to you.

.font-rubik {
  font-family: 'Rubik Vinyl';
}

/* or alternativelly */

body {
  font-family: 'Rubik Vinyl';
}

And use it in template:

<template>
  <h1 class="font-rubik">Title</h1>
</template>

Or if you use tailwind you can extend theme fontFamily.

Try again and feel free to leave feedback.

[rmenai]

As mentioned above, I did specify the font via css. When reproducing the bug, I only edited the src option.
Here is a minimal reproduction environment for the bug.

As you can see, the woff2 font loads correctly but the ttf font doesn't.

[ivodolenc]

Ah yes, I see what the problem is.

Module automatically generates format from the src option and adding it to the css.

@font-face {
  src: url('/fonts/RubikVinyl-Regular.ttf') format('ttf'); /* wrong format */
}

It should be:

@font-face {
  src: url('/fonts/RubikVinyl-Regular.ttf') format('truetype');
}

[ivodolenc]

I have updated the module, feel free to try it.

Also, thanks for the report 👍

[rmenai]

That's amazing thank you!