Segoe Pro Font Family

Use "Segoe Pro" font as a Webfont

You can create beautiful websites with great typography using the @font-face kit of Segoe Pro font. Webfont and @font-face supported all up-to-date browsers can use comfortably.

@font-face is very easy to use, click here to download Segoe Pro webfont kit. The following example will guide you to the css and html codes.

Ensuring the maximum cross browser typography support, WOFF (Web OpenFont Format) works with all up-to-date browsers. You can check the versions by clicking here.

Using this font on your website is your own legal responsibility. You can check the license information of the font.

@font-face kit

@font-face {
    font-family: 'Segoe Pro Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Regular'), url('SegoePro-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Segoe Pro Cond Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Cond Italic'), url('SegoePro-CondItalic.woff') format('woff');
}
@font-face {
    font-family: 'Segoe Pro Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Italic'), url('SegoePro-Italic.woff') format('woff');
}
@font-face {
    font-family: 'Segoe Pro Light';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Light'), url('SegoePro-Light.woff') format('woff');
}
@font-face {
    font-family: 'Segoe Pro Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Light Italic'), url('SegoePro-LightItalic.woff') format('woff');
}
@font-face {
    font-family: 'Segoe Pro SemiLight';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro SemiLight'), url('SegoePro-Semilight.woff') format('woff');
}
@font-face {
    font-family: 'Segoe Pro SemiLight Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro SemiLight Italic'), url('SegoePro-SemilightItalic.woff') format('woff');
}
@font-face {
    font-family: 'Segoe Pro Semibold';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Semibold'), url('SegoePro-Semibold.woff') format('woff');
}
@font-face {
    font-family: 'Segoe Pro Semibold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Semibold Italic'), url('SegoePro-SemiboldItalic.woff') format('woff');
}
@font-face {
    font-family: 'Segoe Pro Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Bold'), url('SegoePro-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Segoe Pro Cond Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Cond Bold'), url('SegoePro-CondBold.woff') format('woff');
}
@font-face {
    font-family: 'Segoe Pro Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Bold Italic'), url('SegoePro-BoldItalic.woff') format('woff');
}
@font-face {
    font-family: 'Segoe Pro Cond Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Cond Bold Italic'), url('SegoePro-CondBoldItalic.woff') format('woff');
}
@font-face {
    font-family: 'Segoe Pro Black';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Black'), url('SegoePro-Black.woff') format('woff');
}
@font-face {
    font-family: 'Segoe Pro Black Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Black Italic'), url('SegoePro-BlackItalic.woff') format('woff');
}
@font-face {
    font-family: 'Segoe Pro Display Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Display Regular'), url('SegoeProDisplay-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Segoe Pro Display Light';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Display Light'), url('SegoeProDisplay-Light.woff') format('woff');
}
@font-face {
    font-family: 'Segoe Pro Display SemiLight';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Display SemiLight'), url('SegoeProDisplay-Semilight.woff') format('woff');
}
@font-face {
    font-family: 'Segoe Pro Display Semibold';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Display Semibold'), url('SegoeProDisplay-Semibold.woff') format('woff');
}
@font-face {
    font-family: 'Segoe Pro Display Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Pro Display Bold'), url('SegoeProDisplay-Bold.woff') format('woff');
}

sample html

<h3 style="font-family: 'Segoe Pro Regular'">Qui non architecto consequatur dolorem.</h3>
<h3 style="font-family: 'Segoe Pro Cond Italic'">Officiis ut labore dolorem perferendis.</h3>
<h3 style="font-family: 'Segoe Pro Italic'">Officiis quos aspernatur minima soluta in.</h3>
<h3 style="font-family: 'Segoe Pro Light'">Et placeat earum at officia.</h3>
<h3 style="font-family: 'Segoe Pro Light Italic'">Nemo minima saepe magni expedita ut eum.</h3>
<h3 style="font-family: 'Segoe Pro SemiLight'">Eius ut ut nesciunt eum ut ab nobis.</h3>
<h3 style="font-family: 'Segoe Pro SemiLight Italic'">Praesentium veritatis non mollitia qui.</h3>
<h3 style="font-family: 'Segoe Pro Semibold'">Et quae dicta recusandae quia qui sit.</h3>
<h3 style="font-family: 'Segoe Pro Semibold Italic'">Placeat omnis quibusdam possimus.</h3>
<h3 style="font-family: 'Segoe Pro Bold'">Et atque debitis illum repellendus aut.</h3>
<h3 style="font-family: 'Segoe Pro Cond Bold'">Officia tenetur fuga sunt nesciunt aut hic porro.</h3>
<h3 style="font-family: 'Segoe Pro Bold Italic'">Maxime sed minima nihil doloribus soluta et.</h3>
<h3 style="font-family: 'Segoe Pro Cond Bold Italic'">Cumque ut repellat sed eos sit voluptate.</h3>
<h3 style="font-family: 'Segoe Pro Black'">Sit quod ipsam fugit quia error harum soluta.</h3>
<h3 style="font-family: 'Segoe Pro Black Italic'">Pariatur rerum exercitationem ipsa facilis.</h3>
<h3 style="font-family: 'Segoe Pro Display Regular'">Quisquam optio quo tempora et.</h3>
<h3 style="font-family: 'Segoe Pro Display Light'">Suscipit dolorem ea id ut et quae ab.</h3>
<h3 style="font-family: 'Segoe Pro Display SemiLight'">Vero eos animi ipsum.</h3>
<h3 style="font-family: 'Segoe Pro Display Semibold'">Nihil voluptas a rerum distinctio animi sed.</h3>
<h3 style="font-family: 'Segoe Pro Display Bold'">Quidem in doloribus vel nostrum.</h3>

Preview

License

You may use this font as permitted by the EULA for the product in which this font is included to display and print content. You may only (i) embed this font in content as permitted by the embedding restrictions included in this font; and (ii) temporarily download this font to a printer or other output device to help print content.

Segoe is a trademark of the Microsoft group of companies

© 2012 Microsoft Corporation. All Rights Reserved.

http://www.microsoft.com/typography/fonts/