123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288 |
- <!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>
|