title: My react native site gives multiple mixed content warnings when loading over https using expo google fonts
body: <p>I am developing a site that is coded with React Native. I decided to use some Google fonts as they are easy to implement. Everything worked fine until I started using Traefik as a reverse proxy to my site and I decided to make it secure with https. The only problem is that now when it loads it throws 15 <strong>Mixed Content</strong> warnings over insecure fonts.</p>
  <p>This is how I'm loading the fonts into my app...</p>
  <pre><code>import {
      useFonts,
      Pacifico_400Regular,
      ComicNeue_400Regular,
      JosefinSans_400Regular,
      BalsamiqSans_400Regular,
      Inconsolata_400Regular,
  } from '@expo-google-fonts/dev';
  import { AppLoading } from 'expo';
  
  function BodyText(props) {
      let [fontsLoaded] = useFonts({
          Pacifico_400Regular,
          ComicNeue_400Regular,
          JosefinSans_400Regular,
          BalsamiqSans_400Regular,
          Inconsolata_400Regular,
      });
  </code></pre>
  <p>This is the error I'm getting...</p>
  <p><em>Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure font ''. This request has been blocked; the content must be served over HTTPS.</em></p>
  <p>I'm not sure how to fix this issue as there is no implicit reference to <strong>http</strong> that I can change to <strong>https</strong>.</p>
  <p>Edit:</p>
  <p>Problem solved thanks to <em>Emanuele Scarabattoli</em></p>
  <p>I changed the code above to</p>
  <pre><code>import { useFonts, Pacifico_400Regular } from '@expo-google-fonts/pacifico';
  import { ComicNeue_400Regular } from '@expo-google-fonts/comic-neue';
  import { JosefinSans_400Regular } from '@expo-google-fonts/josefin-sans';
  import { BalsamiqSans_400Regular } from '@expo-google-fonts/balsamiq-sans';
  import { Inconsolata_400Regular } from '@expo-google-fonts/inconsolata';
  </code></pre>
  <p>These are the production imports.
  Thanks so much for the help!</p>