Connecting fonts in CSS

If you do not delve into the details, you can quickly connect the font like this:

/* Normal */
@font-face {
	font-family: 'FontName'; 
	src: url(/fonts/font.ttf); 
}

/* Bold */
@font-face {
	font-family: 'FontName bold'; 
	src: url(/fonts/font-bold.ttf); 
}

.text-1 {
	font-family: 'FontName'; 
	font-size: 20px;
}

.text-2 {
	font-family: 'FontName bold'; 
	font-size: 20px;
}
CSS

This method works fine in most browsers, but is incorrect. Omitted in this example:

  • There is no font name in the local property.
  • Only one font format is connected.
  • Faces configured incorrectly.
14.02.2020, updated 28.05.2021
78

Comments

to add a comment.

Other publications

Links to messengers from the site
HTML links to open chat and other functions of popular instant messengers.
40
0
CSS styles for horizontal lines
Collection of horizontal lines with hr tag of different types and styles.
61
0
Vertical alignment of text in a block
A way to vertically align text in blocks of fixed height. The text is wrapped in a tag with a .child class, followed by...
31
0
Heading with a horizontal line in the middle
One way to make a heading with a horizontal line in the center without an image (background-image).
52
0
The viewport meta tag
Initially, the viewport meta tag appeared in the mobile version of Safari, then it was picked up by other developers and mobile browsers, although it is not part of the W3C standard.
34
0
Smooth background change
This effect can be easily done through the CSS transition property for example buttons, menus, etc.
141
0