Fix Usage of Rubik Font (#441)

* Replace ttf font with woff2 font * Ensure elements outside AppWrapper use Rubik * Update changelog * Replace otf format with woff2 and increase font weight
influxdata · Mar 6, 2020 · 1d635a5 · 1d635a5
1 parent e085fb0
commit 1d635a5
Show file tree

Hide file tree

Showing 17 changed files with 12 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 #### 2.0.1 (Unreleased)
 
+- [#441](https://github.com/influxdata/clockface/pull/441): Fix rendering of Rubik font by using `woff2` format instead of `ttf`
+
 ## 2.0 (aka Pendulum)
 
 - [#437](https://github.com/influxdata/clockface/pull/437): Introduce new color palette

diff --git a/src/Styles/Fonts/IBMPlexMono-Italic.otf b/src/Styles/Fonts/IBMPlexMono-Italic.otf
diff --git a/src/Styles/Fonts/IBMPlexMono-Medium.woff2 b/src/Styles/Fonts/IBMPlexMono-Medium.woff2
diff --git a/src/Styles/Fonts/IBMPlexMono-Regular.otf b/src/Styles/Fonts/IBMPlexMono-Regular.otf
diff --git a/src/Styles/Fonts/IBMPlexMono-SemiBold.woff2 b/src/Styles/Fonts/IBMPlexMono-SemiBold.woff2
diff --git a/src/Styles/Fonts/Rubik-Black.ttf b/src/Styles/Fonts/Rubik-Black.ttf
diff --git a/src/Styles/Fonts/Rubik-Black.woff2 b/src/Styles/Fonts/Rubik-Black.woff2
diff --git a/src/Styles/Fonts/Rubik-Bold.ttf b/src/Styles/Fonts/Rubik-Bold.ttf
diff --git a/src/Styles/Fonts/Rubik-Bold.woff2 b/src/Styles/Fonts/Rubik-Bold.woff2
diff --git a/src/Styles/Fonts/Rubik-Light.ttf b/src/Styles/Fonts/Rubik-Light.ttf
diff --git a/src/Styles/Fonts/Rubik-Light.woff2 b/src/Styles/Fonts/Rubik-Light.woff2
diff --git a/src/Styles/Fonts/Rubik-Medium.ttf b/src/Styles/Fonts/Rubik-Medium.ttf
diff --git a/src/Styles/Fonts/Rubik-Medium.woff2 b/src/Styles/Fonts/Rubik-Medium.woff2
diff --git a/src/Styles/Fonts/Rubik-Regular.ttf b/src/Styles/Fonts/Rubik-Regular.ttf
diff --git a/src/Styles/Fonts/Rubik-Regular.woff2 b/src/Styles/Fonts/Rubik-Regular.woff2
diff --git a/src/Styles/fonts.scss b/src/Styles/fonts.scss
@@ -2,41 +2,41 @@
   font-family: 'Rubik';
   font-style: normal;
   font-weight: 300;
-  src: url('./Fonts/Rubik-Light.ttf') format('ttf');
+  src: url('./Fonts/Rubik-Light.woff2') format('woff2');
 }
 @font-face {
   font-family: 'Rubik';
   font-style: normal;
   font-weight: 400;
-  src: url('./Fonts/Rubik-Regular.ttf') format('ttf');
+  src: url('./Fonts/Rubik-Regular.woff2') format('woff2');
 }
 @font-face {
   font-family: 'Rubik';
   font-style: normal;
   font-weight: 500;
-  src: url('./Fonts/Rubik-Medium.ttf') format('ttf');
+  src: url('./Fonts/Rubik-Medium.woff2') format('woff2');
 }
 @font-face {
   font-family: 'Rubik';
   font-style: normal;
   font-weight: 700;
-  src: url('./Fonts/Rubik-Bold.ttf') format('ttf');
+  src: url('./Fonts/Rubik-Bold.woff2') format('woff2');
 }
 @font-face {
   font-family: 'Rubik';
   font-style: normal;
   font-weight: 900;
-  src: url('./Fonts/Rubik-Black.ttf') format('ttf');
+  src: url('./Fonts/Rubik-Black.woff2') format('woff2');
 }
 @font-face {
   font-family: 'IBMPlexMono';
   font-style: normal;
-  font-weight: 400;
-  src: url('./Fonts/IBMPlexMono-Regular.otf') format('otf');
+  font-weight: 500;
+  src: url('./Fonts/IBMPlexMono-Medium.woff2') format('woff2');
 }
 @font-face {
   font-family: 'IBMPlexMono';
   font-style: italic;
-  font-weight: 400;
-  src: url('./Fonts/IBMPlexMono-Italic.otf') format('otf');
+  font-weight: 600;
+  src: url('./Fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
 }
diff --git a/src/Styles/reset.scss b/src/Styles/reset.scss
@@ -16,6 +16,7 @@ html, body {
 }
 
 body {
+  font-family: 'Rubik', Helvetica, Arial, Tahoma, Verdana, sans-serif;
   padding: 0;
   width: 100%;
   height: 100%;