partoschph68073
/
SmartMirror-Projektarbeit

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