Incorrect handling of local fonts
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:
-
In the
fontsuseMemo, local fonts are added to theactiveFontsarray without any distinction from Google Fonts. -
The
loadFontFromObjectfunction assumes all fonts are Google Fonts and attempts to create a link element to load them from Google's CDN.
Proposed solution:
-
Modify the
Fontinterface to include anisLocalboolean property. -
Update the
fontsuseMemo to setisLocal: truewhen adding local fonts to theactiveFontsarray. -
Modify the
loadFontFromObjectfunction 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.
-
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.
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!
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!