font loading

by grammar

HTML

<script src="http://fonts.googleapis.com/css?family=Merriweather+Sans"></script>
<script src="http://fonts.googleapis.com/css?family=Patrick+Hand+SC"></script>
<script src="http://fonts.googleapis.com/css?family=Faster+One"></script>
<link href='http://fonts.googleapis.com/css?family=Merriweather+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Patrick+Hand+SC' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Faster+One' rel='stylesheet' type='text/css'>
    
    <p class="mw">Hello what is this font?</p>
    <p class="ph">Hello what is this font?</p>
    <div class="override">
        <p>This is the overidden font</p>
    </div>

CSS

.mw {
    font-family: 'Merriweather Sans', sans-serif;
}

.ph {
    font-family: 'Patrick Hand SC', cursive;
}

.override {
    background: red;
}
.override p {
    color: white;
    font-family: 'Faster One', cursive;
}