chore(playroom/storybook): add On Air font

.storybook/css/onair-font.css

@@ -0,0 +1,31 @@
+/* Regular */
+@font-face {
+    font-family: 'On Air';
+    font-style: normal;
+    font-weight: 400;
+    src: url('./fonts/OnAir-Regular.woff2') format('woff2');
+}
+
+/* Light */
+@font-face {
+    font-family: 'On Air';
+    font-style: normal;
+    font-weight: 300;
+    src: url('./fonts/OnAir-Light.woff2') format('woff2');
+}
+
+/* Medium */
+@font-face {
+    font-family: 'On Air';
+    font-style: normal;
+    font-weight: 500;
+    src: url('./fonts/OnAir-Medium.woff2') format('woff2');
+}
+
+/* Bold */
+@font-face {
+    font-family: 'On Air';
+    font-style: normal;
+    font-weight: 700;
+    src: url('./fonts/OnAir-Bold.woff2') format('woff2');
+}

.storybook/preview.tsx

@@ -1,6 +1,7 @@
 import './css/roboto.css';
 import './css/vivo-font.css';
 import './css/telefonica-font.css';
+import './css/onair-font.css';
 import './css/main.css';
 import * as React from 'react';
 import {
@@ -72,6 +73,7 @@ const MisticaThemeProvider = ({Story, context}): React.ReactElement => {
         <ThemeContextProvider theme={getTheme(skin as string, platform, colorScheme)}>
             {skin === VIVO_NEW_SKIN && <style>{`body {font-family: "Vivo Type"}`}</style>}
             {skin === TELEFONICA_SKIN && <style>{`body {font-family: "Telefonica Sans"}`}</style>}
+            {skin === O2_SKIN && <style>{`body {font-family: "On Air"}`}</style>}
             <Story {...context} />
         </ThemeContextProvider>
     );

playroom.config.js

@@ -99,7 +99,7 @@ const config = {
                     ],
                 },
                 {
-                    test: /(reset|roboto|vivo-font|telefonica-font)\.css$/,
+                    test: /(reset|roboto|vivo-font|telefonica-font|onair-font)\.css$/,
                     use: ['style-loader', 'css-loader'],
                 },
                 {

playroom/frame-component.tsx

@@ -1,6 +1,7 @@
 import '../css/roboto.css';
 import '../.storybook/css/vivo-font.css';
 import '../.storybook/css/telefonica-font.css';
+import '../.storybook/css/onair-font.css';
 import '../css/reset.css';
 import * as React from 'react';
 import {
@@ -10,6 +11,7 @@ import {
     skinVars,
     VIVO_NEW_SKIN,
     TELEFONICA_SKIN,
+    O2_SKIN,
 } from '../src';
 
 import type {ThemeConfig} from '../src';
@@ -39,6 +41,7 @@ const App = ({children, skinName}: {children: React.ReactNode; skinName: string}
 
         ${skinName === VIVO_NEW_SKIN ? 'body {font-family: "Vivo Type"}' : ''}
         ${skinName === TELEFONICA_SKIN ? 'body {font-family: "Telefonica Sans"}' : ''}
+        ${skinName === O2_SKIN ? 'body {font-family: "On Air"}' : ''}
 
         ${isModalOpen ? 'body {overflow-y: hidden}' : ''}