Font loader doesn't work with .ttf fonts
rmenai opened this issue · 5 comments
Steps to Reproduce
- Download a font in 2 formats: ttf and woff2. For this example, I used the Rubik Vinyl font.
- 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
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.
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.
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');
}
I have updated the module, feel free to try it.
Also, thanks for the report 👍
That's amazing thank you!