Fonts in CSS - ProgrammerTech


Fonts in CSS

  • Share this:
Fonts in CSS

Fonts in CSS

Formatting fonts with CSS, we will address the problem of how to display some fonts that will not appear correctly unless they are installed on the computer.

Choosing the right font on your site has a very big impact on how your readers experience your website. The right formatted font can create a strong identity for your brand. It is important to use a font that is easy to read. Keep in mind that font adds value to your text. It is also important to choose the correct font color and text size for the font.


CSS General Fonts

CSS enables you to control fonts in terms of size, color, and font type using some general properties, which are five properties:

  1. font-family.
  2. font-style.
  3. font-variant.
  4. font-weight.
  5. font-size.
  6. font.


font-family property

The font-family enables you to set a list of fonts that are applied in order of priority to an element, meaning if the browser does not find the first font, it will move to the second font and so on until it finds the appropriate font. And there are font types such as tahome, times new roman, Arial, and there are many fonts in each family, let's talk about that family and what is the difference between them.

times new roman,garamond,georgia

These fonts belong to the serif family and are distinguished by the fact that they contain appendages at the edges of their letters.


These fonts do not have appendages on their edges, unlike fonts from the serif family, and these fonts are from the sans-serif family.

courier,courier new,andele mono

These fonts belong to the monodpace family and are distinguished by their uniform width. And as we talked about above, you can select a group of fonts. If the browser does not find the font, it moves to the second and third font.....etc. Until he finds the right line.

Example 1

Let us have the name of our website in the body of the page, which are the hashtags h1 and h2.

    font-family: verdana,arial,sans-serif;
    font-family: "Times New Roman" , serif;

In the previous example, in the first process, which is h1, we tell the browser that if you do not find the type of the first font, which is verdana, go to the second font, which is arial, and if you do not find the font, use a font from the sans-serif family, and in the second process, which is h2, we tell the browser that The first font type is Times New Roman. Use one of the serif family fonts.


font-style property

This property is used in font formatting and takes values

normal, italic, oblique

Example 2

    font-style: oblique;

We used the font-style property and set it to oblique.


font-variant property

The font-variant property is related to font display and takes values ​​(normal, small, caps) and it is related in European languages, the value small-caps means that the text will be written in capital letters, but it is small in terms of size and this is not difficult.

Example 3

    font-variant: small-caps;
    font-variant: normal;

We used the font-variant property on the first tag h1 and gave it the value small-caps, then on the h2 tag we used the value normal.


font-weight property

The font-weight property is called the font weight, and there are some values ​​that are used with this property (bold, normal). There are browsers that support the use of numbers from 100 to 900.

Example 4

    font-weight: bold;

We used the font-weight property and the value we set for the font is bold.


font-size property

The font-size property controls the font size, and the font can be specified in percentage or pixels.

Example 5

    font-size: 100px;

In this example, we used the font-size property and set it to 100 pixels.


font property

The font property is a shortcut to all the previous properties. Through this property, you can group the previous properties into one line, as we talked about in the previous lesson about background. You can shorten many lines of formatting in one line.

Example 6

    font: italic bold 30px arial ,sans-serif;

In this example, we used the font property and gave it the font format that italic and that the font is wide and the size of this font is 30 pixels and the type of font is arial, and if you do not find this font, use sans-serif.

Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.