Options
families
Adding Google font families
Type: Object Default: {}
googleFonts: {
families: {
Roboto: true,
'Josefin+Sans': true,
Lato: [100, 300],
Raleway: {
wght: [100, 400],
ital: [100]
},
}
}
display
The font-display property lets you control what happens while the font is still loading or otherwise unavailable.
Type: String Default: 'swap'
googleFonts: {
display: 'swap' // 'auto' | 'block' | 'swap' | 'fallback' | 'optional'
}
Note: manually enabling the preload
option will turn off 'swap' by default.
subsets
Some of the fonts in the Google Font Directory support multiple scripts (like Latin, Cyrillic, and Greek for example). In order to specify which subsets should be downloaded the subset parameter should be appended to the URL.
Type: Array[String]|String Default: []
googleFonts: {
subsets: 'greek'
}
text
Oftentimes, when you want to use a web font on your site or application, you know in advance which letters you'll need. This often occurs when you're using a web font in a logo or heading. See https://developers.google.com/fonts/docs/css2#optimizing_your_font_requests
In these cases, you should consider specifying a text. This allows Google Fonts to return a font file that's optimized for your request. In some cases, this can reduce the size of the font file by up to 90%.
Type: String Default: null
googleFonts: {
text: 'Hello world'
}
prefetch
This option injects dns-prefetch into the head of your project.
<link rel="dns-prefetch" href="https://fonts.gstatic.com/"/>
Type: Boolean Default: true
googleFonts: {
prefetch: true
}
preconnect
This option injects preconnect into the head of your project.
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
Type: Boolean Default: true
googleFonts: {
preconnect: true
}
preload
This option injects preload into the head of your project.
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto" />
Type: Boolean Default: false
googleFonts: {
preload: true
}
useStylesheet
This option injects useStylesheet into the head of your project which is recommended for projects that use the AMP module that removes scripts.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto" />
Type: Boolean Default: false
googleFonts: {
useStylesheet: false
}