Local Fonts Not Loading

Hey friends- I thought I followed the docs on using a local font, but I am not getting them. Any thoughts on where I am going wrong?

nuxt.config.ts

export default defineNuxtConfig({
  css: [
    "@/css/fonts.css",
    "@/css/mobile.css"
  ],
});

export default defineNuxtConfig({
  css: [
    "@/css/fonts.css",
    "@/css/mobile.css"
  ],
});

/css/fonts.css

@font-face {
  font-family: "Grotesk";
  src: url("~/assets/fonts/Grotesk-Regular.otf") format("otf");
  font-display: swap;
}

@font-face {
  font-family: "Grotesk";
  src: url("~/assets/fonts/Grotesk-Regular.otf") format("otf");
  font-display: swap;
}

/css/mobile.css

h1 {
  font-family: 'Grotesk'
}

h1 {
  font-family: 'Grotesk'
}

assets folder is in the root of the project with the fonts folder inside of it. Any help would be appreciated!!

Nuxt•4y ago•

2 replies

Hey friends- I thought I followed the docs on using a local font, but I am not getting them. Any thoughts on where I am going wrong?

nuxt.config.ts

export default defineNuxtConfig({
  css: [
    "@/css/fonts.css",
    "@/css/mobile.css"
  ],
});

export default defineNuxtConfig({
  css: [
    "@/css/fonts.css",
    "@/css/mobile.css"
  ],
});

/css/fonts.css

@font-face {
  font-family: "Grotesk";
  src: url("~/assets/fonts/Grotesk-Regular.otf") format("otf");
  font-display: swap;
}

@font-face {
  font-family: "Grotesk";
  src: url("~/assets/fonts/Grotesk-Regular.otf") format("otf");
  font-display: swap;
}

/css/mobile.css

h1 {
  font-family: 'Grotesk'
}

h1 {
  font-family: 'Grotesk'
}

assets folder is in the root of the project with the fonts folder inside of it. Any help would be appreciated!!