CSS fonts

Learn how to use fonts in CSS

At the beginning of the Internet, you only had a few fonts to choose from.

Thankfully, today you can load any font on the page.

Over the years, CSS has gained many good features in fonts.

Thisfontproperty is shorthand for many properties:

  • font-family
  • font-weight
  • font-stretch
  • font-style
  • font-size

Let's take a look at each of them, and then we will introducefont.

Then we will discuss how to use@importor@font-face, Or load the font style sheet.

font-family

Set fontfamilyThe element that will be used by the element.

Why is "family"? Because the fonts we know are actually composed of several sub-fonts. Provide all the styles we need (bold, italic, light...).

This is an example from the Font Book app on my Mac-the Fira Code font family hosts several special fonts below:

This attribute allows you to select a specific font, for example:

body {
  font-family: Helvetica;
}

You can set multiple values, so if for some reason the first option cannot be used (for example, the option is not found on the computer, or the network connection to download the font fails), the second option will be used:

body {
  font-family: Helvetica, Arial;
}

So far, I have used some specific fonts, which we callWeb safe fonts, Because they are pre-installed on different operating systems.

We divide them into Serif, Sans-Serif and Monospace fonts. Here are some of the most popular lists:

Serif-Georgia-Palatino-Time New Roman-Time

Sans serif font-Arial-Helvetica-Verdana-Geneva-Tahoma-Lucida Grande-Shock-Trebuchet MS-Arial Black

Constant space-Express-Express-Lucida Console-Monaco

You can use all of these asfont-familyAttributes, but there is no guarantee that every system has these attributes. Others also have varying degrees of support.

You can also use the common name:

  • sans-serifFont without ligatures
  • serifFont with ligatures
  • monospaceA font that is particularly suitable for code
  • cursiveUsed to simulate handwritten works
  • fantasyThe name says it all

These are usually used infont-familyDefined to provide a back-up value in case other situations cannot be applied:

body {
  font-family: Helvetica, Arial, sans-serif;
}

font-weight

This attribute sets the width of the font. You can use these predefined values:

  • normal
  • bold
  • Bold (relative to the parent element)
  • Lighter (relative to the parent element)

Or use numeric keywords

  • 100
  • 200
  • 300
  • 400, mapped tonormal
  • 500
  • 600
  • 700 maps tobold
  • 800
  • 900

100 is the lightest font, and 900 is the boldest.

Some of these numeric values may not be mapped to the font, because the value must be provided in the font family. If one is missing, CSS will make the number at least as bold as the previous number, so you may have numbers pointing to the same font.

font-stretch

Allows selection of a narrow font or a wide font (if any) of the font.

This is important: fonts must be equipped with different fonts.

The allowed values range from narrow to wide:

  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • normal
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded

font-style

Allows you to apply italic style to the font:

p {
  font-style: italic;
}

This attribute also allows valuesobliquewithnormal. The difference between uses is small, if anyitalicwithoblique. The first one is easier for me because HTML is already providediRepresents elements in italics.

font-size

This attribute is used to determine the size of the font.

You can pass 2 kinds of values:

  1. Length value, for examplepx,em,remEtc. or a percentage
  2. Predefined value keywords

In the second case, the values that can be used are:

  • xx small
  • small
  • small
  • Moderate
  • Big
  • x big
  • xx big
  • Smaller (relative to the parent element)
  • Larger (relative to the parent element)

usage:

p {
  font-size: 20px;
}

li {
font-size: medium;
}

font-variant

This attribute was originally used to change the text to lowercase, and there are only 3 valid values:

  • normal
  • inherit
  • small-caps

Lowercase uppercase means that the text is presented in "lowercase uppercase" next to the uppercase letter.

font

ThisfontAttributes allow you to apply different font attributes in a font, thereby reducing confusion.

We must set at least 2 attributes,font-sizewithfont-family, Others are optional:

body {
  font: 20px Helvetica;
}

If we add other attributes, we need to place them in the correct order.

This is an order:

font: <font-stretch> <font-style> <font-variant> <font-weight> <font-size> <line-height> <font-family>;

example:

body {
  font: italic bold 20px Helvetica;
}

section {
font: small-caps bold 20px Helvetica;
}

Use to load custom fonts@font-face

@font-faceAllows you to add a new font family name and map it to the file containing the font.

The font will be downloaded by the browser and used on the page, which is a fundamental change to network typography-we can now use any font we need.

We can add@font-faceThe declaration is added directly to our CSS, or linked to the CSS dedicated to importing fonts.

In our CSS file, we can also use@importLoad the CSS file.

A kind@font-faceThe declaration contains some attributes that we use to define the font, includingsrc, Which is the URI of the font (one or more URIs). This follows the same-origin policy, which means that fonts can only be downloaded from the current source (domain + port + protocol).

Fonts usually use the following format

  • woff(Internet open font format)
  • woff2(Network open font format 2.0)
  • eot(Embedded open)
  • otf(OpenType font)
  • ttf(TrueType font)

As shown below, the following properties allow us to define the properties of the font that will be loaded:

  • font-family
  • font-weight
  • font-style
  • font-stretch

Performance description

Of course, loading fonts will affect performance, and these effects must be considered when creating a page design.

Download mine for freeCSS Manual


More CSS tutorials:


Online technical encyclopedia!