Fonts
There are 2 types of font loading.
Internal Fonts
If you have some font files, just put them inside the fonts
folder and groupped by font family like this:
src/
static/
fonts/
open-sans/
opensans-regular-webfont.woff
opensans-regular-webfont.woff2
Then you add @font-face
rules at fonts.css
file.
// src/static/css/fonts_.css
@font-face {
font-family: 'Open Sans';
src: url('../fonts/open-sans/opensans-regular-webfont.woff2') format('woff2'),
url('../fonts/open-sans/opensans-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: block;
}
Now everything is ready, so let's add a css rule to see your font.
// src/lib/styles/GlobalStyles.js
const baseStyles = css`
html,
body {
font-family: 'Open Sans', sans-serif;
...
}
`
...
External Fonts
If you want to use some external fonts such as fonts from Google, just write a few lines of config.
// src/lib/font.js
export const config = {
google: {
families: ['Open Sans:400'],
}
}
And add a css rule as usual.
// src/lib/styles/GlobalStyles.js
const baseStyles = css`
html,
body {
font-family: 'Open Sans', sans-serif;
...
}
`
...
Please note that NextWeb.js uses Web Font Loader. More detail about the configuration is here.