font-variation-settings

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.

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.

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.