Overcome variable fonts limitation in SharePoint Brand Center

When it comes to font files on the web, a new star has already landed on all major browsers. Those type fonts are named variable fonts, and there are some limitations on how the Brand Center handles those.

What are variable fonts?

Instead of having multiple files for each font weight (100-900, ranging from hairline to ultra) and font style (normal, italic), a variable font consists of a single file that handles all variations.

The benefits are clear: fewer HTTP requests, faster loading, and a more versatile use case, including improved rendering on the user interface.

This new kind of font was introduced as part of the OpenType 1.8 specification, a collaboration among Microsoft, Google, Apple, and Adobe, in 2016.

Since at least 2018, all major browsers have supported variable fonts.

Additional use cases and benefits are:

• Web performance: Reduces font file size and HTTP requests.
• Design flexibility: Enables precise control over typography.
• Accessibility: Allows better adaptation to user needs (e.g., adjusting weight for readability).
• Animation: Smooth transitions between styles for interactive design.

Variable fonts are part of the current and the future of web development.

The website https://v-fonts.com/ provides a comprehensive overview of available fonts, including free and commercial options, and allows you to experiment with them.

Windows 11’s default font is not Segoe UI. It comes with Segoe UI Variable from day one, a variable version of the same font.

SharePoint Brand Center and variable fonts

When you upload a variable font into the Brand Center, it attempts to detect the features of that variable font. Instead of detecting all possible features, it is reduced to font weight and font styles.

In the case of Segoe UI Variable, it fails to detect the correct features, as it does not provide backward compatibility for integrating the font.

I uploaded Segoe UI Variable into SharePoint’s Brand Center, and for some reason, it couldn’t detect the font family or the font face. I couldn’t figure out if Brand Center supports the OpenType 1.8 specification for font detection, or if it was just a glitch in the font.

Another font, such as Sono downloaded from the Google Font Directory could be detected correctly.

How to use variable fonts?

Like I showed in my blog post on how to load fonts from the CDN, you will be able to upload those fonts to SharePoint and the CDN, and to use the font, the @font-face loading looks a bit different.

@font-face {
  font-family: "Segoe UI Variable";
  src: local("Segoe UI Variable"),
       url(${this._fontBaseUrlCdn + '/' + VariableFontsWebPart.FONTFILENAME}),
       url(${this._fontBaseUrl + '/' + VariableFontsWebPart.FONTFILENAME});
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  font-optical-sizing: auto;
}

@font-face {
  font-family: "Segoe UI Variable";
  src: local("Segoe UI Variable"),
       url(${this._fontBaseUrlCdn + '/' + VariableFontsWebPart.FONTFILENAME}),
       url(${this._fontBaseUrl + '/' + VariableFontsWebPart.FONTFILENAME});
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  font-optical-sizing: auto;
}

In this definition, several key differences are notable. local means that if you are on Windows 11, you don’t need to download the font at all. Instead, you can use the locally installed version of ‘Segoe UI Variable’.

In this case, the browser won’t download the font at all; instead, it uses the local version you have installed on your computer.

The font-weight option does not define ‘normal’, ‘bold’, or ‘semi-bold’. It uses a range of 300 to 700 instead. This is particularly important for variable fonts, as you can scale the x-axis weight seamlessly.

Font-weight with a value of 375 will be rendered as exactly a font width of 375. Not 300, not 400, exactly the value you or the designer choose. In the case of responsive typography and accessibility, it gives you fine-grained control over your font.

The second @font-face definition only changes the font style from normal to italic, which, as I mentioned before, is also present in the same file.

Using the font

Now that the font is correctly loaded, either locally or via the CDN, we can use it in a custom web part.

.fontDisplay {
  font-family: "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Variable font axes - use separate properties for better browser support */
  font-weight: 300;
  font-optical-sizing: auto;

  /* Manual optical sizing via variation settings if font supports it (5-36pt range) */
  font-variation-settings: "wght" 300,
    "opsz" 5;

  /* OpenType features - comprehensive set */
  font-feature-settings: "ccmp" 1,
      /* Composite Character Composition */
      "kern" 1,
      /* Kerning */
      "liga" 1,
      /* Standard Ligatures */
      "clig" 1,
      /* Contextual Ligatures */
      "dlig" 0,
      /* Discretionary Ligatures */
      "frac" 0,
      /* Fractions */
      "tnum" 0,
      /* Tabular Numbers */
      "onum" 0,
      /* Old Style Numbers */
      "case" 0,
      /* Case-Sensitive Forms */
      "ss01" 0;

  line-height: 1.2;
}

Font family, font weight, and font optical sizing are relatively straightforward and well-known properties. There is nothing special here.

It gets more interesting when it comes to the font-variation-settings, which allow you to turn features on and off in the font.

If you’d like to dig deeper into the complete documentation, Adobe has a comprehensive guide to OpenType features in CSS.

With these fine-grained controls, you can control how a font renders to create even more precise and optimised experiences in your SharePoint.

Conclusion

If your corporate branding already uses variable fonts, use the theme in SharePoint Brand Center. As mentioned, a custom variable font downloaded from the Google Font Directory can be detected correctly and can be used directly from the brand center.

No matter what I tried, I was not able to work with ‘Segoe UI Variable’ directly. I had to request the font again from the CDN and create a custom definition for it.

For testing, I even created a custom web part that allows me to toggle the features of the custom font on and off dynamically.

Variable fonts are not a future innovation, as they have been fully supported for some time now. Likely, many designers and developers are not yet familiar with these concepts.

SharePoint in the future could utilize the same typographic layout as defined for Windows.

Final word of caution. During my testing, I was not able to remove the font from SharePoint. I wanted to delete some of the font variants, since they were not working at all.

Here are some resources for designers and developers

• Getting started with Variable fonts on the web – Kevin Powell
• Windows 11 Typography – Microsoft
• CSS Fonts Fallbacks, Variables and Trimming – Syntax pod cast
• v-fonts – Font directory for variable fonts
• Font Drop – Allows you to check the capabilities of a font