1. css
  2. /properties
  3. /font-variation-settings

font-variation-settings

Definition

The font-variation-settings property allows you to specify custom variations for variable fonts. This property lets you adjust various aspects of a variable font, such as its weight, width, or slant, by setting specific variation values.

The font-variation-settings property is a low-level approach meant for adjusting variable font features when no other properties can achieve that effect. Basic font properties like font-weight or font-style are often preferable due to their simplicity and cascade behavior. However, for unique font variations not achievable by standard properties, this property can be useful.

Examples

The font-variation-settings property offers granular control over OpenType or TrueType font variations. Typically, it's used to access unique font variations that aren't commonly utilized but are essential for specific design requirements.

Below, we'll explore some illustrative examples of how the property can be potentially used to adjust the weight, width, slant, optical size, x-height, and italic angle of a variable font:

p {
  font-variation-settings: "wght" 700, "wdth" 110;
}

In the example above, the font weight (wght) is set to 700 and the font width (wdth) is increased to 110.

h1 {
  font-variation-settings: "slnt" -10, "opsz" 20;
}

This modifies the font slant (slnt) to a counter-clockwise angle of 10 degrees and the optical size (opsz) to 20.

blockquote {
  font-variation-settings: "xhgt" 0.8, "ital" 15;
}

Here, the x-height (xhgt) is adjusted to 0.8 and the italic angle (ital) is set to 15.

Values

ValueDescription
normalDisplays the default variant of the font.
<string> <number>Allows custom variations for fonts. Consists of pairs with a <string> of exactly 4 ASCII characters denoting the font axis name, and a <number> specifying its value. The <string> must be within the U+20 - U+7E range or the property is invalid. The <number> may vary based on font specifications, including fractional or negative values.

Best Practices

  • Use variable fonts and the font-variation-settings property judiciously, as they can have a significant impact on page loading times and performance.

  • Consider using a fallback font stack for browsers that do not support variable fonts, or use feature detection to provide a fallback font only when necessary.

  • Be mindful of legibility when adjusting font variations. Some variations may make text more difficult to read, especially in small font sizes.

  • Test your font-variation-settings styles on different devices and screen sizes to ensure that they are legible and effective.

  • Use custom variation values sparingly, and only when they are necessary to achieve a specific design goal.

  • Type is just one component of your overall design. Ensure that the chosen font variations work harmoniously with other elements like colors, spacing, and imagery, leading to a cohesive user experience.

Browser Compatibility

ChromeMicrosoft EdgeSafariFirefoxOperaInternet Explorer
Yes*Yes*Yes*Yes*Yes*No

Detailed information on browser version differences and known issues can be found here.

Further Learning

Frequently Asked Questions about the font-variation-settings

1. Why are my font-variation-settings not working?

The font-variation-settings CSS property is used to control variable font features. If it's not working, there could be several reasons:

  1. The font does not support variations: Not all fonts are variable fonts. The font you're trying to use might not have any variations to adjust. Make sure you're using a font that supports this feature.

  2. The feature tag is incorrect: If you're trying to use a specific feature, make sure you're using the correct OpenType feature tag. Different font variations are adjusted using different four-letter tags, such as 'wght' for weight or 'wdth' for width. The tag you're trying to use might be incorrect or unsupported by your font.

  3. The variation value is incorrect: Each variation tag supports different ranges of values. For example, 'wght' might support values from 100 to 900. Make sure the values you're using are within the supported range.

  4. Browser support issues: Not all browsers support the font-variation-settings property. Make sure you're using a browser that does, and keep in mind that some browsers might have partial or inconsistent support.

  5. Loading the font incorrectly: If you're loading the font from a file or a URL, there might be a problem with how you're loading it. Make sure the font file is accessible and that you're using the correct @font-face syntax to load it.

  6. Incorrect usage of CSS syntax: Ensure that you are correctly implementing the CSS syntax. For example, in CSS it should look like this:

.element {
  font-variation-settings: 'wght' 700;
}

To debug, you might want to inspect the element in your browser's developer tools and see if there are any errors or warnings related to the font-variation-settings property.

2. How do I use font-variation-settings in react?

The font-variation-settings property can be used in React similarly to how you'd use it in regular CSS. Here are a couple of ways:

Inline Styling: React allows for inline styles in the form of a JavaScript object. The keys are camelCased versions of the CSS property names, and the values are the same as you'd use in CSS.

<div style={{ fontVariationSettings: "'wght' 700" }}>Hello, world!</div>

In this case, we're using an inline style to set the font weight ('wght') variation to 700. Make sure the font you're using supports this variation.

Styled Components: If you're using a CSS-in-JS library like styled-components, you can use font-variation-settings in your styled component definitions.

import styled from 'styled-components';

const StyledDiv = styled.div`
  font-variation-settings: 'wght' 700;
`;

// In your component's render method...
<StyledDiv>Hello, world!</StyledDiv>

Again, we're setting the weight ('wght') variation to 700, and this will only work if your font supports this variation.

CSS Modules: If you're using CSS Modules, you can define your styles in a CSS file and import them into your React component. In your CSS file:

/* styles.module.css */
.fontVarWght700 {
  font-variation-settings: 'wght' 700;
}

And in your React component:

import styles from './styles.module.css';

// In your component's render method...
<div className={styles.fontVarWght700}>Hello, world!</div>

In all cases, remember that font-variation-settings may not be supported in all browsers or with all fonts. Make sure you're using a font that supports the variations you're trying to use and testing in browsers that support font-variation-settings.

3. What is the difference between font feature settings and font variation settings?

font-feature-settings controls typographic features in OpenType or TrueType fonts (e.g., ligatures or kerning):

body {
  font-feature-settings: "kern", "liga";
}

font-variation-settings controls characteristics of variable fonts (e.g., weight, width):

body {
  font-variation-settings: "wght" 700, "wdth" 200;
}

While both give low-level control over fonts, font-feature-settings focuses on typographic features, and font-variation-settings on variable font characteristics.

Additional Resources

font-variant

font-variant-position

W3C's Editor's Draft of CSS Fonts Module Level 4: font-variation-settings

Introduction to variable fonts on the web

Getting started with Variable fonts on the web video on YouTube