Web font test > Roboto Slab

A test of the web font served by Google Fonts on Cyrillic subset

by webmatter

HTML

<h1>WEB FONT TEST<br />
    <span class="fontfamily1">Roboto Slab</span><br />
    served by Google Fonts</h1>

<h2>Examples of Cyrillic glyphs</h2>
<div class="esempi">
    <p class="fontfamily1">Д Ђ Ж ... Ҟ ҟ Ҡ ҡ Ң ң Ҥ (Roboto Slab - ABC)</p>
    <p class="fontfamily2">Д Ђ Ж ... Ҟ ҟ Ҡ ҡ Ң ң Ҥ (Arial for comparison - ABC)</p>
</div>

<div class="question">
<p>QUESTION<br />Can you see the roboto slab cyrillc glyphs on your iPhone/iPad?</p>
</div>

<h2>Cyrillic glyph table</h2>
<p>copied from Font Squirrel</p>
<h3>Roboto Slab 300</h3>
<div class="glifi weight300 fontfamily1" style="width:100%">
<div>...

CSS

/**1**/
/*@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,300&subset=cyrillic);*/
  /**2**/
/*@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,300&subset=cyrillic-ext);*/
  /**3**/
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,300&subset=cyrillic,cyrillic-ext,latin);
  /**4**/
/*@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,300);+/

body {
    padding: 20px;
    color: #000;
    background-color: #F1F1F1;
    font-family:  Georgia; /*no fallback font on purpose*/
    font-weight: normal;
    font-size: 16px;
    line-height: normal;
}


h1 {
    font-size: 3em;
    font-weight: bold;
}

h2 {
    font-size: 2em;
    font-weight: bold;
    margin: 1.5em 0 .5em 0;
      color: #4078bf; 
    clear: left;
}

h3 {
    font-size: 1.6em;
    font-weight: bold;
    margin: 1em 0 .2em 0;
      color: #4078bf; 
    clear: left;
}


p {
    font-size: 1em;
    font-weight: normal;
    line-height: normal;
    margin: 0;
}

.fontfamily1 {font-family: 'Roboto Slab';}
.fontfamily2 {font-family: Arial, sans-serif;}

.weight100 { font-weight: 100; }
.weight200 { font-weight: 200; }
.weight300 { font-weight: 300; }
.weight400 { font-weight: 400; }
.weight500 { font-weight: 500; }
.weight600 { font-weight: 600; }
.weight700 { font-weight: 700; }
.weight800 { font-weight: 800; }
.weight900 { font-weight: 900; }

.esempi { 
    margin: 30px;
    padding: 10px;
    border: 1px solid #555;
}

.esempi p{ 
    font-size: 2em; /*cambiare per variare dimensioni esempi*/
     margin-bottom: 5px;
     font-weight: normal;
}


.glifi div{ 
    float: left;
    width: 2em;
    height:2em;
    margin: 0 .5em .5em 0;
    background-color: #CCC;
    font-size: 2em;
    padding: .3em;
    text-align: center;
    line-height: 2em;
    
}

.question{ 
    margin: 30px;
    padding: 10px;
    border: 1px dotted #C00;
    color: #C00;
}

p.note{
    color: #CCC;
    font-style: italic;   
    clear: left;
}