Segoe UI Web Fonts

gistfile1.txt

@font-face {
    font-family: SegoeUI;
    src:
        local("Segoe UI Light"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format("woff2"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format("woff"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf) format("truetype");
    font-weight: 100;
}

@font-face {
    font-family: SegoeUI;
    src:
        local("Segoe UI Semilight"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format("woff2"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format("woff"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf) format("truetype");
    font-weight: 200;
}

@font-face {
    font-family: SegoeUI;
    src:
        local("Segoe UI"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format("woff2"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format("woff"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format("truetype");
    font-weight: 400;
}

@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: 600;
}

@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: 700;
}

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-react\dist\sass. 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-react\dist\css\fabric.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.

Thanks! So useful!
It is like... I never founded an CDN for the font, and now, Tana!
Cool!
Realy thanks for that.

I'm not sure how to generate the dist folder in the giant Fluent UI monorepo, but I did find this storybook HTML file. It includes all of the Segoe web fonts weights, similar to the gist above. Seems to work well on both iOS and Android devices. (I copied the code between the <style> tags into a separate .css file.)

Very nice! :) 🥇