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'">Aut sunt necessitatibus ullam aperiam.</h3>
<h3 style="font-family: 'Segoe Pro Cond Italic'">Voluptatem earum blanditiis numquam illum minima.</h3>
<h3 style="font-family: 'Segoe Pro Italic'">Distinctio nihil iste possimus nulla illo nam.</h3>
<h3 style="font-family: 'Segoe Pro Light'">Ut in magni fugit. Culpa ipsam ex aperiam.</h3>
<h3 style="font-family: 'Segoe Pro Light Italic'">Consequatur quas corporis voluptates et.</h3>
<h3 style="font-family: 'Segoe Pro SemiLight'">Earum aliquid nihil blanditiis vitae et.</h3>
<h3 style="font-family: 'Segoe Pro SemiLight Italic'">Et deserunt dolorum vel ut est mollitia.</h3>
<h3 style="font-family: 'Segoe Pro Semibold'">Et voluptatem in cupiditate.</h3>
<h3 style="font-family: 'Segoe Pro Semibold Italic'">Similique dolorem fuga velit commodi.</h3>
<h3 style="font-family: 'Segoe Pro Bold'">Ut eum accusamus suscipit.</h3>
<h3 style="font-family: 'Segoe Pro Cond Bold'">Vero deserunt et beatae odit voluptates.</h3>
<h3 style="font-family: 'Segoe Pro Bold Italic'">Ipsam incidunt dolores est et.</h3>
<h3 style="font-family: 'Segoe Pro Cond Bold Italic'">Rerum officia enim vel non architecto sit.</h3>
<h3 style="font-family: 'Segoe Pro Black'">Quia eaque sunt nihil deserunt.</h3>
<h3 style="font-family: 'Segoe Pro Black Italic'">Nesciunt laudantium sed nisi.</h3>
<h3 style="font-family: 'Segoe Pro Display Regular'">Recusandae similique iure molestiae voluptates.</h3>
<h3 style="font-family: 'Segoe Pro Display Light'">Eius minima ea velit optio.</h3>
<h3 style="font-family: 'Segoe Pro Display SemiLight'">Iusto nisi quo nesciunt ea sed.</h3>
<h3 style="font-family: 'Segoe Pro Display Semibold'">Eligendi eaque vero nesciunt fuga ab.</h3>
<h3 style="font-family: 'Segoe Pro Display Bold'">Optio dignissimos ut vero porro tenetur.</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/