[IOAPPX-352] Add the new IO typeface

.storybook/main.ts

@@ -37,7 +37,7 @@ const config: StorybookConfig = {
   staticDirs: [
     "../example/assets/css",
     "../example/assets/fonts/TitilliumSansPro",
-    "../example/assets/fonts/ReadexPro",
+    "../example/assets/fonts/Titillio",
     "../example/assets/fonts/DMMono",
     "../repo-assets",
     "../stories/assets"

.storybook/preview-head.html

@@ -2,7 +2,12 @@
 
 <!-- Pull in static files served from your Static directory or the internet -->
 <!-- Example: `main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts` directory inside your `public` directory -->
-<link rel="preload" href="ReadexPro-Regular.ttf" as="font" />
+<link rel="preload" href="Titillio-Thin.ttf" as="font" />
+<link rel="preload" href="Titillio-Light.ttf" as="font" />
+<link rel="preload" href="Titillio-Regular.ttf" as="font" />
+<link rel="preload" href="Titillio-Semibold.ttf" as="font" />
+<link rel="preload" href="Titillio-Bold.ttf" as="font" />
+<link rel="preload" href="Titillio-Black.ttf" as="font" />
 <link rel="preload" href="DMMono-Medium.ttf" as="font" />
 <link rel="preload" href="TitilliumSansPro-Black.otf" as="font" />
 <link rel="preload" href="TitilliumSansPro-BlackItalic.otf" as="font" />

example/android/link-assets-manifest.json

@@ -54,12 +54,68 @@
       "sha1": "6bb6bf0c5d7a7f50606cc276cc4ef1787f52a928"
     },
     {
-      "path": "assets/fonts/ReadexPro/ReadexPro-Regular.ttf",
-      "sha1": "93e4080794b725f216a94b57ed62a51bc77bce91"
+      "path": "assets/fonts/Titillio/Titillio-Black.otf",
+      "sha1": "ab71d06a0c7cbac0f069ad37758de4ffb6105b75"
     },
     {
-      "path": "assets/fonts/ReadexPro/ReadexPro-SemiBold.ttf",
-      "sha1": "b4ec28a6b1ba6ed730beb37f06b1b81c5e2163a3"
+      "path": "assets/fonts/Titillio/Titillio-BlackItalic.otf",
+      "sha1": "984c6762c6a4007dbaa4191450701dfe4b3c32e2"
+    },
+    {
+      "path": "assets/fonts/Titillio/Titillio-Bold.otf",
+      "sha1": "063279df70343ff1d64386422197b916c28fc46e"
+    },
+    {
+      "path": "assets/fonts/Titillio/Titillio-BoldItalic.otf",
+      "sha1": "0d4912434cd31bb17a79de5620a9002589184aa2"
+    },
+    {
+      "path": "assets/fonts/Titillio/Titillio-Extrablack.otf",
+      "sha1": "91bc736eb8911eeaf7e8c6af129fc6584b6a73e2"
+    },
+    {
+      "path": "assets/fonts/Titillio/Titillio-ExtrablackItalic.otf",
+      "sha1": "0949d60e776b7b776ffae8b42ed2c680d4e8e259"
+    },
+    {
+      "path": "assets/fonts/Titillio/Titillio-Extrabold.otf",
+      "sha1": "e2157b363c0dab2a12236aec75016d666dd2f099"
+    },
+    {
+      "path": "assets/fonts/Titillio/Titillio-ExtraboldItalic.otf",
+      "sha1": "0fb6f663dad1559230d754a885c56b3ae9e7633c"
+    },
+    {
+      "path": "assets/fonts/Titillio/Titillio-Light.otf",
+      "sha1": "75dff329af1d38450d73e2ffa42046c209ebeecd"
+    },
+    {
+      "path": "assets/fonts/Titillio/Titillio-LightItalic.otf",
+      "sha1": "3a896c3efe30713e424b4923f896794c02a731e4"
+    },
+    {
+      "path": "assets/fonts/Titillio/Titillio-Regular.otf",
+      "sha1": "2ef70364b63b023170e556be1c1142fd2f39c921"
+    },
+    {
+      "path": "assets/fonts/Titillio/Titillio-RegularItalic.otf",
+      "sha1": "076718292c7a43b4274b18057fe2149f24a2147c"
+    },
+    {
+      "path": "assets/fonts/Titillio/Titillio-Semibold.otf",
+      "sha1": "40ae4e6ceb0d41c48aea604d2755936d86dc704d"
+    },
+    {
+      "path": "assets/fonts/Titillio/Titillio-SemiboldItalic.otf",
+      "sha1": "6e0eb54a25d0cfc63113f2aefc9207381fa98a64"
+    },
+    {
+      "path": "assets/fonts/Titillio/Titillio-Thin.otf",
+      "sha1": "8a66b26e0f70dcb60f599726fd5ced68f18b8ae0"
+    },
+    {
+      "path": "assets/fonts/Titillio/Titillio-ThinItalic.otf",
+      "sha1": "9257e7b33a4e2b3cbba6c6a46701b886b9520f3c"
     },
     {
       "path": "assets/fonts/DMMono/DMMono-Medium.ttf",

example/assets/css/fonts.css

@@ -1,10 +1,45 @@
 @font-face {
-    font-family: 'ReadexPro';
-    src: url('ReadexPro-Regular.ttf') format("truetype");
+    font-family: 'Titillio 3';
+    src: url('Titillio-Thin.otf') format("truetype");
+    font-weight: 200;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Titillio 3';
+    src: url('Titillio-Light.otf') format("truetype");
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Titillio 3';
+    src: url('Titillio-Regular.otf') format("truetype");
     font-weight: 400;
     font-style: normal;
 }
 
+@font-face {
+    font-family: 'Titillio 3';
+    src: url('Titillio-Semibold.otf') format("truetype");
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Titillio 3';
+    src: url('Titillio-Bold.otf') format("truetype");
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Titillio 3';
+    src: url('Titillio-Black.otf') format("truetype");
+    font-weight: 900;
+    font-style: normal;
+}
+
 /* DM MONO */
 @font-face {
     font-family: 'DMMono';