Using the @font-face directive and the line-gap-override feature in CSS

These days, the use of custom fonts in web design has become one of the essentials for creating user-friendly and visually appealing designs. Users who are in different languages, especially Persian speakers, need to be able to add fonts to their websites that present content accurately, beautifully, and efficiently. One of the ways to achieve this is by using the @font-face feature in CSS.

With @font-face, you can incorporate custom fonts into your web pages and easily use them. This feature allows you to use fonts from external sources without needing the fonts to be installed on the local system.

One of the challenges you might encounter with this is the space between lines that can create unexpected gaps in the display of custom fonts. This is particularly important if your design requires precise line spacing.

This is where the line-gap-override feature comes into play. This feature is still in early implementation stages but allows you to adjust the space between lines to your liking while disregarding the default font line spacing.

Code Example

@font-face {
    font-family: "MyCustomFont";
    src: url("mycustomfont.woff2") format("woff2");
    line-gap-override: normal;
}

body {
    font-family: "MyCustomFont", sans-serif;
}

Line-by-Line Explanation of the Code

@font-face: Here, we define our custom font to be included on the page.
font-family: With this property, we name our custom font, making it available for use later on.
src: Specifies the address and format of the font file.
line-gap-override: This new feature allows us to control line spacing.
body: Sets the default font for the content of the page.