To add Google Fonts for your Nuxt JS project, you can specify the fonts to use from within the Nuxt configuration and reference the font's in your CSS file.
Let's say you want a font called "Roboto", to add this font you can select the font styles from the Google Font website and copy the link. For example below is the Roboto font with a weight of 300, 400, 500, and, 700.
Method 1: Manually Add Google Fonts to Nuxt JS
Let's say you want a font called "Roboto", to add this font you can select the font styles from the Google Font website and copy the link. For example below is the Roboto font with a weight of 300, 400, 500, and, 700.
https://fonts.googleapis.com/css2?family=Roboto:[email protected];400;500;700&display=swap
Now that you have the URL of the fonts, you can define your configuration on the nuxt.config.js
{
head: {
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{
rel: 'stylesheet',
href: 'httpshttps://fonts.googleapis.com/css2?family=Roboto:[email protected];400;500;700&display=swap&display=swap'
}
],
}Once you have defined the font reference, now you can apply it to your web page as follows.
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>Method 2: Using nuxt/google-fonts Package
The send method is to use the nuxt/google-fonts package provided by the community. The package providers the following by default:
- Specify fonts by name/variant
- Parse head links to Google Fonts
- Creates only an external link to Google Fonts
- Support CSS API v2
- Add dns-prefetch
- Add preconnect
- Add preload
- Download css/fonts to local project (No need external resources)
To set it up you just have to add the dependency with either Yarn or NPM.
yarn add --dev @nuxtjs/google-fonts npm install --save-dev @nuxtjs/google-fonts
Then finally update nuxt.config.js file for the buildModules.
{
buildModules: [
'@nuxtjs/google-fonts'
],
}Now to use the fonts of your choice you can define it under the "families" key and it supports the font-weight as an array value,
googleFonts: {
families: {
Roboto: true,
'Josefin+Sans': true,
Lato: [100, 300],
Raleway: {
wght: [100, 400],
ital: [100]
},
}
}
