Use styled-jsx for amp support

Author: chibicode

pages/_app.js

@@ -7,6 +7,7 @@ import Layout from '~/components/layout/app'
 import DataContext from '~/lib/data-context'
 
 import baseTheme from '../styles/themes/base'
+import fontTheme from '../styles/themes/font'
 import withTypeStyles from '../styles/with-type'
 import nprogressStyles from '../styles/nprogress'
 
@@ -43,6 +44,9 @@ function MyApp({ Component, pageProps }) {
         </Head>
         <Layout data={data}>
           <Component {...pageProps} />
+          <style jsx global>
+            {fontTheme}
+          </style>
           <style jsx global>
             {baseTheme}
           </style>

styles/global.css

@@ -1,3 +1,6 @@
+import css from 'styled-jsx/css'
+
+export default css.global`
 /* latin */
 @font-face {
   font-family: 'Inter';
@@ -626,3 +629,4 @@ in most cases, they are not downloaded at all */
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
     U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
+`