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.

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.

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.

I want to host fonts locally not from google server.

What I'm missing?