Custom fonts
There are several different ways to use custom fonts with SuperWeb Barebones.
Using Google Fonts
Use Google’s servers to serve your fonts.
-
Select a font from Google Fonts This example will use Inter.
-
Click “Get Font” and then “Get embed code”.
-
Embed the
link
tags inBaseHead.astro
. -
Embed the CSS in
global.css
. For variable fonts, enter a weight between 100 and 900 for font-weight. For static fonts, you may need to add multiple classes with unique names for each font weight. -
Use the class
inter-variable
to style your website.
Using Fontsource
Fontsource uses npm
modules to install open source fonts.
-
Select a font from Fontsource. This example will use Inter.
-
Install the package for your font.
-
Import the font package in
BaseLayout.astro
. -
Add the font name to the
body
inglobal.css
. -
Register the font in
tailwind.config.mjs
. -
The class
font-sans
now uses the Inter font family.
Using local fonts
-
This example will use Inter 4.0.
-
Copy
InterVariable.woff2
topublic/fonts
. -
Add the following
font-face
rule toglobal.css
. -
Register the font in
tailwind.config.mjs
. -
The class
font-sans
now uses the Inter font family.