Add inter (#1810)

* Revert "Revert "Add Inter""

This reverts commit 93a74ae.

* Revert "Revert "Use styled-jsx for amp support""

This reverts commit 318f837.

* Add preload

* Disable `calt` in font-feature-settings

* Make padding smaller

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: chibicode

components/feedback-input/header-feedback.js

@@ -307,7 +307,7 @@ class HeaderFeedback extends Component {
                   --open-height: 174px;
                   --closed-width: 90px;
                   --closed-height: 32px;
-                  --padding: 4px 12px;
+                  --padding: 4px 10px;
 
                   margin-right: 8px;
                   padding: 0;

components/layout/head.js

@@ -80,6 +80,13 @@ class Head extends React.PureComponent {
     return (
       <>
         <NextHead>
+          <link
+            rel="preload"
+            href="https://assets.vercel.com/raw/upload/v1587415301/fonts/2/inter-var-latin.woff2"
+            as="font"
+            type="font/woff2"
+            crossOrigin="anonymous"
+          />
           <title>{titlePrefix + this.props.title + titleSuffix}</title>
           <meta name="twitter:card" content="summary_large_image" />
           <meta name="twitter:site" content="@zeithq" />

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,6 +1,14 @@
 import css from 'styled-jsx/css'
 
 export default css.global`
+html {
+  touch-action: manipulation;
+  font-feature-settings: 'case' 1, 'rlig' 1, 'calt' 0;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 :root {
   /* Spacing variables */
   --geist-gap: 16pt;
@@ -32,8 +40,8 @@ export default css.global`
   --geist-marketing-gray: #fafbfc;
 
   /* Fonts */
-  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   --font-mono: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
     Bitstream Vera Sans Mono, Courier New, monospace;