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>
<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.