Oliva Webfont Specimen

Oliva & Oliva Italic

—Web fonts extra vergine—

Oliva Web Fonts

Oliva Italic


Responsive Specimen

Even on small devices this specimen words will always fit to the width of the screen. Created with fittext.js

A Typeface Extra Vergine
soul food house
Welcome to my pool party!
brown sugar babe
Меня зовут Виктор.


АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюяЀЁЂЃҐЄЅІЇЈЉЊЋЌЍЎЏѐёђѓґєѕіïјљњћќѝўџ№∙∆▯◊Ω∂∏∑√∫π⁰¹²³⁴⁵⁶⁷⁸⁹/₀₁₂₃₄₅₆₇₈₉←↑→↓↖↗↘↙ ←↑→↓↖↗↘↙

Created with the help of lettering.js


← ↑ → ↓


Font Features

Oliva comes with some OpenType features, like an alternate versions for ›i‹ or ›j‹. For desktop fonts these features can be accessed via the OpenType menu. For web fonts this works via CSS. Font features are part of the CSS3 specifications and are supported by most browsers. The browser support for font-feature-settings is documented here.
The following examples shows all features coming with Oliva.

To get these features to work, make sure the web fonts contain all necessary characters, throughout subsetting web fonts character set might be limited (subsetting web fonts helps to make a faster loading performance). A second way of using one or more of the alternate characters might be to exchange these characters with the deafult characters. This way you would not need font-feature-settings.


OpenType Feature Stylistic Set 01

Mini Fjord
i → i    j → j

Stylistic Set 01 contains an alternate ›i‹ and ›j‹. The following code shows how to implement:

<div class="FeatureExample ss01">Le Café Olé</div>

.FeatureExample    { font-family: Oliva-Regular; 
                     font-size: 7em; 
                     line-height: 1.1; 
                     text-align: center; 

.ss01   { -webkit-font-feature-settings: "ss01";
             -moz-font-feature-settings: "ss01"; 
             -moz-font-feature-settings: "ss01=1"; 
              -ms-font-feature-settings: "ss01" 1; 

OpenType Fraction Feature

1/3 Oil
3/88 Vinegar
7/145 Lemon

The Fraction Feature easily hepls to build all kind of fractions. To implement it go like this:

<div class="FeatureExample frac">1/3 Oil</div>
<div class="FeatureExample frac">3/88 Vinegar</div>
<div class="FeatureExample frac">7/145 Lemon</div>

.FeatureExample    { font-family: Babetta-Bold; 
                     font-size: 7em; 
                     line-height: 1.1; 
                     text-align: center; 

.frac   { -webkit-font-feature-settings: "frac";
             -moz-font-feature-settings: "frac"; 
             -moz-font-feature-settings: "frac=1"; 
              -ms-font-feature-settings: "frac" 1; 

About Oliva web fonts

Oliva & Oliva Italic are two strong and funky display fonts. Influences came from typefaces like Futura Black by Paul Renner and Motter Ombra by Othmar Motter, but also Stilla by François Boltana and Allegro by Hans Bohn lay on the desk. All these ingredients were mixed to contemporary type experience. The webfonts used on this site are generated with MyFonts’ Webfonts Kit Builder.

If you want to learn more about OpenType featuers and CSS have a look here.

Purchase Oliva web fonts at MyFonts or Fontspring. MyFonts LogoFontspring Logo