My react native site gives multiple mixed content warnings when loading over https using expo google fonts

Question

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 Mixed Content warnings over insecure fonts.

This is how I'm loading the fonts into my app...

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,
    });

This is the error I'm getting...

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.

I'm not sure how to fix this issue as there is no implicit reference to http that I can change to https.

Edit:

Problem solved thanks to Emanuele Scarabattoli

I changed the code above to

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';

These are the production imports. Thanks so much for the help!

Answer 1

The problem seems to be related to the @expo-google-fonts/dev package itself, in particular to this file:

https://github.com/expo/google-fonts/blob/master/font-packages/dev/index.js

As you can see all the fonts are loaded in HTTP and not in HTTPS.

You should consider to use the use @expo-google-fonts/inter instead:

https://github.com/expo/google-fonts#usage

Or consider to take a look here:

https://docs.expo.io/guides/using-custom-fonts/