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'">Quidem non quia consequatur et ea cumque eveniet.</h3>
<h3 style="font-family: 'Segoe Pro Cond Italic'">Similique dicta atque non.</h3>
<h3 style="font-family: 'Segoe Pro Italic'">Optio est dicta expedita sit necessitatibus iure.</h3>
<h3 style="font-family: 'Segoe Pro Light'">Ullam voluptatum neque id deserunt quisquam eius.</h3>
<h3 style="font-family: 'Segoe Pro Light Italic'">Iusto et iusto voluptate nostrum quia quo id.</h3>
<h3 style="font-family: 'Segoe Pro SemiLight'">Et maiores rem quo quos.</h3>
<h3 style="font-family: 'Segoe Pro SemiLight Italic'">Dignissimos officiis voluptate facilis sunt.</h3>
<h3 style="font-family: 'Segoe Pro Semibold'">Unde earum quisquam voluptate fuga eum iure quae.</h3>
<h3 style="font-family: 'Segoe Pro Semibold Italic'">Aut repudiandae laudantium sequi cumque harum.</h3>
<h3 style="font-family: 'Segoe Pro Bold'">Consequatur corporis ut quia.</h3>
<h3 style="font-family: 'Segoe Pro Cond Bold'">Dolorum animi dolorem fuga autem.</h3>
<h3 style="font-family: 'Segoe Pro Bold Italic'">Non consequatur beatae officia voluptatem.</h3>
<h3 style="font-family: 'Segoe Pro Cond Bold Italic'">Quis maiores qui aut doloremque nihil.</h3>
<h3 style="font-family: 'Segoe Pro Black'">Quidem et ullam est quidem sunt et.</h3>
<h3 style="font-family: 'Segoe Pro Black Italic'">Quibusdam rerum qui minima id velit minima ea.</h3>
<h3 style="font-family: 'Segoe Pro Display Regular'">Dolore et sapiente qui nesciunt.</h3>
<h3 style="font-family: 'Segoe Pro Display Light'">Ipsam modi placeat quia est iure nisi.</h3>
<h3 style="font-family: 'Segoe Pro Display SemiLight'">Et ut nihil quis reprehenderit.</h3>
<h3 style="font-family: 'Segoe Pro Display Semibold'">Fugit tenetur saepe iusto magni doloremque totam.</h3>
<h3 style="font-family: 'Segoe Pro Display Bold'">Eos culpa minima et inventore.</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/