CSS Tutorial
Introduction
CSS Properties
CSS Designing
CSS Advance Topics
CSS FAQs
CSS Fonts
Fonts define the personality of your website. Whether you’re building a professional blog or a fun kids’ portal, fonts help shape the look and feel of your content. Let’s explore how to customize fonts using CSS.
Font Color
This sets the color of the text using names, hex codes, RGB, or HSL values.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
color: #FF5733;
}
</style>
</head>
<body>
<p>Learn With Arshyan – Font Color Example</p>
</body>
</html>
Font Size
Control how big or small the text appears.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.small { font-size: small; }
.medium { font-size: medium; }
.large { font-size: large; }
.custom-px { font-size: 24px; }
.custom-em { font-size: 1.5em; }
.custom-rem { font-size: 2rem; }
.percent { font-size: 80%; }
</style>
</head>
<body>
<p class="small">Small font</p>
<p class="medium">Medium font</p>
<p class="large">Large font</p>
<p class="custom-px">Font size: 24px</p>
<p class="custom-em">Font size: 1.5em</p>
<p class="custom-rem">Font size: 2rem</p>
<p class="percent">Font size: 80%</p>
</body>
</html>
Font Style
Use this to make text italic or oblique.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.italic { font-style: italic; }
.normal { font-style: normal; }
.oblique { font-style: oblique; }
</style>
</head>
<body>
<p class="italic">Italic text</p>
<p class="normal">Normal text</p>
<p class="oblique">Oblique text</p>
</body>
</html>
Font Variant
Great for stylistic tweaks like small-caps.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.normal { font-variant: normal; }
.smallcaps { font-variant: small-caps; }
</style>
</head>
<body>
<p class="normal">Font variant: normal</p>
<p class="smallcaps">Font variant: small-caps</p>
</body>
</html>
Font Weight
Control how thick or bold your text appears.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.w100 { font-weight: 100; }
.w400 { font-weight: 400; }
.w700 { font-weight: 700; }
.lighter { font-weight: lighter; }
.bold { font-weight: bold; }
.bolder { font-weight: bolder; }
</style>
</head>
<body>
<p class="w100">Font weight: 100</p>
<p class="w400">Font weight: 400 (normal)</p>
<p class="w700">Font weight: 700 (bold)</p>
<p class="lighter">Font weight: lighter</p>
<p class="bold">Font weight: bold</p>
<p class="bolder">Font weight: bolder</p>
</body>
</html>
Font Family
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.serif {
font-family: 'Times New Roman', Times, serif;
}
.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
.monospace {
font-family: 'Courier New', Courier, monospace;
}
</style>
</head>
<body>
<p class="serif">Serif Font Example</p>
<p class="sansserif">Sans-serif Font Example</p>
<p class="monospace">Monospace Font Example</p>
</body>
</html>
Custom Fonts (Google Fonts)
Use stylish fonts from Google Fonts:
Visit https://fonts.google.com
Choose your font (e.g., Poppins)
Copy the
@importlink into your<style>or CSS fileUse the font-family in your selectors
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
</style>
</head>
<body>
<h1>Learn With Arshyan – Custom Font (Poppins)</h1>
</body>
</html>
