How To Change The Font On The Site

Table of contents:

How To Change The Font On The Site
How To Change The Font On The Site

Video: How To Change The Font On The Site

Video: How To Change The Font On The Site
Video: 10: How to Import New Fonts | Basics of CSS | Learn HTML and CSS | HTML Tutorial 2023, March

Each site on the Internet can be unique not only in terms of design and color scheme, but also based on the fonts that are used on it. With the help of the font, you can select the heading, make the text bold, apply italics to the selected area, and somewhere even underline something. Even a first grader can handle such a task in text editors, let's look at how you can change the font of the text on your own website.

How to change the font on the site
How to change the font on the site


Step 1

Open your CSS stylesheet. As a rule, all the parameters of the site design, including the text, are located there. Write the properties of the font using the tags of the font family. In the style sheet, you can change the following font properties:

font-family - specify the type of font you want to use. The most popular fonts are Times New Roman, Tahoma, Verdana, Arial;

font-size - specify the font size you need in the form of the corresponding number, do not forget to add pt. For example, font-size: 10pt;

font-style - specify the style of the font, be it normal or italic;

font-variant - specify the case of the font characters, small caps;

font-weight - specify the weight of the font, whether it will be bold, bold, etc.

Step 2

You can change the font of the text directly in a specific HTML document if you don't want the stylesheet to apply the same appearance to the entire site. To do this, use the font parameters no longer in the stylesheet, but directly in the segment of text that you want to change. For example: Here is your text

In this case, the font tag has three parameters:

color - font color;

face - font type;

size - font size.

Change the text parameters you need, you get something like the following:

Here's your text

Step 3

Arrange headings where necessary. Text headings are usually surrounded by tags from


depending on what size of the header you want to get. H1 - this is the main heading on the page, respectively, the largest; H6 is the smallest. H tags are paired tags, so you need to put both an opening H and a closing one.

Step 4

Apply additional text formatting options where appropriate. You can:

- highlight a segment of text in bold using paired tags, or

- apply italics using paired tags, or

- underline the necessary sections of text using a paired tag

Popular by topic