22

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> 
7
  • FWIW, "Segoe UI Bold" is the name listed in my Windows fonts directory.
    – Tim M.
    Commented Nov 1, 2012 at 23:32
  • And it works on my machine in Chrome, FF, and IE9: jsfiddle.net/kxHQR. Note that you will need to use custom fonts with the old IE syntax for IE8 and lower.
    – Tim M.
    Commented Nov 1, 2012 at 23:34
  • 1
    It should be working fine: jsfiddle.net/UcTGP Could it be that you are missing a font file? What system or browser are you on? Commented Nov 1, 2012 at 23:49
  • Test with <b style="font-family: Segoe UI">Sample</b> on your system (without any @font-face), or try using Segoe UI Bold in a word processor. It sounds like the font might be missing or corrupted in your system. There might be something odd with that font, since on my system, font-family: Segoe UI Bold does not produce it (but this old method works for Semibold and Light), and my font listing tool (for IE) cs.tut.fi/~jkorpela/listfonts1.html does not list Segoe UI Bold. Commented Nov 2, 2012 at 7:20
  • 1
    Just found out the same thing. There are bugs posted: issue 139857, issue 124504 Commented Nov 2, 2012 at 14:04

3 Answers 3

34

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.

6
  • 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?
    – Mr Jedi
    Commented Sep 9, 2014 at 19:47
  • 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.
    – pilau
    Commented Sep 9, 2014 at 20:22
  • 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
    – nitech
    Commented Oct 3, 2014 at 10:45
  • @nitech Have you tried serving the fonts off your server?
    – pilau
    Commented Oct 3, 2014 at 16:18
  • @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.
    – nitech
    Commented Oct 7, 2014 at 6:21
10

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.

6
  • 2
    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.
    – Ray
    Commented Nov 2, 2012 at 14:22
  • @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. Commented Dec 28, 2012 at 11:12
  • K.Korpela: You're right, I cannot reproduce it myself anymore. The last time I saw that I was using Firefox 15 I think.
    – Ray
    Commented Dec 28, 2012 at 13:38
  • font-family: Segoe UI Light is not working for me on Firefox 16-18 on Windows 7 and FF18 on Windows 8.
    – pilau
    Commented Feb 10, 2013 at 17:40
  • @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?) Commented Feb 10, 2013 at 18:44
7
@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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.