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

Question

I am facing a typical issue with my website The fonts from googleapis do not get loaded on the homepage but if you navigate to any other page ex - about us and a refresh on the browser. I can see the font getting loaded from an API call.

Steps to Reproduce

Go to website . You can check the font
Go to Register and refresh the page from the browser. Font get loaded
Navigate to HOME using the home menu. New Font can be seen.
Now refresh the page again from the browser. Fonts get vanished on the home page

nuxt.config.js

import { POSITION } from "vue-toastification";
import webpack from "webpack";
export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  target: "static",
  head: {
    title: "awayddings",
    htmlAttrs: {
      lang: "en",
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" },
      { name: "format-detection", content: "telephone=no" },
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
    script: [
      {
        src: "https://www.googletagmanager.com/gtag/js?id=AW-323022855",
        async: true,
      },
      {
        src: "/js/ga.js",
      },
    ],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    "@/assets/css/fonts.css",
    "@/assets/css/themify-icons.css",
    "@/assets/css/font-awesome.min.css",
    "@/assets/css/flaticon.css",
    "@/assets/css/animate.css",
    "@/assets/css/slick.css",
    "@/assets/css/slick-theme.css",
    "@/assets/css/style.css",
    "@/assets/css/swiper.min.css",
    "@/assets/css/owl.transitions.css",
    "@/assets/css/jquery.fancybox.css",
    "@/assets/css/odometer-theme-default.css",
    "@/assets/css/jquery-ui.css",
    "@/assets/css/style.css",
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [{ src: "~/plugins/vuex-persist", ssr: false }],

  middleware: ["auth"],
  // auth: "guest",

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: ["@nuxt/image", "@nuxtjs/google-fonts"],
  googleFonts: {
    families: {
      Nunito: {
        wght: [800, 900],
      },
    },
  },

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    "bootstrap-vue/nuxt",
    // https://go.nuxtjs.dev/axios
    "@nuxtjs/axios",
    "vue-toastification/nuxt",
    "@nuxtjs/robots",
    "@nuxtjs/sitemap",
  ],
  sitemap: {
    hostname: "https://www.awayddings.com",
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: process.env.BASE_URL,
  },

  generate: {
    fallback: true,
  },

  // Pass options for vue-toastification through the "toast" key
  toast: {
    timeout: 3000,
    position: POSITION.TOP_CENTER,
  },

  image: {
    // Options
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
      }),
    ],
  },

  buildModules: ["@nuxtjs/device", "@nuxt/image"],
};

font.css

/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('~assets/fonts/Nunito-400-cyrillic-ext1.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: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('~assets/fonts/Nunito-400-cyrillic2.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('~assets/fonts/Nunito-400-vietnamese3.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('~assets/fonts/Nunito-400-latin-ext4.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('~assets/fonts/Nunito-400-latin5.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

style.css

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700&amp;display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@font-face {
  font-family: "Futura PT Demi";
  src: url("../fonts/FuturaPT-Demi.woff2") format("woff2"),
    url("../fonts/FuturaPT-Demi.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Futura PT Demi";
  src: url("../fonts/FuturaPT-DemiObl.woff2") format("woff2"),
    url("../fonts/FuturaPT-DemiObl.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Futura PT";
  src: url("../fonts/FuturaPT-HeavyObl.woff2") format("woff2"),
    url("../fonts/FuturaPT-HeavyObl.woff") format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Futura PT";
  src: url("../fonts/FuturaPT-Heavy.woff2") format("woff2"),
    url("../fonts/FuturaPT-Heavy.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Futura PT";
  src: url("../fonts/FuturaPT-Light.woff2") format("woff2"),
    url("../fonts/FuturaPT-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Futura PT";
  src: url("../fonts/FuturaPT-LightObl.woff2") format("woff2"),
    url("../fonts/FuturaPT-LightObl.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Futura PT";
  src: url("../fonts/FuturaPT-Medium.woff2") format("woff2"),
    url("../fonts/FuturaPT-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Futura PT";
  src: url("../fonts/FuturaPT-MediumObl.woff2") format("woff2"),
    url("../fonts/FuturaPT-MediumObl.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Muli";
  src: url(../fonts/Muli.ttf) format("truetype");
  font-weight: 600;
  font-style: normal;
}

/* #### Generated By: http://www.cufonfonts.com #### */
@font-face {
  font-family: "Muli";
  font-style: normal;
  font-weight: 500;
  src: local("Muli Regular"),
    url("../fonts/text-font/Muli-Regular.woff") format("woff");
}

@font-face {
  font-family: "Muli";
  font-style: normal;
  font-weight: 600;
  src: local("Muli SemiBold"),
    url("../fonts/text-font/Muli-SemiBold.woff") format("woff");
}

@font-face {
  font-family: "Muli";
  font-style: normal;
  font-weight: 700;
  src: local("Muli Bold"),
    url("../fonts/text-font/Muli-Bold.woff") format("woff");
}

/* cyrillic-ext */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 900;

  src: url("~assets/fonts/Nunito-400-cyrillic-ext1.woff2") format("woff2");
}
/* cyrillic */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 900;

  src: url("~assets/fonts/Nunito-400-cyrillic2.woff2") format("woff2");
}
/* vietnamese */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 900;

  src: url("~assets/fonts/Nunito-400-vietnamese3.woff2") format("woff2");
}
/* latin-ext */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 900;

  src: url("~assets/fonts/Nunito-400-latin-ext4.woff2") format("woff2");
}
/* latin */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 900;

  src: url("~assets/fonts/Nunito-400-latin5.woff2") format("woff2");
}

/* 1.1  Theme Reset Style */
html {
  font-size: 15px;
}

Home Page

Navigate to other page and do a page refresh

Navigate to Home and Font is loaded

score 1 · Answer 1 · answered Sep 26 '22 at 08:54

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.

Peshang Hiwa · Answer 2 · 2022-09-26T08:45:07.187

0

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"],

edited Sep 26 '22 at 08:45

answered Sep 26 '22 at 08:04

Peshang Hiwa

105
1
7

If you know that `!important` is bad here, don't recommend it. – kissu Sep 26 '22 at 08:58
It's not really bad, i am just recommending removing it in case it works without it, because it will be unnecessary. – Peshang Hiwa Sep 26 '22 at 09:00
Nuking the whole CSS specificity is actually pretty bad. It's like recommending to install Wordpress when somebody needs a simple calendar. Works but quite not necessary AND overkill. `!important` is not how you get some properly working CSS, you usually need to understand how specificity works. – kissu Sep 26 '22 at 09:03
It's totally normal to apply styles like font-family to the whole project, you don't necessarily need to apply it to each elements later, and the only downside of using !important with it is that some other icon packages might have conflicts with it, and in that case you just reset the font family for that specific element. this is basic CSS dear, hope you do some researches on an issue before starting an argument directly. – Peshang Hiwa Sep 26 '22 at 09:15
Applying a font to a project is totally fine, even tho `*` is a pretty poor choice of CSS selector due to performance reasons. And is probably overkill since not all html tags would benefit from it. `!important` is used to nuke the specificity, defaulting to that will bring a lot of unnecessary mental load when you will need to backtrack the cascade to find out which one used an important last. This is not basic CSS, it is a pretty poor recommendation. Mainly because you don't need it to work properly. Such usage should be exceptional rather than a casual practice due to it's impact/cons. – kissu Sep 26 '22 at 09:26

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

2 Answers2