Terms of Use

Please read this before downloading and installing Fidelity Font Software.

The Font Software is proprietary to FMR LLC and shall not be reproduced, copied in whole or in part, adapted, modified, or disseminated. Neither is it allowed to make any changes to the Font Software, including but not limited to adding, deleting, modifying or in any other way changing or tampering source code, metadata or copyright notices in the Font Software.

The fonts and relevant software may not be passed on to any third party, except for authorized Fidelity business.

By installing, downloading, or using the Fidelity Font Software, you confirm that you have read, understood, and agreed to the terms of usage.

Usage

Follow these instructions to include the fonts in your applications

Installing Fontface Observer

Option 1: Include the File

download the Font Face Observer script.

Option 2: Use NPM

install the Font Face Observer script using:

$ npm install --save fontfaceobserver

Option 3: Use Bower

install the Font Face Observer script using:

$ bower install fontfaceobserver

Including Fontface Observer

Option 1: Using <script> tags

add the script reference to the end of your <body> tag:

<body>
  ...
  <script src="pathtofile/fontfaceobserver.js"></script>
</body>

Option 2: Using browserify

require the external script you loaded via npm:

var FontFaceObserver = require( 'fontfaceobserver' );

Option 3: Using bower

add the script you loaded via bower at the end of your <body> tag:

<body>
  ...
  <script src="bower_components/pathtofile/fontfaceobserver.js"></script>
</body>

Including Fidelity Sans

load the fonts by placing the following function the end of your <body> tag, below where you included Fontface Observer inside its own script tag:


(function() {
  if (document.documentElement.classList.contains('webfont-loaded')) {
    return;
  };
  var fidelitySansBold = new FontFaceObserver('Fidelity Sans Bold'),
    fidelitySansBoldItalic = new FontFaceObserver('Fidelity Sans Bold Italic'),
    fidelityExtraBold = new FontFaceObserver('Fidelity Sans Extra Bold'),
    fidelitySansItalic = new FontFaceObserver('Fidelity Sans Italic'),
    fidelitySansLight = new FontFaceObserver('Fidelity Sans Light'),
    fidelitySansLightItalic = new FontFaceObserver('Fidelity Sans Light Italic'),
    fidelitySansRegular = new FontFaceObserver('Fidelity Sans Regular'),
    fidelitySansUltraLight = new FontFaceObserver('Fidelity Sans Ultra Light'),
    fidelitySansCondensedMedium = new FontFaceObserver('Fidelity Sans Condensed Medium');
    fidelitySansDemibold = new FontFaceObserver('Fidelity Sans Demibold');

  Promise.all([
    fidelitySansBold.load(),
    fidelitySansBoldItalic.load(),
    fidelityExtraBold.load(),
    fidelitySansItalic.load(),
    fidelitySansLight.load(),
    fidelitySansLightItalic.load(),
    fidelitySansRegular.load(),
    fidelitySansUltraLight.load(),
    fidelitySansCondensedMedium.load()
    fidelitySansDemibold.load()
  ]).then(
    function() {
      document.documentElement.classList.add('webfont-loaded');
    },
    function() {
      console.info('Web fonts could not be loaded in time. Falling back to system fonts.');
    }
  );
}());

Use @font-face to Include the Fonts

include the fonts by placing the following at the end of your <head> tag inside its own style tag:


@font-face {
  font-family:'Fidelity Sans';
  src:url(https://assets.fidelity.com/fonts/FidelitySans-Regular.woff2) format("woff2"),url(https://assets.fidelity.com/fonts/FidelitySans-Regular.woff) format("woff");
}
@font-face {
  font-family:'Fidelity Sans Italic';
  src:url(https://assets.fidelity.com/fonts/FidelitySans-Italic.woff2) format("woff2"),url(https://assets.fidelity.com/fonts/FidelitySans-Italic.woff) format("woff");
}
@font-face {
  font-family:'Fidelity Sans Bold';
  src:url(https://assets.fidelity.com/fonts/FidelitySans-Bold.woff2) format("woff2"),url(https://assets.fidelity.com/fonts/FidelitySans-Bold.woff) format("woff");
}
@font-face {
  font-family:'Fidelity Sans Bold Italic';
  src:url(https://assets.fidelity.com/fonts/FidelitySans-BoldItalic.woff2) format("woff2"),url(https://assets.fidelity.com/fonts/FidelitySans-BoldItalic.woff) format("woff");
}
@font-face {
  font-family:'Fidelity Sans Extra Bold';
  src:url(https://assets.fidelity.com/fonts/FidelitySans-ExtraBold.woff2) format("woff2"),url(https://assets.fidelity.com/fonts/FidelitySans-ExtraBold.woff) format("woff");
}
@font-face {
  font-family:'Fidelity Sans Light';
  src:url(https://assets.fidelity.com/fonts/FidelitySans-Light.woff2) format("woff2"),url(https://assets.fidelity.com/fonts/FidelitySans-Light.woff) format("woff");
}
@font-face {
  font-family:'Fidelity Sans Light Italic';
  src:url(https://assets.fidelity.com/fonts/FidelitySans-LightItalic.woff2) format("woff2"),url(https://assets.fidelity.com/fonts/FidelitySans-LightItalic.woff) format("woff");
}
@font-face {
  font-family:'Fidelity Sans Ultra Light';
  src:url(https://assets.fidelity.com/fonts/FidelitySans-UltraLight.woff2) format("woff2"),url(https://assets.fidelity.com/fonts/FidelitySans-UltraLight.woff) format("woff");
}
@font-face {
  font-family:'Fidelity Sans Condensed Medium';
  src:url(https://assets.fidelity.com/fonts/FidelitySansCondensed-Medium.woff2) format("woff2"),url(https://dpcs-assets-fidelity-stage.dpcs.fmr.com/fonts/FidelitySansCondensed-Medium.woff) format("woff");
}
@font-face {
  font-family:'Fidelity Sans Demibold';
  src:url(https://assets.fidelity.com/fonts/FidelitySans-Demibold.woff2) format("woff2"),url(https://dpcs-assets-fidelity-stage.dpcs.fmr.com/fonts/FidelitySans-Demibold.woff) format("woff");
}

Referencing Fidelity Sans in your CSS

Option 1: Using plain CSS

add the following to your .css file:

body {
  font-family: arial, sans-serif;
}

.webfont-loaded body {
  font-family: 'Fidelity Sans', arial, sans-serif;
}

Option 2: Using Sass

add the following to your .scss file:

body {
  font-family: arial, sans-serif;

  .webfont-loaded & {
    font-family: 'Fidelity Sans', arial, sans-serif;
  }
}

Cacheing for Returning Visitors

change your <html> tag from:

<html lang="en">

to:

<!--#if expr="$HTTP_COOKIE=/webfont-loaded=true/" --> <html lang="en" class="webfont-loaded"> <!--#else --> <html lang="en"> <!--#endif -->