'Segoe UI' font with font-face & local

Question

I want to use the "Segoe UI" font in a website if it is installed in the user's computer.

I have declared all the styles with @font-face in order to use the font-weight property to change the thickness of the font (it's a really cool feature!).

The problem is that I cannot do it work with Segoe UI Bold (I think the name is wrong). Any idea?

Here an example. (4) and (5) would be the same: http://jsfiddle.net/kxHQR/1/

---

@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 700;
  src: local('Segoe UI Bold'), local('SegoeUI-bold'), local('segoeuib');
}
@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 600;
  src: local('Segoe UI Semibold'), local('SegoeUI-Semibold');
}
@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 400;
  src: local('Segoe UI'), local('SegoeUI');
}
@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 300;
  src: local('Segoe UI Light'), local('SegoeUI-Light');
}

/* ... */

BODY {
 font-family: 'Myname';    
}

.boldtext {
    font-family:'Segoe UI';
    font-weight:700;
}

<p style='font-weight:300'>1. Text with font-weight:300. OK</h1>
<p>2. Here is normal text. OK</p>
<p style='font-weight:600'>3. Text with font-weight:600.  OK</p> 
<p style='font-weight:700' >4. Text with font-weight:700. It must be like (5), but it is like (3). :(</p>
<p class='boldtext'>5. Text with font-family:'Segoe UI' (no font-face) and font-weight:700; </p> 

Solution 1

This is from Microsoft's own stylesheet for Windows 8 (Metro) apps:

/*
Explicitly define a Segoe UI font-family so that we can assign Segoe UI 
Semilight to an appropriate font-weight.
*/
@font-face {
    font-family: "Segoe UI";
    font-weight: 200;
    src: local("Segoe UI Light");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 300;
    src: local("Segoe UI Semilight");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 400;
    src: local("Segoe UI");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 600;
    src: local("Segoe UI Semibold");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 700;
    src: local("Segoe UI Bold");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 400;
    src: local("Segoe UI Italic");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 700;
    src: local("Segoe UI Bold Italic");
}

The above approach works for me and is also the approach used by Open Sans and Google fonts. However, it is the exact opposite of this approach, originally from Paul Irish:

@font-face {
    font-family: 'ChunkFiveRegular;
    src: url('whatever source');
    font-weight: normal;
    font-style: normal;
}

Paul Irish's approach allows (read: requires) setting weights and italics later in the CSS, but the result is "faux": Since the browser doesn't have all the fonts in the family, it has to calculate the weight and shape of the characters on its own to make up for that. The single, and limited strength in Paul's approach is that it might reset the font across all browsers - but it does depend on the font in use - because all browsers render fonts differently!

I like Microsoft's approach better, because it allows to specify the font-styles and font-weights you need, and the browser will display the correct font file, instead of computing faux sizes, bold and italics. However, it does require you to provide a font file for every font variation in the family you'll be using.

In the end it all comes down to what font you'll be using and how you use it (different weights, italics, etc). Regardless of what approach you go for, I recommend out of my own experience (and Paul recommends too) to use FontSquirrel's font-face generator for all your web typography endeavors. FontSquirrel can significantly reduce font sizes, by leaving out unnecessary character sets, compressing the fonts, and so on.

Solution 2

Although the basic approach is logical, browsers seem to have difficulties with it, apparently caused by their different processing of font data. It seems that the following is the most effective way of using different weights of Segoe UI:

1. for light, use font-family: Segoe UI Light
2. for regular, use just font-family: Segoe UI
3. for semibold, use use font-family: Segoe UI Semibold
4. for bold, use font-family: Segoe UI; font-weight: bold

This is messy and illogical, but it works on Firefox, Chrome, IE, Opera, Safari (tested on Win 7).

On web pages, it is probably better to try and find a suitable free font with different weights and use it via @font-face. After all, Segoe UI is far from universal, and there is no simple way to set up suitable fallbacks for it.

Solution 3

@font-face {
    font-family: 'Segoe UI';
    src: url('./ui/segoeui.eot');
    src: local("Segoe UI"),
         local("Segoe"),
         local("Segoe WP"),
         url('./ui/segoeui.eot?#iefix') format('embedded-opentype'),
         url('./ui/segoeui.woff') format('woff'),
         url('./ui/segoeui.svg#SegoeUI') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Semibold';
    src: url('/semibold/seguisb.eot');
    src: local("Segoe Semibold"),
         local("Segoe WP Semibold"), 
         url('/semibold/seguisb.eot?#iefix') format('embedded-opentype'),
         url('/semibold/seguisb.woff') format('woff'),
         url('/semibold/seguisb.svg#SegoeUISemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Bold';
    src: url('/bold/segoeuib.eot');
    src: local("Segoe Bold"),
         local("Segoe WP Bold"),
         url('/bold/segoeuib.eot?#iefix') format('eot'), /* Wrong format will tell IE9+ to ignore and use WOFF instead. MSHAR-2822 */
         url('/bold/segoeuib.woff') format('woff'),
         url('/bold/segoeuib.svg#SegoeUIBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Light';
    src: url('/light/segoeuil.eot');
    src: local("Segoe UI Light"),
         local("Segoe WP Light"),
         url('/light/segoeuil.eot?#iefix') format('embedded-opentype'),
         url('/light/segoeuil.woff') format('woff'),
         url('/light/segoeuil.svg#SegoeUILight') format('svg');
    font-weight: normal;
    font-style: normal;
}

Download:

https://github.com/KingRider/frontcom/tree/master/css/fonts

Comments

[Syroot]

I have also noticed that Firefox does not use the Light style of Segoe UI if hardware rendering is off (gfx.direct2d.disabled;true) - it uses the default Segoe UI (normal weight) style then. If hardware rendering is on, it works.

[Jukka K. Korpela]

@PacMani, your observation is not reproducible in Firefox 17 (Win 7): changing that setting and restarting browser does not affect the behavior, font-family: Segoe UI Light still works.

[Syroot]

K.Korpela: You're right, I cannot reproduce it myself anymore. The last time I saw that I was using Firefox 15 I think.

[pilau]

font-family: Segoe UI Light is not working for me on Firefox 16-18 on Windows 7 and FF18 on Windows 8.

[Jukka K. Korpela]

@pilau, I just re-tested on Firefox 18.0.2 on Windows 7, and I get Segoe UI Light. Have you checked whether Segoe UI Light might be missing or damaged in your computer? (E.g., does it work in a word processor, or in other web browsers?)

[pilau]

@JukkaK.Korpela this is working for me: font-family: Segoe UI; font-weight: lighter; on two different computers (Win7&8), both FF18. font-weight: 200; also works FWIW.

[Mr Jedi]

What means "src: local("Segoe UI Italic");" ? Where is font file? It will work only on computers with windows? Can I load tff gile by myself?

[pilau]

Yes. These are just the names of the types in this font family - and these will only be loaded from computers which have them installed. To serve them off your website you will have to add the url() values to each font and have them on your server. This snippet was used to illustrate the method of telling the browsers which font files to display for which font-weight and font-style properties.

[nitech]

I can't seem to get this one to work in Chrome 37. Works in IE11 though. Chrome 37 only outputs regular, untill you reach font-weight:700

[pilau]

@nitech Have you tried serving the fonts off your server?

[nitech]

@pilau Nope. I didn't even try, as I read there were licensing issues when using the font as a web font. Since the font is installed on the intended destination computers of my system, there would be no need.

[pilau]

@nitech I am also observing the same problem in Chrome. Perhaps it is due to their new font rendering component.