2.0 - Font Definition

[stphnwlkr]

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.

[jhogue]

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 _uswds-theme-typography.scss need to be SCSS maps and that is not made clear, either. I am using Gatsby with PostCSS, and so it is really easy to hit a fatal error that blocks site rendering just by trying to see what happens when one variable gets tweaked.

[thisisdano]

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.

_uswds-theme-typography.scss is the primary settings file for type-related settings. Per the comments in that file, USWDS already has the following faces defined:

'georgia'
'helvetica'
'merriweather'
'open-sans'
'public-sans'
'roboto-mono'
'source-sans-pro'
'system'
'tahoma'
'verdana'

You could use any of these font tokens as the values for the Fonts in use variables. These are the current defaults:

$theme-font-mono:   'roboto-mono';
$theme-font-sans:   'source-sans-pro';
$theme-font-serif:  'merriweather';
$theme-font-cond:   false;

But you could change the values to anything from the supported list, like:

$theme-font-mono:   'roboto-mono';
$theme-font-sans:   'open-sans';
$theme-font-serif:  'georgia';
$theme-font-cond:   false;

Now — say you have a custom face you want to use with USWDS. This is where the $theme-font-definitions map comes into play. You would create a new custom font for the system by uncommenting and entering its data into the $theme-font-definitions map. For example, I'll create a custom font map for a font called Example Sans whose font files live in /fonts/custom/example-sans/

In _uswds-theme-general:

$theme-font-path:   '../fonts';

In _uswds-theme-typography:

$theme-font-definitions: (
  example-sans: (
    name: 'Example Sans',
    dir: 'custom/example-sans', 
    stack: $font-stack-system,
    system-font: false,
    cap-height: '372px', // height of a 500px `N` in Sketch
    variable-font: false,
    generate: true,
    roman: (
      100: false
      200: false
      300: false
      400: 'ExampleSans-Normal',
      500: false
      600: 'ExampleSans-Bold',
      700: false
      800: false
      900: false
    ),
    italic: (
      100: false
      200: false
      300: false
      400: 'ExampleSans-Italic',
      500: false
      600: 'ExampleSans-BoldItalic',
      700: false
      800: false
      900: false
    ),
  ),
);

(In typing this, I realize I have to make the font-stack options findable!)

Anyhow, now you can use example-sans as a token passed to $theme-font-sans:

$theme-font-sans:   'example-sans';

And the system should now use your custom font anywhere it's instructed to use the sans font. You could use it in custom Sass as follows (per https://v2.designsystem.digital.gov/design-tokens/typesetting/overview/):

.my-card-heading {
  @include u-font('sans', 'lg');
}

or 

.my-card-heading {
  font-family: family('sans');
  font-size: size('sans', 'lg');
}

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).

[jhogue]

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 Type scale tokens to modify Headings type scale, for example, but saw no change in the CSS output.

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.

[thisisdano]

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!

[thisisdano]

Custom stacks and better, more reliable custom font settings coming in #2919

[jeremyzilar]

This was a helpful example that would be great to have on the website

[jeremyzilar]

Though I am not sure what stack: $font-stack-system, is.