Material Design Lite ignores different Font types

Question

I've recently switched to Material Design Lite from Polymer. I'm trying to understand what's best for what I need to do.

I've started with the demo toolbar on the MDL website (GETMDL) and I after copying it I tried to change the title font, however it doesn't seem to get that. Here's my code (index.html):

<!DOCTYPE html>
<html>

    <head>

        <link rel="stylesheet" href="style.css">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
        <script src="./mdl/material.min.js"></script>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    </head>

    <body>

        <!-- Always shows a header, even in smaller screens. -->
        <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

                <header class="mdl-layout__header">

                    <div class="mdl-layout__header-row">

                        <!-- Title -->
                        <div class="mdl-layout-title"> C. Piersigilli &#38 Associati </div>

                        <!-- Add spacer, to align navigation to the right -->
                        <div class="mdl-layout-spacer"></div>

                    </div>

                </header>

            <div class="mdl-layout__drawer">

                <span class="mdl-layout-title">Title</span>

                <nav class="mdl-navigation">

                    <a class="mdl-navigation__link" href="">Link</a>
                    <a class="mdl-navigation__link" href="">Link</a>
                    <a class="mdl-navigation__link" href="">Link</a>
                    <a class="mdl-navigation__link" href="">Link</a>

                </nav>

            </div>

            <main class="mdl-layout__content">

                <div class="page-content"></div>

            </main>

        </div>

    </body>

</html>

And, here's style.css

div {

    font-family: "Roboto Mono";

}

What I want to do is change the <div class="mdl-layout-title"> C. Piersigilli &#38 Associati </div> font type and after that change the toolbar color.

Although I've done that it doesn't work and I can't even manage to find a way to change the toolbar color.

Thanks in advance for your help!

`div` is not very specific. The most specific rule will always win. Try adding it to `.mdl-layout-title`, or add your own class to it, or use `!important` (not recommended). — Antiga, Nov 30 '15 at 19:28

score 1 · Answer 1 · answered Dec 01 '15 at 14:37

This all comes down to CSS Specificity. Make sure your selector is more specific than the one MDL defines. We try to use a single class for as much of the targeting as we can. There are places where we duplicate the classname to be more specific without extra markup, and places where we do child/sibling selectors to keep things tidy (like data tables.)

Material Design Lite ignores different Font types

1 Answers1