Fira Sans Font Family

Use "Fira Sans" font as a Webfont

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

sample html

<h3 style="font-family: 'Fira Sans Regular'">Dolor quam nisi ad mollitia quis.</h3>
<h3 style="font-family: 'Fira Sans Italic'">Assumenda possimus deserunt velit ut quis.</h3>
<h3 style="font-family: 'Fira Sans Thin'">Exercitationem quia ipsam eos.</h3>
<h3 style="font-family: 'Fira Sans Thin Italic'">Consequatur necessitatibus et nihil iste.</h3>
<h3 style="font-family: 'Fira Sans ExtraLight'">Asperiores unde ut sed repellat est.</h3>
<h3 style="font-family: 'Fira Sans ExtraLight Italic'">Odio totam fugit praesentium tempore cumque ea.</h3>
<h3 style="font-family: 'Fira Sans Light'">Animi molestiae qui at deleniti et autem.</h3>
<h3 style="font-family: 'Fira Sans Light Italic'">Aut voluptatum saepe ut voluptatem voluptatibus.</h3>
<h3 style="font-family: 'Fira Sans Medium'">Dolor perferendis aut sed numquam voluptate.</h3>
<h3 style="font-family: 'Fira Sans Medium Italic'">Necessitatibus atque ullam ipsam ducimus.</h3>
<h3 style="font-family: 'Fira Sans SemiBold'">Corrupti eius eos quasi eligendi.</h3>
<h3 style="font-family: 'Fira Sans SemiBold Italic'">Consequatur assumenda sed velit.</h3>
<h3 style="font-family: 'Fira Sans Bold'">Qui et fugiat soluta aut occaecati est.</h3>
<h3 style="font-family: 'Fira Sans Bold Italic'">Autem aspernatur accusantium non suscipit eius.</h3>
<h3 style="font-family: 'Fira Sans ExtraBold'">Vitae libero molestiae hic et qui.</h3>
<h3 style="font-family: 'Fira Sans ExtraBold Italic'">Atque minima sunt omnis. In aperiam et ut.</h3>
<h3 style="font-family: 'Fira Sans Black'">Iusto explicabo molestiae nostrum sed.</h3>
<h3 style="font-family: 'Fira Sans Black Italic'">Asperiores tenetur atque iste adipisci sequi.</h3>

Preview

License

Licensed under the Open Font License, version 1.1 or later

Fira Sans is a trademark of The Mozilla Corporation.

Digitized data copyright 2012-2016, The Mozilla Foundation and Telefonica S.A.

http://scripts.sil.org/OFL