Add Custom Font to header

[DomVinyard]

One for @Mariam -

I really liked your font choice for the Header buttons from your Header PR - would you be able to move it across as a dedicated PR.

Could everybody review this carefully, especially if you've never used custom fonts before, it's a good skill to know 👍

Acceptance Criteria

• The custom font is applied to the Header buttons

[MariamM110]

Steps to add new font:

• Find the suitable font you want from any site (I used google fonts since its so much easier to use)
• copy the @import url('') and paste in the variables.scss file (it will be used globally across the site so its best to store it there)
• the font-family: should also be copied and pasted in the index.css file (it adds this new font to the whole of react which can then be referenced individually elsewhere)
• in the variables.scss file, you can create a variable however you wish and then reference the font-family specific to the font you want, in my case it was 'Tilt Warp', cursive;