289 lines
12 KiB
HTML
289 lines
12 KiB
HTML
<!Doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Test Font Face</title>
|
|
<link rel="stylesheet" href="css/roboto/roboto-fontface.css">
|
|
<link rel="stylesheet" href="css/roboto-condensed/roboto-condensed-fontface.css">
|
|
<link rel="stylesheet" href="css/roboto-slab/roboto-slab-fontface.css">
|
|
<style>
|
|
body {
|
|
background: #F2F2F2;
|
|
}
|
|
|
|
.test-header {
|
|
text-align: center;
|
|
font-family: 'Roboto-Black';
|
|
font-size: 2em;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.test-header h1 {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
section {
|
|
padding: 2% 10%;
|
|
margin: 0 auto;
|
|
}
|
|
/*Roboto*/
|
|
|
|
.roboto {
|
|
font-family: 'Roboto';
|
|
}
|
|
|
|
.roboto-italic {
|
|
font-family: 'Roboto-RegularItalic';
|
|
}
|
|
|
|
.roboto-light {
|
|
font-family: 'Roboto-Light';
|
|
}
|
|
|
|
.roboto-light-italic {
|
|
font-family: 'Roboto-LightItalic';
|
|
}
|
|
|
|
.roboto-bold {
|
|
font-family: 'Roboto-Bold';
|
|
}
|
|
|
|
.roboto-bold-italic {
|
|
font-family: 'Roboto-BoldItalic';
|
|
}
|
|
|
|
.roboto-medium {
|
|
font-family: 'Roboto-Medium';
|
|
}
|
|
|
|
.roboto-medium-italic {
|
|
font-family: 'Roboto-MediumItalic';
|
|
}
|
|
|
|
.roboto-thin {
|
|
font-family: 'Roboto-Thin';
|
|
}
|
|
|
|
.roboto-thin-italic {
|
|
font-family: 'Roboto-ThinItalic';
|
|
}
|
|
/*Roboto Condensed*/
|
|
|
|
.roboto-condensed {
|
|
font-family: 'Roboto-Condensed';
|
|
}
|
|
|
|
.roboto-condensed-italic {
|
|
font-family: 'Roboto-Condensed-RegularItalic';
|
|
}
|
|
|
|
.roboto-condensed-light {
|
|
font-family: 'Roboto-Condensed-Light';
|
|
}
|
|
|
|
.roboto-condensed-light-italic {
|
|
font-family: 'Roboto-Condensed-LightItalic';
|
|
}
|
|
|
|
.roboto-condensed-bold {
|
|
font-family: 'Roboto-Condensed-Bold';
|
|
}
|
|
|
|
.roboto-condensed-bold-italic {
|
|
font-family: 'Roboto-Condensed-BoldItalic';
|
|
}
|
|
/*Roboto Slab*/
|
|
|
|
.roboto-slab {
|
|
font-family: 'Roboto-Slab';
|
|
}
|
|
|
|
.roboto-slab-light {
|
|
font-family: 'Roboto-Slab-Light';
|
|
}
|
|
|
|
.roboto-slab-bold {
|
|
font-family: 'Roboto-Slab-Bold';
|
|
}
|
|
|
|
.roboto-slab-thin {
|
|
font-family: 'Roboto-Slab-Thin';
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<header class="test-header">
|
|
<h1>Roboto-Fontface-Bower</h1>
|
|
</header>
|
|
|
|
<!-- Roboto -->
|
|
<section class="roboto">
|
|
<header>
|
|
<h1>I am Roboto</h1>
|
|
</header>
|
|
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
|
|
goodies that make writing CSS fun again.
|
|
</section>
|
|
|
|
<section class="roboto-italic">
|
|
<header>
|
|
<h1>I am Roboto Italic</h1>
|
|
</header>
|
|
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
|
|
goodies that make writing CSS fun again.
|
|
</section>
|
|
|
|
<section class="roboto-light">
|
|
<header>
|
|
<h1>I am Roboto Light</h1>
|
|
</header>
|
|
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
|
|
goodies that make writing CSS fun again.
|
|
</section>
|
|
|
|
<section class="roboto-light-italic">
|
|
<header>
|
|
<h1>I am Roboto Light Italic</h1>
|
|
</header>
|
|
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
|
|
goodies that make writing CSS fun again.
|
|
</section>
|
|
|
|
<section class="roboto-medium">
|
|
<header>
|
|
<h1>I am Roboto Medium</h1>
|
|
</header>
|
|
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
|
|
goodies that make writing CSS fun again.
|
|
</section>
|
|
|
|
<section class="roboto-medium-italic">
|
|
<header>
|
|
<h1>I am Roboto Medium Italic</h1>
|
|
</header>
|
|
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
|
|
goodies that make writing CSS fun again.
|
|
</section>
|
|
|
|
<section class="roboto-bold">
|
|
<header>
|
|
<h1>I am Roboto Bold</h1>
|
|
</header>
|
|
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
|
|
goodies that make writing CSS fun again.
|
|
</section>
|
|
|
|
<section class="roboto-bold-italic">
|
|
<header>
|
|
<h1>I am Roboto Bold Italic</h1>
|
|
</header>
|
|
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
|
|
goodies that make writing CSS fun again.
|
|
</section>
|
|
|
|
<section class="roboto-thin">
|
|
<header>
|
|
<h1>I am Roboto Thin</h1>
|
|
</header>
|
|
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
|
|
goodies that make writing CSS fun again.
|
|
</section>
|
|
|
|
<section class="roboto-thin-italic">
|
|
<header>
|
|
<h1>I am Roboto Thin Italic</h1>
|
|
</header>
|
|
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
|
|
goodies that make writing CSS fun again.
|
|
</section>
|
|
|
|
<!-- Roboto Condensed -->
|
|
<section class="roboto-condensed">
|
|
<header>
|
|
<h1>I am RobotoCondensed</h1>
|
|
</header>
|
|
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
|
|
goodies that make writing CSS fun again.
|
|
</section>
|
|
|
|
<section class="roboto-condensed-italic">
|
|
<header>
|
|
<h1>I am RobotoCondensed Italic</h1>
|
|
</header>
|
|
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
|
|
goodies that make writing CSS fun again.
|
|
</section>
|
|
|
|
<section class="roboto-condensed-light">
|
|
<header>
|
|
<h1>I am RobotoCondensed Light</h1>
|
|
</header>
|
|
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
|
|
goodies that make writing CSS fun again.
|
|
</section>
|
|
|
|
<section class="roboto-condensed-light-italic">
|
|
<header>
|
|
<h1>I am RobotoCondensed Light Italic</h1>
|
|
</header>
|
|
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
|
|
goodies that make writing CSS fun again.
|
|
</section>
|
|
|
|
<section class="roboto-condensed-bold">
|
|
<header>
|
|
<h1>I am RobotoCondensed Bold</h1>
|
|
</header>
|
|
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
|
|
goodies that make writing CSS fun again.
|
|
</section>
|
|
|
|
<section class="roboto-condensed-bold-italic">
|
|
<header>
|
|
<h1>I am RobotoCondensed Bold Italic</h1>
|
|
</header>
|
|
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
|
|
goodies that make writing CSS fun again.
|
|
</section>
|
|
|
|
<!-- Roboto Slab -->
|
|
<section class="roboto-slab">
|
|
<header>
|
|
<h1>I am RobotoSlab</h1>
|
|
</header>
|
|
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
|
|
goodies that make writing CSS fun again.
|
|
</section>
|
|
|
|
<section class="roboto-slab-light">
|
|
<header>
|
|
<h1>I am RobotoSlab Light</h1>
|
|
</header>
|
|
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
|
|
goodies that make writing CSS fun again.
|
|
</section>
|
|
|
|
<section class="roboto-slab-bold">
|
|
<header>
|
|
<h1>I am RobotoSlab Bold</h1>
|
|
</header>
|
|
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
|
|
goodies that make writing CSS fun again.
|
|
</section>
|
|
|
|
<section class="roboto-slab-thin">
|
|
<header>
|
|
<h1>I am RobotoSlab Thin</h1>
|
|
</header>
|
|
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty
|
|
goodies that make writing CSS fun again.
|
|
</section>
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|