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'">Veniam non reprehenderit aut quo in quia ut.</h3>
<h3 style="font-family: 'Grava Oblique'">Praesentium id odit voluptates ad.</h3>
<h3 style="font-family: 'Grava Normal'">Eum natus ut quibusdam est possimus dolorem.</h3>
<h3 style="font-family: 'Grava Normal Oblique'">Est qui eos perferendis libero.</h3>
<h3 style="font-family: 'Grava Thin'">Quas sit ut cupiditate minima quasi.</h3>
<h3 style="font-family: 'Grava Thin Oblique'">Eos deserunt voluptatum ab saepe.</h3>
<h3 style="font-family: 'Grava ExtraLight'">Quo vel vero ipsum voluptatem.</h3>
<h3 style="font-family: 'Grava ExtraLight Oblique'">Qui repudiandae pariatur et ut dolores tenetur.</h3>
<h3 style="font-family: 'Grava Light'">Qui consequatur asperiores quis et sapiente aut.</h3>
<h3 style="font-family: 'Grava Light Oblique'">Ad sequi totam quidem qui reprehenderit at.</h3>
<h3 style="font-family: 'Grava Medium'">Id aut labore numquam culpa enim magnam et.</h3>
<h3 style="font-family: 'Grava Medium Oblique'">Eveniet fuga aliquid dolor consequatur.</h3>
<h3 style="font-family: 'Grava SemiBold'">Laudantium non quia architecto sed.</h3>
<h3 style="font-family: 'Grava SemiBold Oblique'">Saepe error ratione corporis consequatur.</h3>
<h3 style="font-family: 'Grava Bold'">Quos nostrum omnis aut placeat et placeat.</h3>
<h3 style="font-family: 'Grava Bold Oblique'">Dolorem odit architecto iste sed sed quo.</h3>
<h3 style="font-family: 'Grava Black'">Quam ex ut in natus nesciunt et.</h3>
<h3 style="font-family: 'Grava Black Oblique'">A illo alias doloremque enim quasi.</h3>
<h3 style="font-family: 'Grava Ultra'">Quas eligendi nam ad nostrum vero laudantium.</h3>
<h3 style="font-family: 'Grava Ultra Oblique'">Laudantium asperiores quae sed sed voluptas.</h3>
<h3 style="font-family: 'Grava Display Roman'">Odio ab magni corporis.</h3>
<h3 style="font-family: 'Grava Display Oblique'">Repudiandae totam aliquid veniam facere et.</h3>
<h3 style="font-family: 'Grava Display Normal'">Consequatur id sit quia quia non dolore.</h3>
<h3 style="font-family: 'Grava Display Normal Oblique'">Ut fuga velit suscipit minus architecto.</h3>
<h3 style="font-family: 'Grava Display Thin'">Similique labore corrupti doloremque.</h3>
<h3 style="font-family: 'Grava Display Thin Oblique'">At et aliquid cum est laborum maxime.</h3>
<h3 style="font-family: 'Grava Display ExtraLight'">Repellendus a saepe aspernatur.</h3>
<h3 style="font-family: 'Grava Display ExtraLight Oblique'">Alias fugiat nisi in totam fugit consequuntur a.</h3>
<h3 style="font-family: 'Grava Display Light'">Earum sint voluptatum rerum sit quod.</h3>
<h3 style="font-family: 'Grava Display Light Oblique'">Atque sit dicta earum ut officiis.</h3>
<h3 style="font-family: 'Grava Display Medium'">Qui fuga hic mollitia.</h3>
<h3 style="font-family: 'Grava Display Medium Oblique'">Alias est aspernatur voluptatem libero quis.</h3>
<h3 style="font-family: 'Grava Display SemiBold'">Quae tempore consequatur delectus ex.</h3>
<h3 style="font-family: 'Grava Display SemiBold Oblique'">Libero qui aliquam laudantium.</h3>
<h3 style="font-family: 'Grava Display Bold'">Corrupti perferendis molestiae libero voluptas.</h3>
<h3 style="font-family: 'Grava Display Bold Oblique'">Quae accusantium sequi eius corporis beatae vel.</h3>
<h3 style="font-family: 'Grava Display Black'">Minus est quas quam qui dolores.</h3>
<h3 style="font-family: 'Grava Display Black Oblique'">Fugiat ut voluptas sit.</h3>
<h3 style="font-family: 'Grava Display Ultra'">Temporibus rerum blanditiis sunt illo.</h3>
<h3 style="font-family: 'Grava Display Ultra Oblique'">Vero nulla qui doloremque eum aut.</h3>

Preview

License

Grava is a trademark of Neil Summerour.

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