title: Google Maps v3 FontAwesome5
body: <p>I am trying to create a googleMap that uses dynamic fontAwesome markers</p>
  
  <p>I can't seem to be able to set 'Font Awesome 5 Free' as the font to be used, though.</p>
  
  <p>I can set 'Fontawsome' which works, but is not a webfont (It's a .TTF installed in MY system)</p>
  
  <pre class="lang-js prettyprint-override"><code>      var marker0 = createMarker({
          position: new google.maps.LatLng(33.808678, -117.918921),
          map: map,
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: '#F00',
            fillOpacity: 1,
            strokeWeight: 0,
            scale: 15
          },
          label: {
            fontFamily: "FontAwesome",
            fontWeight: '900',
            text: eval("'\\u"+'f0ab'+"'"),
            color: 'white'
          }
          }, "&lt;h1&gt;Marker 0&lt;/h1&gt;&lt;p&gt;This is the home marker.&lt;/p&gt;");
      });
  </code></pre>
  
  
  
  <p>here's the jsfiddle: <a href="https://jsfiddle.net/robsilva/hxt5jcu5/" rel="nofollow noreferrer">https://jsfiddle.net/robsilva/hxt5jcu5/</a></p>
  
  <p>It looks like Google Maps is not applying the font-family property to the marker label that I created. The syntax, according to Google's docs, looks correct, but for some reason all style but that is not being applied. Here are some before and after screens where we manually placed that font-family  styling on the right element...</p>
  
  <p><a href="https://i.stack.imgur.com/vKKF1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vKKF1.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/Ng0Hs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ng0Hs.jpg" alt="enter image description here"></a></p>