How to change the color of selected text using CSS ?

How to set the font family of text using CSS ?

Last Updated : 23 Dec, 2020

The CSS font property is used to set the fonts content of HTML element. The font-family property specifies the font of an element. It can have multiple fonts as a backup system i.e. if the browser doesn’t support one font then the other can be used.

Syntax:

element_selector {
   font-family: fonts-name | initial | inherit;
}

Property values:

fonts-name: The names of the font in quotes separated by commas.
initial: It sets the property to its default value.
inherit: It inherits the property from the parent element.

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to set font family
        of text using CSS ?
    </title>

    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        .para1 {
            font-family: "Impact", Times, serif;
        }

        .para2 {
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h2>
        How to set font family
        of text using CSS ?
    </h2>

    <p class="para1">
        GeeksforGeeks in Impact font
    </p>


    <p class="para2">
        GeeksforGeeks in Arial font
    </p>

</body>

</html>

Output:

How to change the color of selected text using CSS ?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to Change the Font Family & Size of Text in CSS ?

In CSS, the font family and size of the text can be customized to enhance the visual appearance of the text within the application. We can use various inbuilt properties offered by CSS to change font family and size. Below are the approaches to change the font family and size of text in CSS: Table o

How to change the font style of a text canvas using Fabric.js ?

In this article, we are going to see how to change the font style of a text canvas using FabricJS. The canvas means text written is movable and can be stretched according to the requirement. Further, the text itself cannot be edited like a textbox.Approach: To make it possible we are going to use a

How to change the color of selected text using CSS ?

The colour of selected text can be easily changed by using the CSS | ::selection Selector. In the below code, we have used CSS ::selection on <h1> and <p> element and set its colour as yellow with green background. Below example implements the above approach: Example: html <!DOCTYPE h

How to change font-family of a text canvas using Fabric.js ?

In this article, we are going to see how to change the font-family of a text canvas using FabricJS. The canvas means text written is movable and can be stretched according to requirement. Further, the text itself cannot be edited like a textbox.To make it possible we are going to use a JavaScript li

How to bold the text using CSS ?

In HTML, we use the <b> and <strong> tags to make content bold. However, when it comes to styling text, CSS provides a more versatile way to achieve boldness through the font-weight property. This property allows you to set various boldness levels for your text to mark something importan

How to set all the font properties in one declaration using CSS ?

In this article, we will learn how to set all the font properties in one declaration using CSS. This can be used for quickly setting the required font properties without specifying each of them separately. Approach: We will use the font property of CSS which is the shorthand property for all the fon

How to set default font color using Tailwind CSS ?

In Tailwind CSS, setting the default font color refers to establishing a consistent text color across the entire webpage or specific elements. Tailwind offers utility classes to define font colors, ensuring uniformity in the design without the need for custom CSS styling.Here we have some common app

How to Apply Shadow Effect on Text Using CSS?

The CSS text-shadow property is used to add a shadow to the text.Adding a shadow to text using CSS text-shadowThe text-shadow property of CSS is used to apply the shadow effect on text. It takes four values verticalShadow, horizontalShadow, blur, and color.Syntaxtext-shadow: verticalShadow horizonta

How to change the cases of text in paragraph using CSS?

The approach of this article is to how to change cases of text in a paragraph by using the CSS text-transform Property. It is s used to control the capitalization of the text. It mainly changes the text into upper case and lowercase format. Syntax: text-transform: none | capitalize | uppercase | low

How to Include a Font .ttf using CSS?

To include a .ttf font in a web project using CSS, you can use the @font-face rule, which allows you to load external fonts and use them throughout your site. Here's a step-by-step guide on how to include a .ttf font using CSS:Steps to include font .ttf using CSS:Step 1: Download a .ttf font file fr