Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to use font-feature-settings property in CSS?
The font-feature-settings property is used to control advanced typographic features in OpenType fonts. Advanced typographic features like swashes, small caps, and ligatures can be controlled using this CSS property.
Syntax
selector {
font-feature-settings: "feature-tag" value;
}
Possible Values
| Value | Description |
|---|---|
normal |
Default value, uses the font's default settings |
"feature-tag" |
Four-character OpenType feature tag in quotes |
1 or on
|
Enables the specified feature |
0 or off
|
Disables the specified feature |
Common Feature Tags
-
"smcp"Small capitals -
"swsh"Swashes -
"liga"Common ligatures -
"dlig"Discretionary ligatures -
"kern"Kerning
Example: Small Capitals
The following example demonstrates how to enable small capitals using the "smcp" feature tag
<!DOCTYPE html>
<html>
<head>
<style>
.normal-text {
font-size: 18px;
font-family: Georgia, serif;
}
.small-caps {
font-size: 18px;
font-family: Georgia, serif;
font-feature-settings: "smcp" 1;
}
</style>
</head>
<body>
<p class="normal-text">Normal Text: The Quick Brown Fox</p>
<p class="small-caps">Small Caps: The Quick Brown Fox</p>
</body>
</html>
Two paragraphs appear: the first shows normal text, and the second shows the same text with lowercase letters converted to small capital letters.
Example: Ligatures Control
This example shows how to enable common ligatures in text
<!DOCTYPE html>
<html>
<head>
<style>
.without-ligatures {
font-size: 20px;
font-family: Georgia, serif;
font-feature-settings: "liga" 0;
}
.with-ligatures {
font-size: 20px;
font-family: Georgia, serif;
font-feature-settings: "liga" 1;
}
</style>
</head>
<body>
<p class="without-ligatures">Without ligatures: office,ffle, ffi</p>
<p class="with-ligatures">With ligatures: office,ffle, ffi</p>
</body>
</html>
Two paragraphs display the same text: the first shows individual letters, while the second shows connected letter combinations (ligatures) where available.
Conclusion
The font-feature-settings property provides fine-grained control over OpenType font features. It allows you to enable or disable specific typographic features like small caps, ligatures, and swashes to enhance text appearance.
Updated on: 2026-03-15T18:05:15+05:30
309 Views
Advertisements