Update Clockface Fonts

.storybook/Story.scss

@@ -314,7 +314,7 @@ body.sb-show-main {
 
 .storybook-readme-story div.markdown-body {
   font-size: $docs-text-base;
-  font-family: 'Rubik', Helvetica, Arial, Tahoma, Verdana, sans-serif;
+  font-family: 'Proxima Nova', Helvetica, Arial, Tahoma, Verdana, sans-serif;
 
   a:link,
   a:visited,
@@ -438,7 +438,7 @@ body.sb-show-main {
   }
 
   code {
-    font-family: 'IBMPlexMono', monospace;
+    font-family: 'Roboto Mono', monospace;
     font-style: normal;
     text-shadow: none;
     font-weight: $cf-font-weight--medium;

.storybook/clockfaceTheme.js

@@ -15,8 +15,8 @@ export default create({
   appBorderRadius: 4,
 
   // Typography
-  fontBase: '"Roboto", sans-serif',
-  fontCode: '"RobotoMono", monospace',
+  fontBase: '"Proxima Nova", sans-serif',
+  fontCode: '"Roboto Mono", monospace',
 
   // Text colors
   textColor: '#545667',

.storybook/preview-head.html

@@ -1,3 +1,7 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500;600&display=swap" rel="stylesheet">
+
 <style>
   body.sb-show-main {
     position: unset;

.storybook/webpack.config.js

@@ -14,7 +14,7 @@ module.exports = ({config}) => {
       loader: 'url-loader?limit=10000&mimetype=application/font-woff',
     },
     {
-      test: /\.(eot|png|eot|ttf|svg)(\?[a-z0-9#=&.]+)$/,
+      test: /\.(eot|png|eot|ttf|svg|otf)(\?[a-z0-9#=&.]+)$/,
       use: [
         {
           loader: 'file-loader',
@@ -55,7 +55,8 @@ module.exports = ({config}) => {
     '.woff2',
     '.eot',
     '.ttf',
-    '.svg'
+    '.svg',
+    '.otf',
   )
 
   return config

src/Components/Page/PageTitle.tsx

@@ -34,7 +34,7 @@ export const PageTitle = forwardRef<PageTitleRef, PageTitleProps>(
         alt={altText}
         ref={ref}
         weight={FontWeight.Medium}
-        type={Typeface.Rubik}
+        type={Typeface.ProximaNova}
         style={style}
         testID={testID}
         element={HeadingElement.H1}

src/Components/Panel/Documentation/Panel.stories.tsx

@@ -629,7 +629,9 @@ panelExampleStories.add(
                   )
                 ]
               }
-              type={Typeface[select('type', mapEnumKeys(Typeface), 'Rubik')]}
+              type={
+                Typeface[select('type', mapEnumKeys(Typeface), 'ProximaNova')]
+              }
               weight={
                 FontWeight[select('weight', mapEnumKeys(FontWeight), 'Medium')]
               }

src/Components/Typography/Documentation/Heading.md

@@ -9,7 +9,7 @@ import {Heading, Typeface, HeadingElement, FontWeight} from '@influxdata/clockfa
 ```tsx
 <Heading
   element={HeadingElement.H1}
-  type={Typeface.Rubik}
+  type={Typeface.ProximaNova}
   weight={FontWeight.Bold}
   underline={false}
   selectable={true}

src/Components/Typography/Documentation/Heading.stories.tsx

@@ -54,7 +54,7 @@ headingStories.add(
               )
             ]
           }
-          type={Typeface[select('type', mapEnumKeys(Typeface), 'Rubik')]}
+          type={Typeface[select('type', mapEnumKeys(Typeface), 'ProximaNova')]}
           weight={
             FontWeight[select('weight', mapEnumKeys(FontWeight), 'Medium')]
           }

src/Components/Typography/Heading.tsx

@@ -39,7 +39,7 @@ export const Heading = forwardRef<HeadingRef, HeadingProps>(
       id,
       alt,
       weight = FontWeight.Medium,
-      type = Typeface.Rubik,
+      type = Typeface.ProximaNova,
       style,
       underline,
       testID = 'heading',
@@ -55,8 +55,8 @@ export const Heading = forwardRef<HeadingRef, HeadingProps>(
     const visualElement = appearance || element
 
     const headingClass = classnames('cf-heading', {
-      'cf-heading__standard': type === Typeface.Rubik,
-      'cf-heading__monospace': type === Typeface.IBMPlexMono,
+      'cf-heading__standard': type === Typeface.ProximaNova,
+      'cf-heading__monospace': type === Typeface.RobotoMono,
       [`cf-heading__${weight}`]: weight,
       'cf-heading__underline': underline,
       'cf-heading__selectable': selectable,

src/Styles/fonts.scss

@@ -1,42 +1,42 @@
 @font-face {
-  font-family: 'Rubik';
+  font-family: 'Proxima Nova';
   font-style: normal;
   font-weight: 300;
-  src: url('./Fonts/Rubik-Light.woff2') format('woff2');
+  src: url('./Fonts/ProximaNova-Light.otf') format('otf');
 }
 @font-face {
-  font-family: 'Rubik';
+  font-family: 'Proxima Nova';
   font-style: normal;
   font-weight: 400;
-  src: url('./Fonts/Rubik-Regular.woff2') format('woff2');
+  src: url('./Fonts/ProximaNova-Regular.otf') format('otf');
 }
 @font-face {
-  font-family: 'Rubik';
+  font-family: 'Proxima Nova';
   font-style: normal;
   font-weight: 500;
-  src: url('./Fonts/Rubik-Medium.woff2') format('woff2');
+  src: url('./Fonts/ProximaNova-Medium.otf') format('otf');
 }
 @font-face {
-  font-family: 'Rubik';
+  font-family: 'Proxima Nova';
   font-style: normal;
   font-weight: 700;
-  src: url('./Fonts/Rubik-Bold.woff2') format('woff2');
+  src: url('./Fonts/ProximaNova-Bold.otf') format('otf');
 }
 @font-face {
-  font-family: 'Rubik';
+  font-family: 'Proxima Nova';
   font-style: normal;
   font-weight: 900;
-  src: url('./Fonts/Rubik-Black.woff2') format('woff2');
+  src: url('./Fonts/ProximaNova-Black.otf') format('otf');
 }
 @font-face {
-  font-family: 'IBMPlexMono';
+  font-family: 'Roboto Mono';
   font-style: normal;
   font-weight: 500;
-  src: url('./Fonts/IBMPlexMono-Medium.woff2') format('woff2');
+  src: url('./Fonts/RobotoMono-Medium.ttf') format('ttf');
 }
 @font-face {
-  font-family: 'IBMPlexMono';
+  font-family: 'Roboto Mono';
   font-style: italic;
   font-weight: 600;
-  src: url('./Fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
+  src: url('./Fonts/RobotoMono-SemiBold.ttf') format('ttf');
 }

src/Styles/reset.scss

@@ -17,7 +17,7 @@ body {
 }
 
 body {
-  font-family: 'Rubik', Helvetica, Arial, Tahoma, Verdana, sans-serif;
+  font-family: 'Proxima Nova', Helvetica, Arial, Tahoma, Verdana, sans-serif;
   padding: 0;
   width: 100%;
   height: 100%;

src/Styles/variables.scss

@@ -149,14 +149,14 @@ $cf-radius-sm: $cf-radius - 1px;
    -----------------------------------------------------------------------------
 */
 
-$cf-header-font: 'Rubik', Helvetica, Arial, Tahoma, Verdana, sans-serif;
-$cf-text-font: 'Rubik', Helvetica, Arial, Tahoma, Verdana, sans-serif;
-$cf-code-font: 'IBMPlexMono', monospace;
+$cf-header-font: 'Proxima Nova', Helvetica, Arial, Tahoma, Verdana, sans-serif;
+$cf-text-font: 'Proxima Nova', Helvetica, Arial, Tahoma, Verdana, sans-serif;
+$cf-code-font: 'Roboto Mono', monospace;
 $cf-icon-font: 'icomoon';
 
 $cf-font-weight--light: 300;
 $cf-font-weight--regular: 400;
-$cf-font-weight--medium: 500;
+$cf-font-weight--medium: 600;
 $cf-font-weight--bold: 700;
 $cf-font-weight--black: 900;
 

src/Types/index.tsx

@@ -633,8 +633,8 @@ export enum LinkRel {
 }
 
 export enum Typeface {
-  IBMPlexMono = 'ibm-plex-mono',
-  Rubik = 'rubik',
+  RobotoMono = 'Roboto Mono',
+  ProximaNova = 'Proxima Nova',
 }
 
 export enum HeadingElement {