Type that tells your story
One type of styling that will occur frequently is font styling. Font styling will allow you to get away from worrying about default font styles. For example, <h1> through <h6> tags are not only used to display the specific font styles that are normally associated with those tags, they are also used to structure the website. We will discuss website structure later. We can change the following properties of fonts that we use throughout the website:
font-familyfont-sizefont-stylefont-weight
Font family specifies which type of font you would like to choose in a comma separated list. In the example below, we have three values appended to this font. The first option specifies your first choice, the second value is a fallback option in case the first option is not available, and the third value is the fallback option in case your first two options are not available. The last two options do not have quotes around them. This is because these are generic fonts and generic fonts must be declared without quotes.
h1 { font-family: “Times New Roman”, Times, sans-serif; }
The size of the font is modified using the font-size attribute. The most common units for measuring font sizes are the px and em units. The first unit we’ll discuss is the pixel unit. The pixel is an absolute value and will not change based on the surrounding elements. The em unit is a relative unit and will change its size based on inherited font sizes. For example, let’s say we have a paragraph tag with a nested anchor tag. The text inside the paragraph tag will have a font size of 12px and the anchor tag will have a font size of 1em. Considering its nearest ancestor has a font size of 12px, it will also have a font size of 12px. If we change the anchor text font size to 2em, the font size will be 24px (2×12). So, the em unit just multiplies the font size of the nearest inherited font size.
<p>
<a href=”#”>
This text will be 24px in size.
</a>
</p>
/* CSS */
p { font-size: 12px; }
a { font-size: 2em; }
Setting the anchor font size to 0.5em will cause the anchor font to appear twice as small as the font size of the paragraph font size. Since the paragraph font size is 12px high, setting the anchor tag to 0.5em will cause the anchor text to appear 6px high.
The font style is used to add an italicized style to the element. The acceptable values for the font-style property are: italic, oblique, and normal.
<div>Default text style.</div>
<p id=”italic”>This text will appear italic.</p>
<p id=”oblique”>This text will appear oblique.</p>
/* CSS */
#italic { font-style: italic; }
#oblique { font-style: oblique; }
Italic and oblique styles are nearly indistinguishable. If the font does not have oblique or italic versions, the fonts will look identical.
Font weight is a property that specifies the thickness of the font. Font weight can be specified either numerically (100 to 900 in increments of 100) or using a keyword such as bold.
<div>Default text weight.</div>
<p>This text will appear bold.</p>
/* CSS */
p { font-weight: bold; }
External fonts can sometimes be preferable to generic fonts. To include a web font, you must specify @font-face inside your CSS document. The @font-face property must specify the following two properties: font-family and src. Font family specifies the font name you’re trying to use and src specifies the location of the font. Once the font has been added, you can use it inside your other CSS elements.
@font-face {
font-family: “Raleway-Regular”;
src: url(Raleway.ttf);
}
h1 { font-family: “Raleway-Regular”, Times, serif; }
Web fonts can be downloaded and included from a local directory, or retrieved from an online repository, such as Google Fonts. To retrieve a Google font, first navigate to https://fonts.google.com/.
Once you find the font that you would like to use, press the plus button next to the specified font. This will add the font to the collection. You will be able to include the desired font inside your web page. Copy the contents inside the <link> tag and paste it inside the <head> of your HTML document, right above your external CSS document.
<head>
<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:ital,wght@0,100;0,300;1,100&display=swap"
rel=“stylesheet"
>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>Default Font</div>
<p>Using Google's Roboto font.</p>
</body>
/* CSS */
p { font-family: 'Roboto', sans-serif; }
If you include the stylesheet below your custom stylesheet, your stylesheet will be unable to read the included font.
To start using the included font, navigate back to the Google Fonts page and select the font-family property. Open your CSS document and paste the code inside the selector of your choice.
CSS Series
Continue your CSS Learning.
Fine-tune styles with smart selectors
CSS — P4: Pseudo-Class Selectors & Selector Precedence
Part four of our CSS fundamentals series demystifies pseudo-class selectors—from :hover and :nth-child() to :not()—and shows how specificity and source order decide who wins when styles collide. Build predictable, accessible interactions with confidence.
Type that tells your story
Part five of our CSS fundamentals series turns plain text into polished prose. Adjust font families, weights, line heights, letter spacing, shadows, and responsive clamp sizes while balancing readability, branding, and performance.
CSS — P6: Image Styling
Part six of our CSS fundamentals series reveals how to elevate images with pure CSS—think border-radius masks, object-fit cropping, graceful aspect-ratio boxes, subtle filters, box-shadows, and hover transforms that feel alive, all while staying responsive across viewports.