CSS Properties: How to specify a font named and URL where it can be found?

Last update on February 23 2024 13:05:54 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to specify a font named and URL where it can be found</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
.w3r1 { /* Defines a CSS class named w3r1 */
font: 15px "Times New Roman", Times, serif; /* Specifies all font properties in one declaration: font-size, font-family, and fallback fonts */
 }
.w3r2 { /* Defines a CSS class named w3r2 */
font: 15px Georgia, Times, serif; /* Specifies all font properties in one declaration for class w3r2 */
 }
.w3r3 { /* Defines a CSS class named w3r3 */
font: 15px "Courier New", Courier, monospace; /* Specifies all font properties in one declaration for class w3r3 */
 }
.w3r4 { /* Defines a CSS class named w3r4 */
 font: 15px Arial, Helvetica, sans-serif; /* Specifies all font properties in one declaration for class w3r4 */
 }
</style><!-- Ends CSS styling -->
</head>
<body>
<p><strong>w3resource Tutorial</strong></p><!-- Paragraph element with strong (bold) text -->
<p class="w3r1"><!-- Paragraph element with class w3r1 -->
  CSS, stands for Cascading Style Sheet is a computer language to describe presentation (for example width, height, color, background color, alignment etc.) of HTML and XML (and XML based languages like XHTML, SVG) web documents. In all the examples of our tutorials, we have used HTML for implementing CSS. <!-- Text content -->
</p><!-- Ends the paragraph element -->
<p class="w3r2"><!-- Paragraph element with class w3r2 -->
  CSS, stands for Cascading Style Sheet is a computer language to describe presentation (for example width, height, color, background color, alignment etc.) of HTML and XML (and XML based languages like XHTML, SVG) web documents. In all the examples of our tutorials, we have used HTML for implementing CSS. <!-- Text content -->
</p><!-- Ends the paragraph element -->
<p class="w3r3"><!-- Paragraph element with class w3r3 -->
  CSS, stands for Cascading Style Sheet is a computer language to describe presentation (for example width, height, color, background color, alignment etc.) of HTML and XML (and XML based languages like XHTML, SVG) web documents. In all the examples of our tutorials, we have used HTML for implementing CSS. <!-- Text content -->
</p><!-- Ends the paragraph element -->
<p class="w3r4"><!-- Paragraph element with class w3r4 -->
  CSS, stands for Cascading Style Sheet is a computer language to describe presentation (for example width, height, color, background color, alignment etc.) of HTML and XML (and XML based languages like XHTML, SVG) web documents. In all the examples of our tutorials, we have used HTML for implementing CSS. <!-- Text content -->
</p><!-- Ends the paragraph element -->
</body>
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to specify a font named and URL where it can be found using CSS.
Comments are added to both HTML and CSS to explain each section of the code.
In the CSS <style> block, multiple CSS classes are defined, each with the font property set to specify font size, font family, and fallback fonts.
Each paragraph element (<p>) in the HTML is assigned one of these CSS classes, resulting in different font styles being applied to each paragraph.

Live Demo:

See the Pen font-face-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page