nuxt / fonts

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

Add support for font-stretch #112

Closed Applelo closed 2 weeks ago

Applelo commented 1 month ago

Hi, this is the module I was waiting the most for nuxt especially the preload links injection and to handle fonts easilly. I am facing one issue, I am working on a current project using the famous Helvetica Neue Pro fonts. The problem is I am using the Extented version of the font and so I use the css property font-stretch: expanded;. Is it possible to add the support of font-stretch and have the same replica of what I have currenlty: I don't want to change my font-weight/font-family/font-stretch since the project is soon ready to be deployed.

My current font face:

@font-face {
 font-family: 'Helvetica Neue';
 src: url('/fonts/HelveticaNeue-Roman.woff2') format('woff2');
 font-weight: 400;
 font-style: normal;
 font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeue-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
 }

// Expanded/Extended

@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeue-ExtendedOblique.woff2') format('woff2');
  font-weight: 400;
  font-stretch: expanded;
  font-style: italic;
  font-display: swap;
 }

@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeue-HeavyExtendedOblique.woff2') format('woff2');
  font-weight: 900;
  font-stretch: expanded;
  font-style: italic;
  font-display: swap;
 }
qwerzl commented 1 month ago

I would recommend adding "Extended" to the font family name or using a variable font because that's how our other providers (eg. google) do.