GithubHelp home page GithubHelp logo

Comments (6)

kenmcd avatar kenmcd commented on September 28, 2024

When variable fonts are not supported in the application (such as LibreOffice) the correct thing to do (per the OpenType specs) is to display the default master.
In Public Sans the default master is Thin.
So that is what you see.
Nothing wrong with the variable font.

LibreOffice users should use the static fonts.

from public-sans.

fwextensions avatar fwextensions commented on September 28, 2024

@kenmcd does Chrome on Windows not support variable fonts? I'm trying to use Public Sans with the Fontsource npm package and Gatsby, and Chrome reports the rendered font as Public Sans Thin even when the text is bold:

image

This is the first time I'm trying to do much with custom web fonts, so I could be including it incorrectly. I'm using import "@fontsource/public-sans"; in the gatsby-browser.js file, which seems to be the recommended way.

In any case, it was surprising to see the Thin variant being reported in Chrome when the weight was 700, which is how I ended up down this rabbit hole.

from public-sans.

kenmcd avatar kenmcd commented on September 28, 2024

@kenmcd does Chrome on Windows not support variable fonts?

Yes, Chrome on Windows does support variable fonts.
You can test Public Sans Variable in any Chromium-based browser here:
https://fonts.google.com/specimen/Public+Sans#type-tester

If I were you I would first use a very simple local test and get that working.
Then try to use some more complicated system later.

from public-sans.

fwextensions avatar fwextensions commented on September 28, 2024

Inspecting the rendered fonts on (most of) that Google Fonts page also shows Public Sans Thin. But I noticed that the table of glyphs at the bottom shows Public Sans. The difference seems to be that most of the text is styled with font-family: "Public Sans script=latin rev=1", but the latter uses "Public Sans script=all rev=1". (And on macOS Chrome, it's using "Public Sans script=all rev=2", while changing it to rev=1 defaults to Times.)

In the section showing the different weight samples ("Public Sans Medium", "Public Sans Bold", etc.), changing the script to all does show the rendered fonts as Public Sans, but causes the bolder samples to lose most of their weight. They become the same width as regular, but are slightly heavier.

From this comment:

When variable fonts are not supported in the application (such as LibreOffice) the correct thing to do (per the OpenType specs) is to display the default master.
In Public Sans the default master is Thin.

I was expecting that an app that does support variable fonts would therefore show the "correct" font name when it's displaying the "regular" weight, presumably Public Sans. So either Chrome doesn't correctly support variable fonts, or the fonts applied to different scripts have different names, or... something else.

from public-sans.

kenmcd avatar kenmcd commented on September 28, 2024

From this comment:

When variable fonts are not supported in the application (such as LibreOffice) the correct thing to do (per the OpenType specs) is to display the default master.
In Public Sans the default master is Thin.

I was expecting that an app that does support variable fonts would therefore show the "correct" font name when it's displaying the "regular" weight, presumably Public Sans. So either Chrome doesn't correctly support variable fonts, or the fonts applied to different scripts have different names, or... something else.

That is a different situation with desktop fonts, in a desktop application.
Which is what was discussed in the link in the first post above.

There may be an issue with the variable fonts used on the demo page.
The current version there is v1.007.
Public Sans is in the process of being updated on Google Fonts.
google/fonts#4656
That version has some changes and fixes in it.
That version is not yet live on Google Fonts (should be in a few days).

To test you should get the most recent fonts, and again, test locally first.
Get the most recent release, v2.001, here:
https://github.com/uswds/public-sans/releases
If that works then wait for the online fonts to update (which takes awhile).

If you cannot get local fonts to work, I do not know what you can do.
I test online variable fonts on Vivaldi (chromium-based) all the time.

from public-sans.

fwextensions avatar fwextensions commented on September 28, 2024

It looks like the local fonts included with the @fontsource npm package are v1.007, and were just downloaded from Google Fonts. That explains why I was seeing the same behavior on my site and GF.

Thanks for the detailed explanations! BTW, the v.2001 release .zip file includes __MACOSX and .DS_Store folders, in case that matters.

from public-sans.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.