How to Make Font Declaration in CSS for Beginners

Making font declaration in CSS can be a bit tricky, but don't worry, it's actually quite simple. In fact, it's one of the most basic yet essential elements in CSS.

To start, you need to use the @font-face rule to declare a font. This rule allows you to link to an external font file or define a new font family. You can also use the font-family property to specify the font family name.

The font-family property is used to specify the font family name, and you can use multiple font families separated by commas. For example, you can use "Arial, sans-serif" to specify Arial as the primary font and sans-serif as the fallback font.

CSS stands for Cascading Style Sheets, a styling language used to control the layout and visual appearance of web pages.

You can add CSS to your HTML document by linking it to the HTML file using the link tag. This is shown in the example of linking an external CSS file.

The CSS syntax is made up of selectors, properties, and values. Selectors are used to target specific HTML elements, such as headings and paragraphs.

The CSS properties include font-family, font-size, and color, which are used to style the font and text.

Font declaration in CSS is a crucial step in customizing the look and feel of your website. You can set all font properties in one declaration using CSS, as seen in Example 1.

The src property for @font-face is used to specify the resource containing font data. This property expects either a local name or a URL containing a link to the actual font file, which is relative to the CSS file in which you are using the @font-face property.

Here are the different types of font formats that can be used in the src property: Local font facesExternal references Each of these types must be prioritized, as the user agent will iterate over the set of references listed, using the first one it can successfully parse and activate.

Font properties are used to style text on a web page, and CSS provides a variety of properties for this purpose.

Some common font properties include font-family, font-size, font-style, font-weight, line-height, text-decoration, text-transform, and font-variant.

You can set the font weight to "bold" using CSS, as seen in the example where the font weight is set to "bold".

The font style can be set to italic, and the font variant can be set to small-caps, as shown in another example.

Here are some font properties that can be set in one declaration using CSS:

The src property is used in the @font-face declaration to specify the location of the font file. It can be a local name or a URL containing a link to the actual font file.

Default Language Overriding is a crucial aspect of font declaration. The font-language-override descriptor defines initial settings that apply when the font defined by an @font-face rule is rendered.

It's a specific descriptor used in conjunction with the @font-face rule. The descriptor's value is either "normal" or a string.

The initial value of the font-language-override descriptor is "normal". This setting doesn't affect font selection.

When multiple font feature descriptors or properties are used, the cumulative effect on text rendering is detailed in the section § 7 Font Feature and Variation Resolution.

Font variants are a crucial part of font declaration in CSS. You can set font variants using the font-variant property, which is used to specify the font variant, such as small-caps or normal.

To set font variants, you can add the font-variant property after the font style in the font declaration, and use the font shorthand property for this. For example, you can set the font-variant to “small-caps” as shown in the example.

The font-variant property is used in combination with other font properties, such as font-style and font-size, to create a complete font declaration. By mastering font variants, you can add a new level of sophistication to your web designs.

Here are the possible values for font-variant:

These values can be used to create a wide range of font styles, from classic to modern and everything in between.

Custom fonts can be used to add a personal touch to your designs.

You can employ the @font-face rule in CSS to define and use custom fonts that aren't installed on the user's device.

To use @font-face, you specify the font file location and format, like this: @font-face {font-family: "HtmlCssJs"; src: url("fonts/HtmlCssJs.woff2") format("woff2"), url("fonts/HtmlCssJs.woff") format("woff");}.

The font can then be used throughout the CSS file by referencing the font family name, such as "HtmlCssJs", which is used in the example: body { font-family: "HtmlCssJs", sans-serif;}.

Display Control Per Face is a feature that allows you to customize the display settings for each face of a font, giving you more control over how your text looks.

This feature is particularly useful for fonts with multiple faces, such as Open Sans, which has 9 different faces, each with its own unique characteristics.

With Display Control Per Face, you can adjust the display settings for each face independently, such as font size, line height, and letter spacing.

For example, you could set the main title face to be larger and more spaced out, while the body text face is smaller and more compact.

This level of control can be especially helpful for designers and developers who need to ensure that their text is readable and visually appealing across different devices and screen sizes.

As we saw in the example of Open Sans, Display Control Per Face allows you to tailor the display settings to suit the specific needs of each face, resulting in a more polished and professional-looking design.

Composite character ranges are a powerful tool for creating custom font variants. By using multiple @font-face rules with different unicode ranges for the same family and style descriptor values, you can mix and match glyphs from different fonts for different scripts.

This technique can be used to combine fonts that only contain glyphs for a single script, such as Latin, Greek, or Cyrillic. For example, you can create a composite font that includes glyphs for Latin characters, Greek characters, and Cyrillic characters.

The user agent will only download the fonts it needs, which helps reduce page bandwidth. If the unicode ranges overlap for a set of @font-face rules with the same family and style descriptor values, the rules are ordered in the reverse order they were defined; the last rule defined is the first to be checked for a given character.

Here's an example of how this works:

In this example, the user agent first checks the unicode-range of the font containing Latin characters (DroidSans). Since all the characters above are in the range U+0-5FF, the user agent downloads the font and renders the text with that font.

However, if the text includes a character that is not in the range U+0-5FF, the user agent will check the next rule in the list. In this case, the user agent will evaluate the Japanese font, which has a unicode-range of U+3000-9FFF and U+ff??. If the character is not in this range, the user agent will check the fallback font, which has a unicode-range of U+0-10FFFF.