Dallasblog700

Thanks for that! Do you know how we can get all available subsets? In your example only the west-european subset is available.

Yeah, there is a better way to do this now. If you install the office-ui-fabrict-react npm package, they have font styles in a dist folder. It's better to import the sass file you specifically want from the following folder: office-ui-fabric-reactdistsass. Check out all the files with Font in the title.

As it happens, all my projects use all of the office-ui-fabrict-react styles, so we often import the entire CSS bundle from office-ui-fabric-reactdistcssfabric.min.css.

The font weights are mixed up on semibol and bold... should be...

@font-face {
font-family: SegoeUI;
src:
local('Segoe UI Semibold'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2) format('woff2'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff) format('woff'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf) format('truetype');
font-weight: 600;
}
@font-face {
font-family: SegoeUI;
src:
local('Segoe UI Bold'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2) format('woff2'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff) format('woff'),
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf) format('truetype');
font-weight: 700;
}

Yeah, at some point I think the font weights changed long back. Either way, I don't recommend using this Gist to get the proper fonts for apps that follow Microsoft design systems. Better method is to reference the font stylesheets in the Microsoft Fabric (now called Fluent) npm packages, as these will be kept up to date and are versioned.