Need a website? Then you also need hosting!

Buy your hosting through our affiliate link and take advantage of the special offer today!

See details
This is an affiliate ad

We proudly use and recommend Bluehost:

bluehost banner This is an affiliate ad

Font styles

  • RovenSans-Bold
  • RovenSans-BoldItalic
  • RovenSans-Italic
  • RovenSans-Light
  • RovenSans-LightItalic
  • RovenSans-Regular

Language support

The subset of Roven Bold in this kit supports the following languages:
Albanian, Basque, Breton, Chamorro, Danish, English, Finnish, Frisian, Galician, German, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo

Installing Webfonts

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

2. Include the webfont stylesheet

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:


@font-face{
font-family: 'MyWebFont';
src: url('WebFont.eot');
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
url('WebFont.woff') format('woff'),
url('WebFont.ttf') format('truetype'),
url('WebFont.svg#webfont') format('svg');
}

Link to the stylesheet in your HTML, like this:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

3. Modify your own stylesheet

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

p { font-family: 'WebFont', Arial, sans-serif; }

With your consent, we use cookies in order to evaluate and analyze website usage.

Choose which cookies to allow.
You can change these settings at any time.

Cookies required to operate the site:

  • Essential: Remember cookie permission settings
  • Essential: Allows cookie sessions
  • Essential: Log in to your user account

By accepting these cookies you allow the site to:

  • Analysis: Keeps track of location and region based on IP
  • Analysis: Keep track of time spent on each page
  • Analysis: Increases the quality of data in the statistical function