Nuxt JS not rendering font CSS on index [landing page] but loads on other page-CodePudding

I am facing a typical issue with my

Navigate to other page and do a page refresh

Navigate to Home and Font is loaded

CodePudding user response：

There seems to be some flaws in the above snippets, i am not sure if the reason of your issues are these flaws or not but i'll share a working version of your snippet with you and hope it gets fixed.

First of all you're importing style.css twice in the nuxt.config.js, which is a serious issue and style.css will be imported twice in the server-side, just remove one of them.
Another issue is that both font.css and style.css are importing the very same font families (You're literally importing the same font families X3 times) which causes performance downgrade and may even cause conflicts with each other and create the behavior that you're currently facing, you can basically remove one of them too.
I can't find it in anywhere where you have applied the font family to your project, You only have imported it.
You have imported the fonts locally from /assets/fonts folder and also imported it from google apis url in the style.css, which is also another reason for performance downgrade and may also be the reason of your issue due to conflicts, you only need to import it from one of them not both.

The correct way of importing an external font-family into a nuxt project. is like this:

in the /assets/style.css file insert the font family like this, and apply it to all elements using a * selector. (maybe remove the !important if it works without it)

@font-face {
  font-family: "aileron-regular";
  src: url(~assets/fonts/Aileron-Regular.otf);
}

* {
  font-family: "aileron-regular" !important;
}

(try using only one single font-family like above example, just to see if it works or not)

and then import it in nuxt.config.js

css: ["~/assets/style.css"],

CodePudding user response：

You're spending quite some energy trying to get the CDN to work, on top of some local fonts.

I recommend using local fonts, will be safer, faster and easier to debug (some platforms work poorly with CDNs). Then, you can use the name of the font into your CSS file.
I saw that you're even using the module on top of the CDN, stick to the module only!

Keep in mind that Chrome tends to use the locally installed font. So, your font may appear fine even tho it is not properly imported.

I can recommend the usage of Firefox Font Ninja your browser devtools to debug that efficiently. Also, I recommend fixing the issue locally before trying to see if it works in production.