CODEWITHSUNDEEP
vue.jsvuejs2fontsnuxt.jsgoogle-fonts
Zeeshan Malik
Zeeshan Malik

Reputation: 637

How to host google fonts locally in Nuxt

I'm working with vue 2.6 and nuxt 2.14.

I'm working on improving my website performance.

For this purpose I downloaded google fonts and passed .woff2 files to @font-face() in nuxt.config.js.

But when I inspected in network, it is still getting fonts data from the Google servers.

I couldn't find any https request for google fonts in my project but request url was there in .nuxt/index.js build file.

.nuxt/index.js

{
  "rel": "stylesheet",
  "type": "text\u002Fcss",
  "href": "https:\u002F\u002Ffonts.googleapis.com\u002Fcss family=Roboto:100,300,400,500,700,900&display=swap"
}

I searched in project to figure out the source of this request.

enter image description here

I couldn't find any except this .nuxt/index.js

I even removed all the fonts but somehow it still was again getting fonts from google server.

And there's no trace of fonts.gstatic.com in my complete project including .nuxt build files.

enter image description here

Here's what I have done so far.

nuxt.config.js

links: [{
  rel: 'stylesheet',
  href: '/fonts/roboto/fonts.css'
}]

Some of the fonts

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Roboto'), url(./KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Roboto'), url(./KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Roboto'), url(./KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

here I've downloaded all the fonts.

enter image description here

I want to host fonts locally not from google server.

What I'm missing?

Upvotes: 1

Views: 2014

Answers (1)

kissu
kissu

Reputation: 46612

this question was asked not so long ago. Here is my solution: https://stackoverflow.com/a/68166329/8816585

Give it a try, this is using @nuxtjs/google-fonts for some simple local fonts fetching during build time and works pretty well!

Upvotes: 3

Related Questions