New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
2.0 - Font Definition #2858
Comments
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. Variables in |
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
In
(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. |
Thanks for the update @jhogue. I'm going to give the whole process a serious scrubbing and hopefully when you come back to it it'll work as expected and have some better docs! |
Custom stacks and better, more reliable custom font settings coming in #2919 |
This was a helpful example that would be great to have on the website |
Though I am not sure what |
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.
The text was updated successfully, but these errors were encountered: