Spectral Font Family

Use "Spectral" font as a Webfont

You can create beautiful websites with great typography using the @font-face kit of Spectral 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 Spectral 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: 'Spectral Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Spectral Regular'), url('Spectral-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Spectral Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Spectral Italic'), url('Spectral-Italic.woff') format('woff');
}
@font-face {
    font-family: 'Spectral ExtraLight';
    font-style: normal;
    font-weight: normal;
    src: local('Spectral ExtraLight'), url('Spectral-ExtraLight.woff') format('woff');
}
@font-face {
    font-family: 'Spectral ExtraLight Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Spectral ExtraLight Italic'), url('Spectral-ExtraLightItalic.woff') format('woff');
}
@font-face {
    font-family: 'Spectral Light';
    font-style: normal;
    font-weight: normal;
    src: local('Spectral Light'), url('Spectral-Light.woff') format('woff');
}
@font-face {
    font-family: 'Spectral Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Spectral Light Italic'), url('Spectral-LightItalic.woff') format('woff');
}
@font-face {
    font-family: 'Spectral Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Spectral Medium'), url('Spectral-Medium.woff') format('woff');
}
@font-face {
    font-family: 'Spectral Medium Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Spectral Medium Italic'), url('Spectral-MediumItalic.woff') format('woff');
}
@font-face {
    font-family: 'Spectral SemiBold';
    font-style: normal;
    font-weight: normal;
    src: local('Spectral SemiBold'), url('Spectral-SemiBold.woff') format('woff');
}
@font-face {
    font-family: 'Spectral SemiBold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Spectral SemiBold Italic'), url('Spectral-SemiBoldItalic.woff') format('woff');
}
@font-face {
    font-family: 'Spectral Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Spectral Bold'), url('Spectral-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Spectral Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Spectral Bold Italic'), url('Spectral-BoldItalic.woff') format('woff');
}
@font-face {
    font-family: 'Spectral ExtraBold';
    font-style: normal;
    font-weight: normal;
    src: local('Spectral ExtraBold'), url('Spectral-ExtraBold.woff') format('woff');
}
@font-face {
    font-family: 'Spectral ExtraBold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Spectral ExtraBold Italic'), url('Spectral-ExtraBoldItalic.woff') format('woff');
}

sample html

<h3 style="font-family: 'Spectral Regular'">Et non consequatur suscipit ut dignissimos.</h3>
<h3 style="font-family: 'Spectral Italic'">Magnam quia sapiente ducimus excepturi est.</h3>
<h3 style="font-family: 'Spectral ExtraLight'">Ex quasi quis in dolores eaque.</h3>
<h3 style="font-family: 'Spectral ExtraLight Italic'">Impedit aspernatur ducimus omnis autem dolorem.</h3>
<h3 style="font-family: 'Spectral Light'">Nobis et officiis rerum.</h3>
<h3 style="font-family: 'Spectral Light Italic'">Ipsa incidunt numquam est et in atque.</h3>
<h3 style="font-family: 'Spectral Medium'">Neque iusto nostrum maiores ratione.</h3>
<h3 style="font-family: 'Spectral Medium Italic'">Rem est quam iusto sed soluta qui.</h3>
<h3 style="font-family: 'Spectral SemiBold'">Quo totam ut accusamus ut est.</h3>
<h3 style="font-family: 'Spectral SemiBold Italic'">Consequatur quasi reprehenderit at.</h3>
<h3 style="font-family: 'Spectral Bold'">Nostrum ea fugit ut quis soluta earum optio.</h3>
<h3 style="font-family: 'Spectral Bold Italic'">Corrupti aliquam corporis odio sunt.</h3>
<h3 style="font-family: 'Spectral ExtraBold'">Reiciendis voluptas sint autem.</h3>
<h3 style="font-family: 'Spectral ExtraBold Italic'">Officiis dolorem et minus eligendi rerum vel.</h3>

Preview

License

This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is available with a FAQ at: http://scripts.sil.org/OFL

Spectral is a registered trademark of Production Systems SAS.

Copyright 2017 The Spectral Project Authors (http://github.com/productiontype/spectral)

http://scripts.sil.org/OFL