19/09/2025, 22:56 CSS Fonts - GeeksforGeeks
Search... Sign In
Full Stack Course HTML CSS JavaScript TypeScript jQuery AngularJS ReactJS Next.js
CSS Fonts
Last Updated : 27 Jun, 2025
CSS fonts control how text appears on a webpage. With CSS, you can
specify various properties like font family, size, weight, style, and line
height to create visually appealing and readable typography
Key Properties of CSS Fonts
To customize fonts effectively in web design, it’s crucial to understand
the main CSS font properties:
font-family: Specifies the font type.
font-size: Determines the size of the text.
font-weight: Adjusts the thickness of the text.
font-style: Controls the slant of the text (e.g., italic).
line-height: Sets the space between lines of text.
letter-spacing: Modifies the space between characters.
text-transform: Controls the capitalization of text.
↔
<style>
.gfg {
font-family: "Arial, Helvetica, sans-serif";
font-size: 60px;
color: #090;
text-align: center;
}
</style>
↔
The code applies a green, 60px Arial font to the text "GeeksforGeeks"
and centers it on the page.
The text is styled using the .gfg class in the HTML.
https://www.geeksforgeeks.org/css/css-fonts/ 1/6
19/09/2025, 22:56 CSS Fonts - GeeksforGeeks
How to Apply Fonts in CSS
1. font-family
The font-family property defines which font(s) should be used for text.
You can provide a list of fonts as a fallback mechanism in case the
preferred font is unavailable.
Syntax:
font-family: "Font Name", generic-font-name;
body {
font-family: "Arial", sans-serif;
}
In this example, the browser will first try to display the text in Arial. If
Arial is not available, it will fall back to a sans-serif font.
2. font-size
The font-size property controls the size of the text. You can set the size
in several units, including pixels (px), ems (em), and percentages (%).
Syntax:
font-size: value;
h1 {
font-size: 32px; /* Pixels */
}
p {
font-size: 1.2em; /* Relative to the parent element */
}
Pixels (px) provide a fixed font size.
Ems (em) are relative to the parent element’s font size, making them
useful for responsive design.
3. font-weight
https://www.geeksforgeeks.org/css/css-fonts/ 2/6
19/09/2025, 22:56 CSS Fonts - GeeksforGeeks
The font-weight property controls the thickness of the text. It can accept
values like normal, bold, or numeric values (100 to 900).
Syntax:
font-weight: value;
p {
font-weight: bold; /* Bold text */
}
strong {
font-weight: 700; /* Equivalent to bold */
}
Numeric values allow for finer control over weight (e.g., 100 for light,
900 for extra bold).
4. font-style
The font-style property defines the style of the font, typically italic or
normal.
Syntax:
font-style: value;
em {
font-style: italic; /* Italicized text */
}
p {
font-style: normal; /* Normal text */
}
5. line-height
The line-height property defines the space between lines of text.
Increasing line height improves readability, especially for long
paragraphs.
Syntax:
line-height: value;
https://www.geeksforgeeks.org/css/css-fonts/ 3/6
19/09/2025, 22:56 CSS Fonts - GeeksforGeeks
p {
line-height: 1.5; /* 1.5 times the font size */
}
Web Safe Fonts vs. Custom Fonts
1. Web Safe Fonts
Web safe fonts are commonly supported across all browsers and
operating systems. These fonts are pre-installed on most computers,
ensuring your text appears the same across devices.
Common Web Safe Fonts
1. Arial
2. Times New Roman
3. Courier New
4. Verdana
5. Georgia
body {
font-family: "Verdana", sans-serif;
}
2. Custom Fonts
Custom fonts allow you to use fonts that are not pre-installed on a
user’s device. You can load them using web fonts. The most popular
method for using custom fonts is through Google Fonts, or by hosting
fonts on your own server.
<head>
<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<h1 style="font-family: 'Roboto', sans-serif;">Hello, World!
</h1>
</body>
Responsive Typography
https://www.geeksforgeeks.org/css/css-fonts/ 4/6
19/09/2025, 22:56 CSS Fonts - GeeksforGeeks
To make typography adaptable to different screen sizes, use responsive
units like em, rem, %, or vw for font sizes. You can also combine CSS
media queries with typography to ensure readability across devices.
body {
font-size: 16px; /* Default font size */
}
@media (max-width: 600px) {
body {
font-size: 14px; /* Smaller font on smaller screens */
}
}
em and rem: These units are relative to the parent element or root
element’s font size, allowing better scaling.
vw (viewport width): This unit scales the font size based on the
width of the viewport, which is great for fluid layouts.
Best Practices for Using CSS Fonts
Limit the Number of Fonts: Avoid using too many font types on one
page. Stick to 2-3 font families to maintain consistency and improve
loading times.
Fallback Fonts: Always define fallback fonts to ensure readability in
case the primary font is unavailable.
Readability: Choose fonts that are easy to read on all screen sizes,
especially for body text.
Font Loading Optimization: If you're using custom fonts, optimize the
loading process by only including necessary font weights and styles
Comment More info
Corporate & Communications Address:
https://www.geeksforgeeks.org/css/css-fonts/ 5/6
19/09/2025, 22:56 CSS Fonts - GeeksforGeeks
A-143, 7th Floor, Sovereign Corporate
Tower, Sector- 136, Noida, Uttar Pradesh
(201305)
Registered Address:
K 061, Tower K, Gulshan Vivante
Apartment, Sector 137, Noida, Gautam
Buddh Nagar, Uttar Pradesh, 201305
Company Explore
About Us POTD
Legal Job-A-Thon
Privacy Policy Connect
Careers Community
Contact Us Blogs
Corporate Solution Nation Skill Up
Campus Training Program
Tutorials Courses
Programming Languages IBM Certification
DSA DSA and Placements
Web Technology Web Development
AI, ML & Data Science Data Science
DevOps Programming Languages
CS Core Subjects DevOps & Cloud
Interview Preparation GATE
GATE Trending Technologies
School Subjects
Software and Tools
Offline Centers Preparation Corner
Noida Aptitude
Bengaluru Puzzles
Pune GfG 160
Hyderabad DSA 360
Patna System Design
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
https://www.geeksforgeeks.org/css/css-fonts/ 6/6
