nuxt / fonts

Plug-and-play web font optimization and configuration for Nuxt apps.
https://nuxt.com
MIT License
370 stars 4 forks source link

feat: googleicons provider #133

Open qwerzl opened 3 weeks ago

qwerzl commented 3 weeks ago

This PR resolves #127, adds a new googleicons provider. One thing that's weird is that Google seems to return an invalid JSON in their https://fonts.google.com/metadata/icons endpoints (There are random characters on the first line). So the first line is ignored.

codecov-commenter commented 3 weeks ago

Codecov Report

Attention: Patch coverage is 66.43836% with 49 lines in your changes are missing coverage. Please review.

:exclamation: No coverage uploaded for pull request base (main@2745167). Click here to learn what that means.

Files Patch % Lines
playground/pages/providers/googleicons.vue 0.00% 45 Missing and 1 partial :warning:
src/providers/googleicons.ts 96.93% 3 Missing :warning:
Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #133 +/- ## ======================================= Coverage ? 63.55% ======================================= Files ? 43 Lines ? 2854 Branches ? 404 ======================================= Hits ? 1814 Misses ? 1013 Partials ? 27 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

AndersCV commented 3 weeks ago

@qwerzl That was quick! Would it be possible to also specificy custom values for the font variations. Currently it's set to opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200 but with the possibility to add our own values here we can substantially reduce the size of the file that is being requested. As an example this is our current font variations allowing for the smallest file size possible: :opsz,FILL@20,0..1

danielroe commented 3 weeks ago

@AndersCV Would there be a way to detect what you need without configuration, do you think? What does your usage look like?

AndersCV commented 3 weeks ago

@danielroe

Currently we're using the "@nuxtjs/google-fonts": "3.0.2", module to request our font files with this config in our nuxt.config.ts

googleFonts: {
    display: 'swap',
    families: {
      'Material Symbols Rounded:opsz,FILL@20,0..1': true,
    },
  },

In our case we have a simple <Icon> component that accepts only one prop which is "fill: 0 | 1" because our design makes use of icons with both fill: 0 and fill: 1.

This is purposely done so we can request a font file that is as small in file size as possible, otherwise the whole material symbols font file can be several MBs which is not great. Ideally we would like to reduce the file size further by somehow only including the nessecary icons, but I think thats beyond my expertise. I think our current file size comes down to 440~kb.

Detecting this without some form of configuration I don't think is possible as the font-family is applied inside our custom component.

qwerzl commented 3 weeks ago

I guess the first thing we should do is to support setting variable weight ranges. Currently every variable font is defaulted to maximum weight ranges for every provider.