Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Set $govuk-font-family to a different font stack before importing govuk-frontend to override the font stack #90

Closed
bsaadat opened this issue Apr 28, 2020 · 3 comments · Fixed by #120
Closed

Set $govuk-font-family to a different font stack before importing govuk-frontend to override the font stack #90

bsaadat opened this issue Apr 28, 2020 · 3 comments · Fixed by #120
Assignees
@xenatisch @MikeCoats
Labels
enhancement New feature or request

Comments

@bsaadat
Copy link

bsaadat commented Apr 28, 2020

Set $govuk-font-family to a different font stack before importing govuk-frontend to override the font stack
@bsaadat bsaadat created this issue from a note in Coronavirus dashboard (Awaiting development) Apr 28, 2020
@bsaadat
Copy link
Author

bsaadat commented Apr 28, 2020

Set $govuk-font-family to a different font stack before importing govuk-frontend to override the font stack

@bsaadat bsaadat added the enhancement New feature or request label Apr 28, 2020
MikeCoats added a commit to MikeCoats/coronavirus-dashboard that referenced this issue Apr 29, 2020
@MikeCoats
Move the font stack declaration
00ed435 
Issue: UKHSA-Internal#90
@MikeCoats
Copy link
Contributor

I've moved the font stack declaration from the body tag to the govuk-frontend variable, but this has shown up a couple of places where the govuk classes haven't been used on the text.

image

To make it more obvious, I changed the govuk font to an unreadable one,

-$govuk-font-family: "GDS Transport", Arial, sans-serif;
+$govuk-font-family: "Webdings";

So now, I'm going to fix any element that's still 'readable', to make sure the correct govuk classes have been applied. It looks like the BigNumber and PageTitle components are the culprits.

image

@MikeCoats
Copy link
Contributor

It looks like the charts' tooltips are also 'unstyled' by this change.

image

image

MikeCoats added a commit to MikeCoats/coronavirus-dashboard that referenced this issue Apr 29, 2020
@MikeCoats
Use design system classes for PageTitle.Subtitle
54def73 
This element ended-up being unstyled by moving the font stack from
body element to the govuk-frontend variable.

Issue: UKHSA-Internal#90
MikeCoats added a commit to MikeCoats/coronavirus-dashboard that referenced this issue Apr 29, 2020
@MikeCoats
Use design system classes for BigNumber.Subtext
12d76e4 
This element also ended-up being unstyled by moving the font stack from
body element to the govuk-frontend variable.

Issue: UKHSA-Internal#90
MikeCoats added a commit to MikeCoats/coronavirus-dashboard that referenced this issue Apr 29, 2020
@MikeCoats
Use design system classes for CategoricalBarChart
b295e3e 
These tooltips ended up being un-styled by moving the font stack from
body element to the govuk-frontend variable. This adds the govuk classes
to the tooltips and adds some element specific css overrides to restore
the colours and sizes.

Issue: UKHSA-Internal#90
MikeCoats added a commit to MikeCoats/coronavirus-dashboard that referenced this issue Apr 29, 2020
@MikeCoats
Use design system classes for StackedBarChart
8c590f5 
These tooltips ended up being un-styled by moving the font stack from
body element to the govuk-frontend variable. This adds the govuk classes
to the tooltips and adds some element specific css overrides to restore
the colours and sizes.

Issue: UKHSA-Internal#90
MikeCoats added a commit to MikeCoats/coronavirus-dashboard that referenced this issue Apr 29, 2020
@MikeCoats
Use design system classes for BarChart
5cfc5c7 
These tooltips ended up being un-styled by moving the font stack from
body element to the govuk-frontend variable. This adds the govuk classes
to the tooltips and adds some element specific css overrides to restore
the colours and sizes.

Issue: UKHSA-Internal#90
MikeCoats added a commit to MikeCoats/coronavirus-dashboard that referenced this issue Apr 29, 2020
@MikeCoats
Use design system classes for LineChart
a1bbc96 
These tooltips ended up being un-styled by moving the font stack from
body element to the govuk-frontend variable. This adds the govuk classes
to the tooltips and adds some element specific css overrides to restore
the colours and sizes.

Issue: UKHSA-Internal#90
MikeCoats added a commit to MikeCoats/coronavirus-dashboard that referenced this issue Apr 29, 2020
@MikeCoats
Move the font stack declaration
1d5f9ea 
Issue: UKHSA-Internal#90
MikeCoats added a commit to MikeCoats/coronavirus-dashboard that referenced this issue Apr 29, 2020
@MikeCoats
Use design system classes for PageTitle.Subtitle
0ca14a7 
This element ended-up being unstyled by moving the font stack from
body element to the govuk-frontend variable.

Issue: UKHSA-Internal#90
MikeCoats added a commit to MikeCoats/coronavirus-dashboard that referenced this issue Apr 29, 2020
@MikeCoats
Use design system classes for BigNumber.Subtext
0f90b8e 
This element also ended-up being unstyled by moving the font stack from
body element to the govuk-frontend variable.

Issue: UKHSA-Internal#90
MikeCoats added a commit to MikeCoats/coronavirus-dashboard that referenced this issue Apr 29, 2020
@MikeCoats
Use design system classes for CategoricalBarChart
80c39cd 
These tooltips ended up being un-styled by moving the font stack from
body element to the govuk-frontend variable. This adds the govuk classes
to the tooltips and adds some element specific css overrides to restore
the colours and sizes.

Issue: UKHSA-Internal#90
MikeCoats added a commit to MikeCoats/coronavirus-dashboard that referenced this issue Apr 29, 2020
@MikeCoats
Use design system classes for StackedBarChart
aa59dbe 
These tooltips ended up being un-styled by moving the font stack from
body element to the govuk-frontend variable. This adds the govuk classes
to the tooltips and adds some element specific css overrides to restore
the colours and sizes.

Issue: UKHSA-Internal#90
MikeCoats added a commit to MikeCoats/coronavirus-dashboard that referenced this issue Apr 29, 2020
@MikeCoats
Use design system classes for BarChart
6c4d633 
These tooltips ended up being un-styled by moving the font stack from
body element to the govuk-frontend variable. This adds the govuk classes
to the tooltips and adds some element specific css overrides to restore
the colours and sizes.

Issue: UKHSA-Internal#90
MikeCoats added a commit to MikeCoats/coronavirus-dashboard that referenced this issue Apr 29, 2020
@MikeCoats
Use design system classes for LineChart
0a5d5de 
These tooltips ended up being un-styled by moving the font stack from
body element to the govuk-frontend variable. This adds the govuk classes
to the tooltips and adds some element specific css overrides to restore
the colours and sizes.

Issue: UKHSA-Internal#90
@MikeCoats MikeCoats mentioned this issue Apr 29, 2020
Merged
xenatisch added a commit that referenced this issue Apr 30, 2020
@xenatisch
Merge pull request #120 from MikeCoats/feature/use-govuk-font-family
fefe2b7 
Use `$govuk-font-family` across the service (issue #90) - with thanks to @MikeCoats for the contribution. 

No conflict detected.
@xenatisch xenatisch mentioned this issue Apr 30, 2020
Merged
@GeraldMercieca GeraldMercieca removed this from Awaiting development in Coronavirus dashboard Apr 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@xenatisch xenatisch

@MikeCoats MikeCoats

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Use $govuk-font-family across the service MikeCoats/coronavirus-dashboard
3 participants
@xenatisch @bsaadat @MikeCoats