Font Face CSS
Cascading Style Sheets (CSS)
CSS, which stands for Cascading Style Sheets, is a stylesheet language used to describe the look and formatting of a document written in HTML or XML. It used to style web pages and interfaces written in HTML and XHTML but can also be applied to any kind of XML document, including SVG and XUL.
CSS is used to define styles for your web pages, including the design, layout, and variations in display for different devices and screen sizes. It separates the content of the document from the presentation of the document, which makes it easier to maintain and manage websites.
CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independently of the HTML that makes up each web page. CSS can be added to HTML documents in 3 ways:
- Inline: By using the style attribute inside HTML elements
- Internal: By using a <style> block in the <head> section of the HTML document.
- External: By using an external CSS file, which is then linked to the HTML document using the <link> tag
The main benefit of CSS is that it promotes the separation of HTML (content) from CSS (presentation). This makes it possible to maintain the visual aspects of a website separately from the structural logic, which can lead to cleaner code, easier maintenance, and more flexibility.
Syntax:
CSS is composed of rulesets or rules. Each ruleset includes a selector and a declaration block. The selector identifies the HTML elements to be styled, and the declaration block contains one or more declarations. Each declaration includes a CSS property name and a value, separated by a colon. Here is an example of a ruleset.
h1 {
color: blue;
font-size: 24px;}
In this example, h1 is the selector, and colour and font size are properties. blue and 24px are the values of those properties.
- Selectors: Selectors are one of the key aspects of CSS as they are used to "select". Elements on an HTML page. There are various types of selectors, including:
- Type selectors (tag selectors): Select elements based on the name of the element (e.g., h1, p, div).
- Class selectors: Select elements based on the class attribute (e.g., .example selects all elements with class=”example”).
- ID selectors: Select an element based on the id attribute (e.g., #example selects the element with id= “example”).
- Attribute selectors: Select elements based on an attribute or attribute value (e.g., [target= “_blank”] selects all elements with target= “_blank”).
- Pseudo-class selectors: Select elements based on a particular state (e.g., :hover selects the element only when it’s being hovered over).
- Pseudo-element selectors: Select and style a part of an element (e.g., ::first- letter selects the first letter of an element).
- Combination selectors: Select elements based on a combination of conditions (e.g., div p selects p elements inside div elements).
- Box Model: Every element in web design is considered a box and can be described using the box model. The box model includes margins, borders, padding, and content. This model allows us to place a border around elements and space elements with other elements.
- Media Queries: CSS Media Queries make applying CSS only in specific conditions (e.g., screen widths) possible. This is especially useful for creating responsive web designs where the design adjusts to different screen sizes.
- Frameworks: CSS frameworks are pre-prepared libraries for easier, more standards-compliant webpage styling. Some popular CSS frameworks include Bootstrap, Foundation, and Tailwind CSS.
- Preprocessors: CSS preprocessors like SASS and LESS add functionality to CSS, such as variables, mixins, and functions. The preprocessor then compiles your code to CSS so it can work in the browser.
- Separation of Content and Presentation: One of the main benefits of CSS is that it separates a website's content (usually written in HTML or a similar markup) from its visual presentation. This means you can change the look of an entire website by modifying its CSS without touching its HTML.
- Cascading: The term “cascading” refers to the order of priority a browser should follow when encountering conflicting styling rules. This cascading priority scheme is calculated based on specificity and source order.
Front Face CSS
The @font-face CSS at-rule specifies a custom font and can be loaded from either a remote server or a locally installed font on the user's machine. Custom fonts can be loaded on a website thanks to the @font-face rule. When a rule is included in a stylesheet, the browser is told to download the font from its host to display it as defined by the CSS. Web designers are no longer required to use one of the "web-safe" fonts thanks to the @font-face rule.
It would help if you defined the font's name (for example, "myFirstFont") in the @font-face rule before pointing to the font file.
Another font file, "sansation_bold.woff", contains bold characters in the Sansation typeface.
When a text with the font family "myFirstFont" needs to be rendered as bold, browsers will utilize this.
You can have numerous @font-face rules for the same font in this way.
Syntax:
@font-face {
font-family: "Trickster";
Src:
local("Trickster"),
url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
url("trickster-outline.otf") format("opentype"),
url("trickster-outline.woff") format("woff");
}
Definitions:
- Ascent-override: Establishes the font's ascension metric.
- Descent-override: Establishes the font's descent metric.
- Font-display: Based on whether or not it has been downloaded and is prepared for usage determines how a font face is shown.
- Font-family: The name used as the font face value for font attributes is specified.
- Font-stretch: A value for font-stretch. accepts two values to describe a range that a font face will support, such as font-stretch: 50% 200%;
- font-style: A value for font style. accepts two values to specify a range that a font face will support, such as font style: oblique 20° to 50°
- font-weight: Font-weight measurement. takes two values to indicate a range that a font face will support, such as font-weight: 100 400;
- font-feature-settings: Gives control over OpenType fonts' advanced typographic capabilities.
- Font-variation-settings: This function enables low-level control over OpenType or TrueType font variants by giving the four-letter axis names of the characteristics to vary and their variation values.
- Line-gap-override: Establishes the font's line gap metric.
- Size-adjust: Defines a multiplier for the metrics and glyph outlines related to this font. When presented in the same font size, this makes it simpler to synchronize the designs of distinct typefaces.
- Src: Specifies links to font resources and information about font technology and format. The @font-face rule must be present for it to be effective.
- Unicode-range: The selection of Unicode code points that will be used from the font.
To use the user's installed copy of the font when it is accessible and fall back to downloading a copy if it cannot be found on the user's device, it is usual to use both url() and local() together.
The local font is used if the user agent detects a match when the local() function is used to specify a font name to search for on the user's device. Otherwise, the url() function-specified font resource is downloaded and used.
Since browsers try to load resources according to their list declarations, local() is typically written before url(). It is possible to have a rule block with only one or more local() and no url() because both functions are optional. If format() is used with more particular typefaces, Versions with or tech() values should be listed before versions without them. Otherwise, the less specific variant would be tried and used first.
@font-face enables authors to create material without being constrained by the so-called "web-safe" fonts (i.e., the fonts that are so widely used that they are regarded as widely available). Beyond the bare minimum, it is possible to personalize the typeface by specifying the name of a locally installed font to look for and use and to do so independently of an online connection.
Several hosted font services: You can get different fonts from these services.
- Fonts.com
- Google Fonts
- Typotheque
- Typography
Example 1: The @font-face rule is used in this example to specify the various font attributes so that the text can be appropriately decorated.
Css code:
<!DOCTYPE html>
<html>
<head>
<title>CSS @font-face rule</title>
<style>
@font-face {
font-family: fontName;
src: url(sansation_light.woff);
}
@font-face {
font-family: fontName;
src: url(sansation_bold.woff);
font-weight: bold;
}
div {
font-family: fontName;
}
h1 {
color: black;
}
</style>
</head>
<body>
<center>
<h1>javatpoint</h1>
</center>
</body>
</html>
Output:
Various Font Formats
1. TTF: TrueType Fonts:
Apple and Microsoft created the TrueType font standard in the late 1980s. TrueType is the most widely used font format for Mac OS and Microsoft Windows.
2. OTF (OpenType Fonts):
Scalable computer typefaces are available in the OpenType format. It was created using TrueType and is a Microsoft-registered trademark. On the main computer platforms today, OpenType fonts are often utilized.
3. WOFF, short for Web Open Font Format:
A font format for usage in websites is called WOFF. The 2009 development is now a W3C recommendation. In essence, WOFF is OpenType or TrueType that has been compressed and given extra metadata. The objective is to facilitate font delivery via a network from a server to a client with restrictions on bandwidth.
4. WOFF 2.0, short for Web Open Font Format:
Better compression over WOFF 1.0 for TrueType/OpenType fonts.
5. SVG Shapes/Fonts:
When displaying text, SVG can be used as glyphs, thanks to SVG fonts. A font module that enables the generation of fonts inside an SVG document is defined in the SVG 1.1 specification. The @font-face rule can style text in SVG documents, and CSS can also be applied to SVG files.
6. OpenType Fonts Embedded (EOT):
Microsoft created EOT fonts, a condensed version of OpenType fonts, to be used as embedded fonts on websites.
7. Using the Font of Your Choice:
Specify the font's name (such as "myFirstFont") in the @font-face rule before pointing to the font file.
To utilize the font for an HTML element, use the font-family property to specify the font's name (myFirstFont):
Example:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
8. Font stretch:
Normal condensed, ultra-condensed, extra-condensed, enlarged semi-expanded, and ultra-expanded fonts are all possible.
9. Bold Text Use:
Another @font-face rule with descriptions for bold text must be added:
Example:
@font-face {
font-family: myFont;
src: url(Transction_bold.woff);
font-weight: bold;
}
Another font file, "Transction_bold.woff", contains bold characters in the Transction typeface.
When a text with the font family "myFont" needs to be rendered as bold, browsers will utilize this.
In this manner, numerous @font-face rules for the same font are possible.
You can specify a unique font for your website or web application using the @font-face rule in CSS.
Following are the methods for utilizing the @font-face rule to use fonts in CSS:
Find the font you wish to use by visiting a font vendor website like Google Fonts, Adobe Fonts, or Font Squirrel and downloading the font file. Verify that you have the correct licensing before using the typeface.
10. Put the font files online:
The font files should be uploaded to your website or online application. They can be kept in a directory called "fonts" or "assets," for example.The @font-face rule's definition: Define the @font-face rule in your CSS file and use the src property to give the path to the font files. You may further configure font-weight, font-style, and font-display
11. Use of regional fonts
You can specify a unique font for your website or web application using the @font-face rule in CSS. The @font-face rule's src property is intended to provide the font file's source, but it can also be used to specify the font's name as it appears on the user's machine.
This is advantageous since it prevents users from downloading font files from servers if they already have the requested font installed on their PCs. As the font is already installed on the user's PC, this can considerably speed up the loading and display of the website.
Conclusion
The @font-face CSS at-rule specifies a custom font and can be loaded from either a remote server or a locally installed font on the user's machine. Custom fonts can be loaded on a website thanks to the @font-face rule. When a rule is included in a stylesheet, the browser is told to download the font from its host to display it as defined by the CSS. Web designers are no longer required to use one of the "web-safe" fonts thanks to the @font-face rule.