Join GitHub today
GitHub is home to over 36 million developers working together to host and review code, manage projects, and build software together.Sign up
2.0 - Font Definition #2858
Can you add the ability to change the font stack in the settings file? We have had users getting a strange font rendering when using the Public Sans + system stack, but no complaints since switching to the Public Sans + Helvetica stack (Windows machines). I am trying to not have to modify anything outside of the settings folder.
Also, in the _font_definition.scss there is a reference to open sans which I am guessing needs to be removed.
This would be really nice. I am working with a local non-profit who is interested in using this framework and I am having a really hard time customizing the font-families for a branded look. I understand that this system was not designed to do that, but the way I am using it (more like a designer/developer would use Bootstrap) feels messy. All the declarations for fonts need to be overridden with my custom style sheet that loads after the USWDS loads, and that feels super hacky.
OK — I'm getting started on this issue now, and I could see the need for a custom stack (or to reassign a face to an existing stack).
As far as custom fonts go — there is a way to do this and the system is designed to accommodate custom fonts. Using USWDS with Gatsby and PostCSS should be a great combo and I want to make sure it works as well as I'd hope it would.
You could use any of these font tokens as the values for the
But you could change the values to anything from the supported list, like:
Now — say you have a custom face you want to use with USWDS. This is where the
(In typing this, I realize I have to make the font-stack options findable!)
Anyhow, now you can use
And the system should now use your custom font anywhere it's instructed to use the
Right now, I'm going to work to make sure all the supported faces perform as intended (I see as I type all this out that there are issues...) and that there's documentation that's more clear as to how you do this somewhat complicated custom font stuff (at least as comments in the code).
Thanks for this write up. I did eventually figure out everything you mentioned, but I would hit a snag with the processing of it all. The customization that I did never came through to the final style sheets. I loaded all the custom theme files first, and then the rest of the framework. I used values from the
I had to move on and ditch the framework for the project I was working on had a very short turnaround, but the client will want me to come back to it at some point. I look forward to seeing what you come up with. Thanks again.