Add a <link> in <head> pointing to the font:
<linkrel="stylesheet"
href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>">
Apply it in CSS:
body {
font-family:'Roboto', sans-serif;
}
This loads the font from Google and uses it in your page.
<aside> 💡
Question — should you use the google link to get the fonts, or should u download it locally and import it locally from your own project?
</aside>
Popular fonts
Manrope
DM Sans
Geist
Inter
Poppins
Onest
Cal sans
Work sans
Google sans
Playfair Display
https://fontjoy.com/https://www.fontshare.com/https://uncut.wtf/
What all you’re writing on the page.
ref - motion.dev
https://www.realtimecolors.com
background: linear-gradient(direction, color1, color2, ...);
/* Top to bottom (default) */
background: linear-gradient(red, blue);
/* Left to right */
background: linear-gradient(to right, red, blue);
/* Diagonal */
background: linear-gradient(to bottom right, red, blue);
/* Using angles */
background: linear-gradient(45deg, red, blue);