Grava Font Family

Use "Grava" font as a Webfont

You can create beautiful websites with great typography using the @font-face kit of Grava 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 Grava 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: 'Grava Roman';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Roman'), url('Grava Roman.woff') format('woff');
}
@font-face {
    font-family: 'Grava Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Oblique'), url('Grava Oblique.woff') format('woff');
}
@font-face {
    font-family: 'Grava Normal';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Normal'), url('Grava Normal.woff') format('woff');
}
@font-face {
    font-family: 'Grava Normal Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Normal Oblique'), url('Grava Normal Oblique.woff') format('woff');
}
@font-face {
    font-family: 'Grava Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Thin'), url('Grava Thin.woff') format('woff');
}
@font-face {
    font-family: 'Grava Thin Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Thin Oblique'), url('Grava Thin Oblique.woff') format('woff');
}
@font-face {
    font-family: 'Grava ExtraLight';
    font-style: normal;
    font-weight: normal;
    src: local('Grava ExtraLight'), url('Grava ExtraLight.woff') format('woff');
}
@font-face {
    font-family: 'Grava ExtraLight Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Grava ExtraLight Oblique'), url('Grava ExtraLight Oblique.woff') format('woff');
}
@font-face {
    font-family: 'Grava Light';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Light'), url('Grava Light.woff') format('woff');
}
@font-face {
    font-family: 'Grava Light Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Light Oblique'), url('Grava Light Oblique.woff') format('woff');
}
@font-face {
    font-family: 'Grava Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Medium'), url('Grava Medium.woff') format('woff');
}
@font-face {
    font-family: 'Grava Medium Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Medium Oblique'), url('Grava Medium Oblique.woff') format('woff');
}
@font-face {
    font-family: 'Grava SemiBold';
    font-style: normal;
    font-weight: normal;
    src: local('Grava SemiBold'), url('Grava SemiBold.woff') format('woff');
}
@font-face {
    font-family: 'Grava SemiBold Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Grava SemiBold Oblique'), url('Grava SemiBold Oblique.woff') format('woff');
}
@font-face {
    font-family: 'Grava Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Bold'), url('Grava Bold.woff') format('woff');
}
@font-face {
    font-family: 'Grava Bold Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Bold Oblique'), url('Grava Bold Oblique.woff') format('woff');
}
@font-face {
    font-family: 'Grava Black';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Black'), url('Grava Black.woff') format('woff');
}
@font-face {
    font-family: 'Grava Black Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Black Oblique'), url('Grava Black Oblique.woff') format('woff');
}
@font-face {
    font-family: 'Grava Ultra';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Ultra'), url('Grava Ultra.woff') format('woff');
}
@font-face {
    font-family: 'Grava Ultra Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Ultra Oblique'), url('Grava Ultra Oblique.woff') format('woff');
}
@font-face {
    font-family: 'Grava Display Roman';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Display Roman'), url('Grava Display Roman.woff') format('woff');
}
@font-face {
    font-family: 'Grava Display Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Display Oblique'), url('Grava Display Oblique.woff') format('woff');
}
@font-face {
    font-family: 'Grava Display Normal';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Display Normal'), url('Grava Display Normal.woff') format('woff');
}
@font-face {
    font-family: 'Grava Display Normal Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Display Normal Oblique'), url('Grava Display Normal Oblique.woff') format('woff');
}
@font-face {
    font-family: 'Grava Display Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Display Thin'), url('Grava Display Thin.woff') format('woff');
}
@font-face {
    font-family: 'Grava Display Thin Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Display Thin Oblique'), url('Grava Display Thin Oblique.woff') format('woff');
}
@font-face {
    font-family: 'Grava Display ExtraLight';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Display ExtraLight'), url('Grava Display ExtraLight.woff') format('woff');
}
@font-face {
    font-family: 'Grava Display ExtraLight Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Display ExtraLight Oblique'), url('Grava Display ExtraLight Oblique.woff') format('woff');
}
@font-face {
    font-family: 'Grava Display Light';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Display Light'), url('Grava Display Light.woff') format('woff');
}
@font-face {
    font-family: 'Grava Display Light Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Display Light Oblique'), url('Grava Display Light Oblique.woff') format('woff');
}
@font-face {
    font-family: 'Grava Display Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Display Medium'), url('Grava Display Medium.woff') format('woff');
}
@font-face {
    font-family: 'Grava Display Medium Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Display Medium Oblique'), url('Grava Display Medium Oblique.woff') format('woff');
}
@font-face {
    font-family: 'Grava Display SemiBold';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Display SemiBold'), url('Grava Display Semi Bold.woff') format('woff');
}
@font-face {
    font-family: 'Grava Display SemiBold Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Display SemiBold Oblique'), url('Grava Display Semi Bold Oblique.woff') format('woff');
}
@font-face {
    font-family: 'Grava Display Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Display Bold'), url('Grava Display Bold.woff') format('woff');
}
@font-face {
    font-family: 'Grava Display Bold Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Display Bold Oblique'), url('Grava Display Bold Oblique.woff') format('woff');
}
@font-face {
    font-family: 'Grava Display Black';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Display Black'), url('Grava Display Black.woff') format('woff');
}
@font-face {
    font-family: 'Grava Display Black Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Display Black Oblique'), url('Grava Display Black Oblique.woff') format('woff');
}
@font-face {
    font-family: 'Grava Display Ultra';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Display Ultra'), url('Grava Display Ultra.woff') format('woff');
}
@font-face {
    font-family: 'Grava Display Ultra Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Grava Display Ultra Oblique'), url('Grava Display Ultra Oblique.woff') format('woff');
}

sample html

<h3 style="font-family: 'Grava Roman'">Aut distinctio aliquam rem est illo id.</h3>
<h3 style="font-family: 'Grava Oblique'">Omnis ratione hic soluta voluptas temporibus aut.</h3>
<h3 style="font-family: 'Grava Normal'">Eum qui et sed fugiat reiciendis labore eligendi.</h3>
<h3 style="font-family: 'Grava Normal Oblique'">Commodi voluptatem aut iusto eos et a et.</h3>
<h3 style="font-family: 'Grava Thin'">Quae cum quasi minus accusamus nam eum ea.</h3>
<h3 style="font-family: 'Grava Thin Oblique'">Eius placeat numquam et in quibusdam.</h3>
<h3 style="font-family: 'Grava ExtraLight'">A quasi dolorem est et nostrum.</h3>
<h3 style="font-family: 'Grava ExtraLight Oblique'">Corporis aperiam enim eos vel deserunt.</h3>
<h3 style="font-family: 'Grava Light'">Perferendis modi quis iste fugit.</h3>
<h3 style="font-family: 'Grava Light Oblique'">Ut cupiditate a ut autem natus ut ut.</h3>
<h3 style="font-family: 'Grava Medium'">Sequi ipsum voluptatem voluptas quod sit sit.</h3>
<h3 style="font-family: 'Grava Medium Oblique'">Ullam eveniet non temporibus commodi.</h3>
<h3 style="font-family: 'Grava SemiBold'">In porro omnis voluptates eligendi voluptatum.</h3>
<h3 style="font-family: 'Grava SemiBold Oblique'">Vel architecto aut maxime sit esse.</h3>
<h3 style="font-family: 'Grava Bold'">Qui sit aliquid velit.</h3>
<h3 style="font-family: 'Grava Bold Oblique'">Est harum adipisci quia magni et placeat.</h3>
<h3 style="font-family: 'Grava Black'">Dolores deserunt doloremque error praesentium.</h3>
<h3 style="font-family: 'Grava Black Oblique'">Quis in recusandae sit rerum quisquam odit.</h3>
<h3 style="font-family: 'Grava Ultra'">Cupiditate quia ut dignissimos ad.</h3>
<h3 style="font-family: 'Grava Ultra Oblique'">Ipsam aliquam minus facere sequi necessitatibus.</h3>
<h3 style="font-family: 'Grava Display Roman'">Rerum reiciendis laboriosam dolor et.</h3>
<h3 style="font-family: 'Grava Display Oblique'">Sunt aut earum nihil totam nam.</h3>
<h3 style="font-family: 'Grava Display Normal'">Est velit repellat ut.</h3>
<h3 style="font-family: 'Grava Display Normal Oblique'">Qui ut ut amet aperiam.</h3>
<h3 style="font-family: 'Grava Display Thin'">Doloremque autem error ex labore totam.</h3>
<h3 style="font-family: 'Grava Display Thin Oblique'">Nobis quia praesentium minima doloribus qui.</h3>
<h3 style="font-family: 'Grava Display ExtraLight'">Ea illo et consequatur laboriosam sed sunt.</h3>
<h3 style="font-family: 'Grava Display ExtraLight Oblique'">Quia ut et voluptatem reiciendis non vel.</h3>
<h3 style="font-family: 'Grava Display Light'">Vel dolores et autem eos qui id quas.</h3>
<h3 style="font-family: 'Grava Display Light Oblique'">Non sint qui dicta voluptatum facere eaque sed.</h3>
<h3 style="font-family: 'Grava Display Medium'">Distinctio et enim et rerum nesciunt facere.</h3>
<h3 style="font-family: 'Grava Display Medium Oblique'">Molestiae eos autem perferendis nihil.</h3>
<h3 style="font-family: 'Grava Display SemiBold'">Voluptates velit numquam sunt.</h3>
<h3 style="font-family: 'Grava Display SemiBold Oblique'">At iure molestiae dolor est nisi quas.</h3>
<h3 style="font-family: 'Grava Display Bold'">Sequi deserunt iste beatae distinctio nesciunt.</h3>
<h3 style="font-family: 'Grava Display Bold Oblique'">Delectus consequatur natus qui.</h3>
<h3 style="font-family: 'Grava Display Black'">Modi sint impedit et itaque et.</h3>
<h3 style="font-family: 'Grava Display Black Oblique'">Ipsa consequatur veritatis corporis.</h3>
<h3 style="font-family: 'Grava Display Ultra'">Quia porro nulla sit culpa.</h3>
<h3 style="font-family: 'Grava Display Ultra Oblique'">Nobis dolor quaerat numquam.</h3>

Preview

License

Grava is a trademark of Neil Summerour.

Copyright © 2014Р2015 by Neil Summerour. All rights reserved. |DCNT