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'">Recusandae eos ut sed earum.</h3>
<h3 style="font-family: 'Segoe Pro Cond Italic'">Sit minus velit est neque sit voluptate nihil.</h3>
<h3 style="font-family: 'Segoe Pro Italic'">Autem velit hic iste eum ullam aut.</h3>
<h3 style="font-family: 'Segoe Pro Light'">Alias assumenda iste at temporibus.</h3>
<h3 style="font-family: 'Segoe Pro Light Italic'">Consectetur impedit tempore aliquam et error.</h3>
<h3 style="font-family: 'Segoe Pro SemiLight'">Repudiandae commodi asperiores eum amet.</h3>
<h3 style="font-family: 'Segoe Pro SemiLight Italic'">Voluptas est velit minus ullam quis quia.</h3>
<h3 style="font-family: 'Segoe Pro Semibold'">Iusto aspernatur harum tempora assumenda.</h3>
<h3 style="font-family: 'Segoe Pro Semibold Italic'">Est cupiditate reprehenderit optio numquam.</h3>
<h3 style="font-family: 'Segoe Pro Bold'">Ut assumenda rerum eos qui et et.</h3>
<h3 style="font-family: 'Segoe Pro Cond Bold'">Voluptatum adipisci labore deserunt odio et.</h3>
<h3 style="font-family: 'Segoe Pro Bold Italic'">Et non laudantium inventore voluptas odio aut.</h3>
<h3 style="font-family: 'Segoe Pro Cond Bold Italic'">Qui et et quo iure autem dolorem.</h3>
<h3 style="font-family: 'Segoe Pro Black'">Blanditiis a sed impedit perferendis.</h3>
<h3 style="font-family: 'Segoe Pro Black Italic'">Minus nisi officia aut quod sed aut.</h3>
<h3 style="font-family: 'Segoe Pro Display Regular'">Neque quam quos nostrum doloribus eum aperiam.</h3>
<h3 style="font-family: 'Segoe Pro Display Light'">Beatae omnis fugit similique saepe ducimus.</h3>
<h3 style="font-family: 'Segoe Pro Display SemiLight'">Sit non neque dicta eveniet.</h3>
<h3 style="font-family: 'Segoe Pro Display Semibold'">Voluptatem aut dolor officia sed.</h3>
<h3 style="font-family: 'Segoe Pro Display Bold'">Voluptas provident vel ad et.</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/