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'">Eum non unde totam cupiditate qui voluptas qui.</h3>
<h3 style="font-family: 'Spectral Italic'">Harum quod nemo eum aut.</h3>
<h3 style="font-family: 'Spectral ExtraLight'">Dolorem eos omnis et voluptate.</h3>
<h3 style="font-family: 'Spectral ExtraLight Italic'">Aut earum est alias sunt libero.</h3>
<h3 style="font-family: 'Spectral Light'">Iste eum quidem architecto enim laudantium.</h3>
<h3 style="font-family: 'Spectral Light Italic'">Doloremque aperiam rerum praesentium fuga.</h3>
<h3 style="font-family: 'Spectral Medium'">Iste quos voluptas rerum earum et nisi quibusdam.</h3>
<h3 style="font-family: 'Spectral Medium Italic'">Sint nam ut est fugit. Ad quo repudiandae aut.</h3>
<h3 style="font-family: 'Spectral SemiBold'">Amet ipsam delectus facilis at.</h3>
<h3 style="font-family: 'Spectral SemiBold Italic'">Quia expedita sint blanditiis sunt omnis dolorem.</h3>
<h3 style="font-family: 'Spectral Bold'">Temporibus doloremque sunt dolores qui eveniet.</h3>
<h3 style="font-family: 'Spectral Bold Italic'">Cumque adipisci eius voluptas eum quis ab.</h3>
<h3 style="font-family: 'Spectral ExtraBold'">Sint veritatis consectetur asperiores dolores.</h3>
<h3 style="font-family: 'Spectral ExtraBold Italic'">Aut quia minus sequi.</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