Skip to content
This repository has been archived by the owner on Aug 13, 2023. It is now read-only.

Font families #1516

Merged
merged 16 commits into from
Jul 31, 2019
Merged

Font families #1516

merged 16 commits into from
Jul 31, 2019

Conversation

sareh
Copy link
Contributor

@sareh sareh commented Jul 29, 2019

Resolves #735

Overall change: Creates font-family stacks for all services. Renames Nassim font families to BBC Nassim Arabic etc. for clarity and consistency. Updates sansItalic to sansRegularItalic

Code changes:

  • Adds font-family definitions to @bbc/psammead-styles/font-families
  • Adds font-face declarations for the fonts that will be embedded to @bbc/psammead-styles/fonts
  • Changed sansItalic to sansRegularItalic due to UX feedback - this is a breaking change.

  • I have assigned myself to this PR and the corresponding issues
  • Tests added for new features
  • Test engineer approval

@sareh sareh self-assigned this Jul 29, 2019
@sareh sareh marked this pull request as ready for review July 29, 2019 15:10
@laurapsn
Copy link

@sareh I've checked the stacks against UX documentation, it's all looking good. Thanks!

const nassimArabicFontFamily = `font-family: "BBC Nassim Arabic", Arial, Verdana, Geneva, Helvetica, sans-serif;`;
const nassimPashtoFontFamily = `font-family: "BBC Nassim Pashto", Arial, Verdana, Geneva, Helvetica, sans-serif;`;
const nassimPersianFontFamily = `font-family: "BBC Nassim Persian", Arial, Verdana, Geneva, Helvetica, sans-serif;`;
const nassimUrduFontFamily = `font-family: "BBC Nassim Urdu", Arial, Verdana, Geneva, Helvetica, sans-serif;`;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will we have to rename all these when/if we get Reith for Arabic-script sites?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll delete all of the Nassim section in this file and create a ReithArabic section below the ReithLatin section. The exports at the bottom of the page for arabic, pashto, persian, urdu will be the same.


const baseUrlShonarBangla =
'https://ws-downloads.files.bbci.co.uk/fonts/ShonarBangla/v5.91/';

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be worth DRYing up the hostname for maintenance purposes?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd prefer not to, since this way it's really easy to copy the url in your browser to check it works as expected with the relevant font file name.

@david-boydell
Copy link

Hi @sareh ,

The only question I have on this is the declaration for "Noto Sans Ethiopic".

On live (e.g. https://www.bbc.com/amharic) and in the spreadsheet it is declared as ""NotoSansEthiopic" - no spaces.

I know that some work has been done to the fonts recently so the space characters may now be valid, but I just thought I'd check. I tried to download the font file to do more investigation but got Access Denied.

Cheers
David

@sareh
Copy link
Contributor Author

sareh commented Jul 31, 2019

@david-boydell Hi David - Noto Sans Ethiopic is a Google font - https://www.google.com/get/noto/#sans-ethi Its font family is written as "Noto Sans Ethiopic" - I will get someone with access to the reference spreadsheet to update that entry. Thanks for checking!

@david-boydell
Copy link

OK, cool thanks @sareh , this is ready for merge then.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
articles-current-epic high priority shared-components ws-articles Tasks for the WS Articles Team ws-home Tasks for the WS Home Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Create font-family stacks for all WS sites
9 participants