JSFiddle - React, Tailwind, and code Playground

HTML

<script src=" https://fonts.googleapis.com/css?family=Open+Sans"></script>
<script src="https://use.fontawesome.com/a30dc5ca39.js"></script>
<div class="parent1">
  <i class="fa fa-times"></i>This won't work
</div>
<div class="parent2">
  <i class="fa fa-times"></i>This works
</div>

CSS

.parent1,
.parent1 > i{
  font-family: 'Open Sans', sans-serif;
}

.parent2{
  font-family: 'Open Sans', sans-serif;
}