Segoe Ui' Font with Font-Face & Local

Segoe UI' font with font-face & local

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.

Segoe UI font in Internet explorer

Try this code instead of your code:

 body {
    margin:0px auto;
    padding: 0 0 0px 0;
    background-color:#eee;
    font-family:'Segoe UI' !important;
    font-weight: lighter;
    font-size:11px;
    color:#333;
    overflow-y: scroll;
 }

@font-face {
  font-family: 'Segoe UI';
  src: url('fonts/SEGOEUI.eot'); /* IE9 Compat Modes */
  src: url('fonts/SEGOEUI.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/SEGOEUI.woff') format('woff'), /* Modern Browsers */
       url('fonts/SEGOEUI.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/SEGOEUI.svg#svgFontName') format('svg'); /* Legacy iOS */
  }

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.

antd.customize.less trouble with font-family (help please)

It seems you added an additional : after @font-face. You should use it like this:

 @font-face { 
   font-family: 'font-name';
    src: url('url');
    ...
  }

---

Related Topics