JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi"></script>
<p class="serif">SERIF</p>
<p class="serifItalic">SERIF ITALIC</p>
<p class="serifBold">SERIF BOLD</p>
<p class="serifBoldItalic">SERIF BOLD ITALIC</p>
<p class="tangerine">Tangerine</p>

<script type="text/javascript">
	google.load('webfont','1');
	google.setOnLoadCallback(function() {
		WebFont.load({
			google: {
				families: ['Droid Serif']
			}
		});
	});
</script>

CSS

.serif{
    font-family:'Droid Serif'; 
    font-size:30px; 
    font-style:normal;
    font-weight: 400;
}

.serifItalic{
    font-family:'Droid Serif'; 
    font-size:30px; 
    font-style:italic;
    font-weight: 400;
}

.serifBold{
    font-family:'Droid Serif';
    font-size:30px;
    font-style:normal;
    font-style:bold;
}

.serifBoldItalic{
    font-family:'Droid Serif'; 
    font-size:30px;
    font-style:italic; 
    font-weight: bold;
}
.tangerine{
    font-family:'Tangerine'; 
    font-size:30px;
    font-style:italic; 
    font-weight: bold;
}