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'">Adipisci velit autem ut necessitatibus.</h3>
<h3 style="font-family: 'Segoe Pro Cond Italic'">Rerum et qui nulla voluptatem sunt.</h3>
<h3 style="font-family: 'Segoe Pro Italic'">Voluptas ut qui corrupti dolorum iure est ab.</h3>
<h3 style="font-family: 'Segoe Pro Light'">Qui quam laborum facere accusamus quam.</h3>
<h3 style="font-family: 'Segoe Pro Light Italic'">Atque odio porro ut eum fuga.</h3>
<h3 style="font-family: 'Segoe Pro SemiLight'">Quasi porro quis est quia optio architecto.</h3>
<h3 style="font-family: 'Segoe Pro SemiLight Italic'">Quae in qui sint voluptates dolor ut odit.</h3>
<h3 style="font-family: 'Segoe Pro Semibold'">Id qui est qui placeat omnis pariatur blanditiis.</h3>
<h3 style="font-family: 'Segoe Pro Semibold Italic'">Numquam aut saepe dolores suscipit beatae.</h3>
<h3 style="font-family: 'Segoe Pro Bold'">Enim labore quaerat est est.</h3>
<h3 style="font-family: 'Segoe Pro Cond Bold'">Assumenda a placeat officiis.</h3>
<h3 style="font-family: 'Segoe Pro Bold Italic'">Exercitationem quaerat autem est facilis natus.</h3>
<h3 style="font-family: 'Segoe Pro Cond Bold Italic'">Omnis delectus aperiam architecto ut maxime.</h3>
<h3 style="font-family: 'Segoe Pro Black'">Ut at itaque ut et harum dicta consequatur.</h3>
<h3 style="font-family: 'Segoe Pro Black Italic'">Maxime qui nam aliquid nisi.</h3>
<h3 style="font-family: 'Segoe Pro Display Regular'">Quia illo et sunt illum aut asperiores.</h3>
<h3 style="font-family: 'Segoe Pro Display Light'">Odio sed voluptas aliquam eligendi provident quo.</h3>
<h3 style="font-family: 'Segoe Pro Display SemiLight'">Consequatur aut et et quidem unde ut.</h3>
<h3 style="font-family: 'Segoe Pro Display Semibold'">A non repellendus exercitationem non quis.</h3>
<h3 style="font-family: 'Segoe Pro Display Bold'">Voluptatibus et mollitia odio nam rerum aliquid.</h3>

Preview

License