How do I fix font-stretch property to start working-CodePudding

font-stretch property doesn't work at all. Here is my code:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-stretch</title>
  <style>
   p {
    font-size: 5em;
    font-family: 'Myriad Pro';
   }
  </style>
 </head>
 <body>
  <p>
   <span style="font-stretch: ultra-condensed">P</span>
   <span style="font-stretch: extra-condensed">P</span>
   <span style="font-stretch: condensed">P</span>
   <span style="font-stretch: semi-condensed">P</span>
   <span style="font-stretch: normal">P</span>
   <span style="font-stretch: semi-expanded">P</span>
   <span style="font-stretch: expanded">P</span>
   <span style="font-stretch: extra-expanded">P</span>
   <span style="font-stretch: ultra-expanded">P</span>
  </p>
 </body>
</html>

I've tried many other fonts and problem still exists. Please help

CodePudding user response：

Google font's UI is currently still preferring a static/single-weight css output.

But you can manually force the API to output variable font @font-face rules:

https://fonts.googleapis.com/css2?family=Inconsolata:wdth,[email protected],200..900

It's important to use '..' as a range delimiter – otherwise you'll get a css containing several static woff2 file urls.

Besides, google's API uses some user agent detection (... browser sniffing) to provide backwards compatibility (for browsers that don't support variable fonts).
Unfortunately, this doesn't work very well: some Browsers like Opera (flawlessly supporting VF) will also receive static fonts.

As a workaround I recommend, to open the above css URL in firefox. The result should look something like this:

@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 50% 200%;
  src: url(https://fonts.gstatic.com/s/inconsolata/v31/QldKNThLqRwH-OJ1UHjlKGlZ5qg.woff2) format('woff2');
}

Notice the font-weight and font-stretch property values containing 2 values for a range of weights/widths. This is a good indicator, you've retrieved the correct (variable) rules.

Example: Inconsolata variable

@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 50% 200%;
  src: url(https://fonts.gstatic.com/s/inconsolata/v31/QldKNThLqRwH-OJ1UHjlKGlZ5qg.woff2) format('woff2');
}

body {
  font-size: 36px
}

p {
  font-family: Inconsolata;
  transition: 0.3s
}

<p style="font-family:sans-serif; font-size:12px">Font-stretch: <input type="range" id="fontWeight" value="50" min="50" max="200" step="5"></p>
<p id="variableTest" style="font-stretch:50%" >Hamburgefons</p>

<p>
  <span style="font-stretch: ultra-condensed">P</span>
  <span style="font-stretch: extra-condensed">P</span>
  <span style="font-stretch: condensed">P</span>
  <span style="font-stretch: semi-condensed">P</span>
  <span style="font-stretch: normal">P</span>
  <span style="font-stretch: semi-expanded">P</span>
  <span style="font-stretch: expanded">P</span>
  <span style="font-stretch: extra-expanded">P</span>
  <span style="font-stretch: ultra-expanded">P</span>
</p>


<script>
  fontWeight.addEventListener('change', (e) => {
    variableTest.style.fontStretch = e.currentTarget.value   '%';
  })
</script>

CodePudding user response：

You can use font-stretch to select a condensed or expanded face from such fonts. If the font you are using does not offer condensed or expanded faces, this property has no effect.