Page tree
Skip to end of metadata
Go to start of metadata

Foundry Sterling and Foundry Origin will be decommissioned on the 23rd of May 2018. If you have any queries, please email web-support@bath.ac.uk

Updating to Google's Noto Sans and Noto Serif

Noto is a typeface with a large family of fonts, offered for free under the SIL Open Source License by Google.

Digital are using Noto Sans and Noto Serif for Typecase and Typecase for Courses, to replace the paid subscription to Fonts.com's Foundry Sterling and Foundry Origin. If you need help removing these fonts from your project, please see the instructions at the bottom.

CSS font stacks

Font stack fallbacks are put in place to mitigate font rendering failures in the unlikely event that Google's servers go down. The fallback typefaces are web safe, and should be available on all Windows and Apple machines.

Sans serif
font-family: 'Noto Sans', 'Trebuchet MS', sans-serif;
Serif
font-family: 'Noto Serif', Georgia, serif;

Sass variables

In Lens and Origins, we use Sass variables to declare reusable information in a universal file. This is where we declare the font stack. Depending on your set up, it might be effective to use a variable so that you only need to declare the font stack once.

Lens
$typeface-sans: 'Noto Sans', 'Trebuchet MS', sans-serif;
Origins
$typeface-sans: 'Noto Sans', 'Trebuchet MS', sans-serif;
$typeface-serif: 'Noto Serif', Georgia, serif;

Google fonts import 

To activate the font family CSS, the import code must be added to the <head> above the reference to your CSS. See placement screenshot below:

Sans serif
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&amp;subset=cyrillic,latin-ext" rel="stylesheet">
Sans serif and serif
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i|Noto+Serif:400,400i,700,700i&amp;subset=cyrillic,latin-ext" rel="stylesheet">

Internet Explorer bug workaround

Please check if your project contains the propery font-feature-settings.

This property needs to be removed from your stylesheets, due to a bug in Internet Explorer (more information is available on caniuse.com (known issues) and stackoverflow)

Please note: only the non-prefixed property needs to be removed.

Acceptable font-feature-settings example:

  -webkit-font-feature-settings: 'kern';
  -moz-font-feature-settings: 'kern';
  -moz-font-feature-settings: 'kern=1';
  -o-font-feature-settings: 'kern';

Removing Foundry Sterling and Foundry Origin

Font weight warning

Google Noto has significantly fewer font weight options than Foundry Sterling and Foundry Origin.
The browser will calculate the appropriate font weight itself, however we advise that you review and update each declaration manually to avoid visual oddities.
Both Noto Sans and Noto Serif have the following font weights:

  • Regular Normal (400)
  • Regular Italic (400i)
  • Bold Normal (700)
  • Bold Italic (700i)

Fonts.com reference

You will need to remove this reference from your projects <head>, you can directly replace this with the Google Noto reference.

<link type="text/css" rel="stylesheet" href="//fast.fonts.net/cssapi/dbfd9433-29bc-431a-afa8-a827defecacf.css"/>

Updating your CSS

You will need to replace your references to Foundry Sterling and Foundry Origin with the Google Noto font stack above, this is the kind of code you should be replacing

Sans serif
font-family: 'Foundry Sterling OT3 W03', 'Corbel', 'Helvetica Neue', sans-serif;
Serif
font-family: 'Foundry Origin W03', Georgia, serif;
  • No labels