JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Cookie"></script>
<div class="cookieFontGoogle" id="divBrandNameText" style="color: purple; display: inline-block;">
Testing This out!!!
</div>

<div class="lobsterFontGoogle" style="color:#8B076A;border:0px solid orange;">
               Testing This out--
</div>

CSS

@import url(//fonts.googleapis.com/css?family=Lobster:400,700,300);
@import url(//fonts.googleapis.com/css?family=Cookie:400,700,300);

.cookieFontGoogle {
            font: 100 30px/1.5 'Cookie', Helvetica, sans-serif;
            color: #fff;
            text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
        }
 
 .lobsterFontGoogle {
            font-family: 'Lobster', cursive;
            font: 100 20px/1.5 'Lobster';
            /*text-shadow: 4px 4px 3px rgba(0,0,0,0.1);*/
        }