react-fontpicker icon indicating copy to clipboard operation
react-fontpicker copied to clipboard

Incorrect handling of local fonts

Open damentomassi opened this issue 1 year ago • 2 comments

The current implementation incorrectly processes local fonts through the Google Fonts API. This leads to attempts to load local fonts from Google's servers, which is not the intended behavior and will fail to load these fonts correctly.

Specifically:

  1. In the fonts useMemo, local fonts are added to the activeFonts array without any distinction from Google Fonts.

  2. The loadFontFromObject function assumes all fonts are Google Fonts and attempts to create a link element to load them from Google's CDN.

Proposed solution:

  1. Modify the Font interface to include an isLocal boolean property.

  2. Update the fonts useMemo to set isLocal: true when adding local fonts to the activeFonts array.

  3. Modify the loadFontFromObject function to handle local fonts differently:

    • For local fonts, implement a method to ensure the font is available (e.g., using @font-face rules if necessary).
    • Only create the Google Fonts link for non-local fonts.
  4. Review and update other functions that interact with fonts (e.g., autoLoadFont, font checking logic) to properly handle the distinction between local and Google Fonts.

This change will ensure that local fonts are correctly handled within the application and not mistakenly processed through the Google Fonts API.

damentomassi avatar Aug 01 '24 16:08 damentomassi

Great feedback, thank you!

Auto-loading isn't supported when using manually added (local) fonts. The docs definitely could've been clearer there. (Relevant section: https://ae9is.github.io/react-fontpicker/#manuallyadd)

But it totally makes sense to just allow autoLoad for the Google fonts at the same time as custom localFonts are specified. I'll fix this so the picker doesn't send bad requests!

ae9is avatar Aug 03 '24 09:08 ae9is

I'm not sure if I want to implement autoLoad for custom fonts myself though. The ability to add custom fonts is just legacy of vue-fontpicker, to keep things similar.

Contributions welcome there though!

ae9is avatar Aug 03 '24 09:08 ae9is