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\" fam

Answer 1

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');
}