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'">Tenetur aut exercitationem nam officia.</h3>
<h3 style="font-family: 'Grava Oblique'">Ut dolore voluptatem enim excepturi.</h3>
<h3 style="font-family: 'Grava Normal'">Placeat expedita ut mollitia corrupti velit nisi.</h3>
<h3 style="font-family: 'Grava Normal Oblique'">Ut nisi atque recusandae voluptatem.</h3>
<h3 style="font-family: 'Grava Thin'">Quaerat cum ad aut consequatur doloribus aut.</h3>
<h3 style="font-family: 'Grava Thin Oblique'">Suscipit molestias dolore nemo sed.</h3>
<h3 style="font-family: 'Grava ExtraLight'">Ut sunt est eius.</h3>
<h3 style="font-family: 'Grava ExtraLight Oblique'">Aut inventore aperiam eum eum autem cum eaque.</h3>
<h3 style="font-family: 'Grava Light'">Est dicta magnam earum ullam sunt.</h3>
<h3 style="font-family: 'Grava Light Oblique'">Iusto nihil reprehenderit est atque ut.</h3>
<h3 style="font-family: 'Grava Medium'">Quae laboriosam quos omnis.</h3>
<h3 style="font-family: 'Grava Medium Oblique'">Quasi sed velit laudantium iste.</h3>
<h3 style="font-family: 'Grava SemiBold'">Totam quidem repellendus omnis animi.</h3>
<h3 style="font-family: 'Grava SemiBold Oblique'">Suscipit deleniti illo qui consequatur quia.</h3>
<h3 style="font-family: 'Grava Bold'">Eos rerum consectetur id et.</h3>
<h3 style="font-family: 'Grava Bold Oblique'">Ut est vel saepe sit.</h3>
<h3 style="font-family: 'Grava Black'">Inventore dolorem animi nam nihil ratione.</h3>
<h3 style="font-family: 'Grava Black Oblique'">Voluptas excepturi atque labore ipsa.</h3>
<h3 style="font-family: 'Grava Ultra'">Ipsum saepe velit qui.</h3>
<h3 style="font-family: 'Grava Ultra Oblique'">Consectetur ut voluptatem id saepe.</h3>
<h3 style="font-family: 'Grava Display Roman'">Aliquam quis commodi dolor.</h3>
<h3 style="font-family: 'Grava Display Oblique'">Qui odit eligendi veniam dolores rerum iusto.</h3>
<h3 style="font-family: 'Grava Display Normal'">Non ut iste nemo occaecati non.</h3>
<h3 style="font-family: 'Grava Display Normal Oblique'">Quia sint ex aut eaque quidem numquam autem.</h3>
<h3 style="font-family: 'Grava Display Thin'">At est atque qui dignissimos.</h3>
<h3 style="font-family: 'Grava Display Thin Oblique'">Culpa delectus eveniet tenetur tempora.</h3>
<h3 style="font-family: 'Grava Display ExtraLight'">Non et officia sit numquam.</h3>
<h3 style="font-family: 'Grava Display ExtraLight Oblique'">Earum fugiat ea sapiente ad rem autem ut ut.</h3>
<h3 style="font-family: 'Grava Display Light'">Perferendis officiis aut ipsam voluptate.</h3>
<h3 style="font-family: 'Grava Display Light Oblique'">Aliquid error error ex aut dolor nihil hic.</h3>
<h3 style="font-family: 'Grava Display Medium'">Ducimus tenetur est quae ut qui.</h3>
<h3 style="font-family: 'Grava Display Medium Oblique'">Cum dignissimos quam at dolorem quos.</h3>
<h3 style="font-family: 'Grava Display SemiBold'">Minus ut adipisci quis.</h3>
<h3 style="font-family: 'Grava Display SemiBold Oblique'">Odit voluptas iste rerum ipsam veniam.</h3>
<h3 style="font-family: 'Grava Display Bold'">Mollitia ea non molestias dolorem quasi.</h3>
<h3 style="font-family: 'Grava Display Bold Oblique'">Debitis sit eum aut qui rem deserunt quia.</h3>
<h3 style="font-family: 'Grava Display Black'">Officiis dolor voluptas beatae et.</h3>
<h3 style="font-family: 'Grava Display Black Oblique'">Similique voluptas nihil magnam fuga odit cumque.</h3>
<h3 style="font-family: 'Grava Display Ultra'">Expedita itaque magnam occaecati cum.</h3>
<h3 style="font-family: 'Grava Display Ultra Oblique'">Labore quia omnis ullam et.</h3>

Preview

License

Grava is a trademark of Neil Summerour.

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