Add guidance on changing the font and colours

[joelanman]

Suggested content:

Setting your own font and colours

Set the font and colour variables in your Sass, before importing GOV.UK Frontend.

For example:

$govuk-font-family: "Source Sans Pro";

$govuk-brand-colour: #FF0000;

You can find the colour variable names on the colour page.

[joelanman]

We could add the page to Styles, and link to from Get Started.

We could add a block/comments to the Prototype Kit to help people put their overrides in the right place.

This guidance doesn't allow for changing font-weight. This can be achieved through override classes, but this seems a little inconsistent: font-family can be overridden through variables but the font-weight cannot. If we want to support it through white-labelling we could add a variable:

$govuk-heading-font-weight

However in the service I'm working on the font-weight changes for different heading levels. H1 is 100, h2 is 600, and so on. So we could add per size weighting variables:

$govuk-heading-xl-font-weight

$govuk-heading-l-font-weight

[dashouse]

Thanks Joe, there's a lot of things like this and is part of the ongoing consideration of content that's currently only in the Sass docs.

Font weight can be overridden using variables globally if you did something like $govuk-font-weight-bold: $govuk-font-weight-regular however I believe this will not affect the headings.

As you're dealing with very specific weights for those headings it would probably be worth creating ccs- prefixed modifiers using the govuk-font mixin? I think something like this should work?:

.ccs-heading-xl {
    @include govuk-font($weight: 100);
}

If you didn't need to change anything but weight maybe just a normal override with CSS?:

.ccs-heading-xl {
   font-weight: 100;
}

[joelanman]

@dashouse thanks yeh you could use overrride classes, but I think its just a little inconsistent that you can change the font-family in a variable (what I call the white-labelling approach) but not the font-weight. It's not a huge deal and I know this isn't your focus right now :)

[joelanman]

Hi just wondering whether just the text I wrote could be added to the Design System, in which case I don't think this would take weeks? Or do you think more needs to be done?

[joelanman]

adding to triage as it came up in a support request

[DevRCRun]

Potentially obvious question to someone more familiar with scss than I, but is it possible to set the font src to our own file? Using $govuk-font-family: "Arial"; in application.scss works fine, but unsure whether using our own woff files is even possible

[36degrees]

Hi,

It should work fine, but you'll need to include the font-face declaration in the Sass yourself.

You should then be able to set $govuk-font-family to reference the same font-family you use in the font-face declaration.

For example:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

$govuk-font-family: "Open Sans", "Arial";

@import "node_modules/govuk-frontend/govuk/all";

[joelanman]

had another support request that was resolved by this

[hannalaakso]

Just had a question on support about how to override the font, I directed the person asking here.

[EoinShaughnessy]

Suggested content:

Setting your own font and colours

Set the font and colour variables in your Sass, before importing GOV.UK Frontend.

For example:

$govuk-font-family: "Source Sans Pro";

$govuk-brand-colour: #FF0000;

You can find the colour variable names on the colour page.

We could add the page to Styles, and link to from Get Started.

The Styles section on the Design System site has 2 separate sections titled 'Colour' and 'Font'.

Is there a case for splitting up the suggested content accordingly? So, somewhere in the 'Font' section, we'd have "Set the font variable in your Sass..." and so on.

Or does it make more sense to keep this content together (if users would be setting both variables at roughly the same time)?

[lfdebrux]

Is there still a user need for this? I a little curious to know who's doing this...

[DevRCRun]

We did it as a local authority who (as I understood it at the time - scream at me if I'm wrong) aren't permitted to use the transport font on something.localauthority.gov.uk

At the time the use case of stripping out this and any crown images when using the NPM module wasn't really covered in the frontend "get-started" docs (perhaps fairly enough) in a way we could comprehend (we were new to Sass at the time and aren't exactly experts with the API now).

Fwiw, for our admittedly non-core use case, I'd imagine it makes sense to have them together (corporate branding and all that).

[abbott567]

Just wondering if there is a recommended fallback or alternative for Transport?

Obviously for services not on GOVUK, Transport is not an option. But I usually see the fall backs noted as Arial, Helvetica or Open Sans, but they all have the same issue with the uppercase i and lowercase L looking identical. It can make words like illness look particularly weird whereas transport handles them quite nicely with the spurs on the L.

I feel like from a legibility / accessibility point of view, there should probably be a consistent nominated fallback recommended which handles it as elegantly as Transport, given that the whole reason Transport exists is to be as legible as possible. Something like Source Sans Pro or PT Sans handle the L and the i well, but the capital G is quite a bit different. But there probably are closer alternatives if we look hard enough.

[joelanman]

@lfdebrux anyone who'd like to use Frontend but can't use the GOV.UK brand and colours - local gov, internal systems, and so on, needs to do this

[36degrees]

Just wondering if there is a recommended fallback or alternative for Transport?

@abbott567 would you mind raising this comment as a new issue? I can see why you've posted it here – it's definitely related – but feels like a distinct thing to me.

[oshawa-connection]

+ 1 for @EoinShaughnessy 's suggestion, potentially it could be something to add to/ link to from
this page.

Luckily I stumbled upon this issue from my google search or else I would have been in trouble. Please please please add it!