How to combine local css with google fonts?
a1tem opened this issue · 4 comments
Hi, thank you for your work.
Is it possible to include google fonts with local fonts at the same time?
Hi, thanks for your interest in this module. If I understood you correctly, you can't load local
and google
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');
}
/* ... */
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",
},
],
@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.
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