Fonts in CSS

font property lets you define fonts.

• font-family - family-name,generic-family - Arial, serif
• font-style - normal|italic
• font-variant - normal | small-caps
• font-weight - bold|bolder|normal|lighter
• font-size - small|large|larger

External Font

You can also use third party fonts e.g. google. Here is an example showing how to use google font using link tag or @import syntax.

<!--  You can use @import syntax -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>

<!--  or you can use link -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

<!--  Then apply font -->
<div style="font-family: 'Roboto', sans-serif;">Your text</div>