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

Question

I have some web applications that follow metro style of the Microsoft (ie.: new outlook). But I'm having troubles with the fonts that I used. The default font is "Segoe" family, when an user enter in the application in a system that have the desktop font Segoe UI, everything is alright. But in some cases users are using Mac or Ubuntu that don't come with the "Segoe UI" and the navigator uses the secundary font (in my case, Tahoma).

In the new Outlook don't matter what OS you are using, it always uses Segoe UI family (I think that they are using web fonts)

Some people spoke to me use web fonts, but I didn't find in nowhere (I searched in alot of web fonts sites) web fonts of Segoe family.

Does someone have any idea how I solve this situation?

Solution 1

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/

Solution 2

Use CSS to specify a location where the font can be downloaded if it is not available in the OS. Add this to the start of your CSS file:

@font-face {
    font-family: Segoe;
    src: url('/fonts/segoe.ttf');
}

The ttf format works for most browsers. For IE, add the location of an eot version to your conditional IE stylesheet:

@font-face {
    font-family: Segoe;
    src: url('/fonts/segoe.eot');
}

Comments

[cimmanon]

Isn't that the point of having a secondary font? To define a font when the primary font isn't available? Why are you surprised that's happening?

[Renan Cunha]

Because is a requirement use always Segoe UI, following the metro style guide, like the new Outlook, TFS 2012 etc...

[robertc]

Note that you need to buy a license to use Segoe UI as a web font.

[bumerang]

Yes, but this is something depending on font license, I just wanted to show how to solve the web font set problem. BTW fontsquirrel.com allow You to use many free fonts.