Font loading issue

[gjones604]

I'm not sure if this is a problem with font-picker-react or just my implementation of it. My app has two font pickers and the user can pick a font and save their selection without any issues. The problem is with trying to load the user's chosen font into FontPicker after they've navigated elsewhere on the app and returned to where the FontPicker is.

The error message that says Uncaught Error: Cannot update active font: "XXXXXXXXX" is not in the font list. This happens about 9 times out of 10 no matter which font is selected.

In my functional react component I'm checking for the activeHeaderFontFamily prop (a string) then setting it into state.

const MyComponent = props => {
    const [activeHeaderFontFamily, setActiveHeaderFontFamily] = useState("");

    useEffect(() => {
        if (props.activeHeaderFontFamily) {
            setActiveHeaderFontFamily(props.activeHeaderFontFamily);
        }
    }, [props]);
    // more code...

And here's how I'm using FontPicker. I pass in the activeFontFamily value directly from state with a fallback to Open Sans.

<FontPicker
    apiKey="XXXXXXXXX"
    activeFontFamily={activeHeaderFontFamily || "Open Sans"}
    limit="300"
    pickerId="header"
    onChange={(nextFont) => setActiveHeaderFontFamily(nextFont.family)}
/>

[gjones604]

Resolved by implementing FontFaceObserver as demonstrated here: #38