How to Render Segoe UI Font in Different Navigators and Os's

How to render Segoe UI font in different navigators and OS's

First of all there are difrent types of fonts for every browser. To make sure that it will work in every browser You need to put at least 3 types: eot, ttf, woff (and svg). The best way to get those is to use one of the links: http://www.fontsquirrel.com/fontface/generator, http://fontface.codeandmore.com/

It's very simple and You will get a set of ready to use fonts. After downloading Your set You will find the example file where You will see how to use Your new fonts.

In Your case it can be like:

@font-face {
    font-family: 'Segoe';
    src: url('/font_path/Segoe.eot');
    src: url('/font_path/Segoe.eot?#iefix') format('embedded-opentype'),
         url('/font_path/Segoe.woff') format('woff'),
         url('/font_path/Segoe.ttf') format('truetype'),
         url('/font_path/Segoe.svg#Segoe') format('svg');
    font-weight: normal;
    font-style: normal;
}

/font_path/ is the relative path to your fonts according to this css file. Usually it's ../fonts/.

Why You need all those?

ttf, otf - for: FireFox, Chrome < 6, Safari and Opera

oet - for: Internet Explorer < 9

svg - for: Safari Mobile (iPhone, iPad for iOS < 4.2), Android browser

woff - for: Internet Explorer >= 9, FireFox >= 3.6, Chrome >= 6

Segoe.eot - and others are links (relative in this case) to those font files.

EDIT

Because fontsquirrel.com don't render some fonts, andfontface.codeandmore.com have changed to commercial sometimes You will have to google for some other online font generator.

EDIT

If fontsquirrel.com won't help You try to use: http://www.font2web.com/

Segoe UI Font in non windows systems

You can't license Segoe UI from Microsoft without direct contact, you can license the mono font from Ascender Corp who are linked to from Microsoft webpage for Segoe UI, however it is not the same as Segoe UI.

I would suggest Open Sans as an alternative to the Segoe UI font, it is quite similar and has much more open licensing for using as webfont (that link is actually to Google's hosted version of the font) - So you could have Segoe as the main font then fall back to Open Sans on non Windows 7+ Systems.

Segoe UI license needed?

The official answer is,

Please fill out the form below to contact Monotype Imaging regarding our various font license extensions for multiple workstations, servers or enterprise-wide applications. We will respond promptly to all inquiries. Thank you.

They do mention the usage on web server explicitly, so I'd ask first and took it from there.

Update: That is, regardless of the answer you can get here, they are the copyright holders, and even if you have a trick to get around them, it's safer and easier to ask.

Segoe UI Semilight in CSS not working on Chrome

Beside the fact that your font will only be displayed on Windows Devices correctly while it will be ignored on all others that don't have the font installed you need to make sure you have a matching fallback in place.

The second thing is that your font definition is wrong and doesn't work cross browser. While Internet Explorer is able to use directly the correct font file, specified by src: local("Segoe UI Semibold"); all other browser need to refer to the font family. src: local("Segoe UI");.

In case of semibold you need to specify the font definition like this:

@font-face {
    font-family: "Segoe UI";
    font-weight: 300;
    src: local("Segoe UI Semilight"), local("Segoe UI");
}

Once you fixed your font definition it should look like the following screenshot shows. In those Screenshots you also see that if the font-family is specified with the full name instead of the font family name the font will fallback to Times New Roman. This happens because the browser cannot resolve the font name, which seems to be exclusive for IE.

Not sure if it is because I use the local font and if the available web font have been fixed you need to make additional adjustments to look the font good. It might be the case that the web fonts has special hinted for web use.

Chrome OS (incognito) and Linux Chrome webfont display issues

A couple of things look wrong:

1. Your injected styles are surrounded by <noscript> tags, so your fonts will only be loaded when JavaScript is disabled
2. Your @font-face rule should map your custom font to just one family. So font-family: "SEGOEUIL"; instead of font-family: "SEGOEUIL", "Helvetica Neue", Arial, sans-serif;
3. The first rule tries to use a locally installed version of SEGOEUIL, the other always load from githubusercontent.com. So the appearance of the font might change if the user has installed a different version.
4. To avoid unexpected results, set font-weight and font-style for all three declarations.

Changing this fixes the page in Chrome.

---

Related Topics