How to combine local css with google fonts?

[a1tem]

Hi, thank you for your work. Is it possible to include google fonts with local fonts at the same time?

[ivodolenc]

Hi, thanks for your interest in this module. If I understood you correctly, you can't load local andgoogle fonts at the same time.

This can be added as a possible feature but it would be great if you could give a more detailed example of what you want to achieve with that feature.

At the moment, you can download google fonts (as many as you want), put them in a static folder, and combine them with your custom @font-face rules in one local font-face.css file.

You can also import google fonts directly into the local css file and load it via the url module option (not recommended):

/* local font-face.css */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/I-300.woff2') format('woff2');
}

/* ... */

[a1tem]

Hi @ivodolenc Currently, I use this plugin nuxt-webfontloader to load google fonts:

  webfontloader: {
    custom: {
      families: ["Roboto:n4,n7", "Literata:n4,n7"],
      urls: [
        "https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap",
        "https://fonts.googleapis.com/css2?family=Literata:wght@400;700&display=swap"
      ]
    }
  },

Also, I have a local font and for best performance, I use your plugin:

fontLoader: {
    url: "/fonts/flaticon/flaticon.css"
  },

My question was about this, is it possible somehow to combine google web fonts with local fonts:

fontLoader: [
  {
    url: "/fonts/flaticon/flaticon.css"
  },
  {
    url: "https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap",
  },
],

[ivodolenc]

@a1tem At the moment, this is not possible.

My question was about this, is it possible somehow to combine google web fonts with local fonts:

fontLoader: [
  {
    url: "/fonts/flaticon/flaticon.css"
  },
  {
    url: "https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap",
  },
],

But let this stay open for now, I will implement it soon.

[ivodolenc]

Added here: fec5b16 Available in: 1.1.0

Multiple sources usage

Use this method if you want to load multiple sources at the same time

Automatically sets the best settings according to your url option:

// nuxt.config.js

{
  fontLoader: {
    url: {
      local: '/fonts/font-face.css',
      google: 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap',
      custom: 'https://new-custom-link/'
    }
  }
}

Specify families

Specify your font-family as usual

html {
  font-family: 'Inter', sans-serif; /* Local */
}

nav {
  font-family: 'Roboto', sans-serif; /* Google */
}

h1 {
  font-family: 'New Custom Family', sans-serif; /* Custom */
}

For more info, see the docs