refactor fonts saas/app #156

async-labs · Jun 1, 2021 · efeb327 · efeb327
1 parent 4b06a3a
commit efeb327
Show file tree

Hide file tree

Showing 13 changed files with 47 additions and 31 deletions.
diff --git a/saas/app/components/posts/PostContent.tsx b/saas/app/components/posts/PostContent.tsx
@@ -8,7 +8,12 @@ class PostContent extends React.Component<Props> {
 
  return (
  <div
- style={{ fontSize: '15px', lineHeight: '2em', font: '16px Roboto', wordBreak: 'break-all' }}
+ style={{
+ fontSize: '15px',
+ lineHeight: '2em',
+ fontFamily: 'Roboto, sans-serif',
+ wordBreak: 'break-all',
+ }}
  dangerouslySetInnerHTML={{ __html: html }}
  />
  );

diff --git a/saas/app/components/posts/PostEditor.tsx b/saas/app/components/posts/PostEditor.tsx
@@ -120,7 +120,7 @@ class PostEditor extends React.Component<Props, State> {
  border: 'none',
  outline: 'none',
  color: isThemeDark ? '#fff' : '#000',
- font: '16px Roboto',
+ fontFamily: 'Roboto, sans-serif',
  height: '100vh',
  lineHeight: '1.5em',
  backgroundColor: content ? textareaBackgroundColor : 'transparent',

diff --git a/saas/app/lib/theme.ts b/saas/app/lib/theme.ts
@@ -11,7 +11,7 @@ const themeDark = createMuiTheme({
  },
  },
  typography: {
- fontFamily: ['IBM Plex Mono', 'monospace', 'Roboto', 'sans-serif'].join(','),
+ fontFamily: ['IBM Plex Mono', 'monospace'].join(','),
  button: {
  textTransform: 'none',
  },
@@ -29,7 +29,7 @@ const themeLight = createMuiTheme({
  },
  },
  typography: {
- fontFamily: ['IBM Plex Mono', 'monospace', 'Roboto', 'sans-serif'].join(','),
+ fontFamily: ['IBM Plex Mono', 'monospace'].join(','),
  button: {
  textTransform: 'none',
  },

diff --git a/saas/app/pages/_app.tsx b/saas/app/pages/_app.tsx
@@ -133,24 +133,13 @@ class MyApp extends App {
 
  const isThemeDark = store.currentUser ? store.currentUser.darkTheme : true;
 
+ const isServer = typeof window === 'undefined';
+
  return (
  <ThemeProvider theme={isThemeDark ? themeDark : themeLight}>
  <Head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <link
- rel="prefetch"
- href="https://d2c24pn6pcl4ug.cloudfront.net/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.woff2"
- as="font"
- crossOrigin="anonymous"
- type="font/woff2"
- />
- <link
- rel="prefetch"
- href="https://d2c24pn6pcl4ug.cloudfront.net/fonts/IBM-Plex-Mono/IBMPlexMono-Bold.woff2"
- as="font"
- crossOrigin="anonymous"
- type="font/woff2"
- />
+ <link rel="stylesheet" href={isServer ? '/fonts/server.css' : '/fonts/cdn.css'} />
  <link
  rel="stylesheet"
  href={

diff --git a/saas/app/pages/_document.tsx b/saas/app/pages/_document.tsx
@@ -41,19 +41,6 @@ class MyDocument extends Document {
  href="https://storage.googleapis.com/async-await/async-favicon32.png"
  />
 
- <link
- rel="prefetch"
- href="/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.woff2"
- as="font"
- type="font/woff2"
- />
- <link
- rel="prefetch"
- href="/fonts/IBM-Plex-Mono/IBMPlexMono-Bold.woff2"
- as="font"
- type="font/woff2"
- />
-
  <link
  rel="stylesheet"
  href={

diff --git a/saas/app/public/fonts/IBM-Plex-Mono/IBMPlexMono-Bold.woff2 b/saas/app/public/fonts/IBM-Plex-Mono/IBMPlexMono-Bold.woff2
diff --git a/saas/app/public/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.woff b/saas/app/public/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.woff
diff --git a/saas/app/public/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.woff2 b/saas/app/public/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.woff2
diff --git a/saas/app/public/fonts/Roboto/Roboto-Regular.woff b/saas/app/public/fonts/Roboto/Roboto-Regular.woff
diff --git a/saas/app/public/fonts/Roboto/Roboto-Regular.woff2 b/saas/app/public/fonts/Roboto/Roboto-Regular.woff2
diff --git a/saas/app/public/fonts/Roboto/roboto-v20-latin-regular.woff2 b/saas/app/public/fonts/Roboto/roboto-v20-latin-regular.woff2
diff --git a/saas/app/public/fonts/cdn.css b/saas/app/public/fonts/cdn.css
@@ -0,0 +1,18 @@
+@font-face {
+ font-family: 'IBM Plex Mono';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 400;
+ src: url(https://d2c24pn6pcl4ug.cloudfront.net/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.woff2) format('woff2'), url(https://d2c24pn6pcl4ug.cloudfront.net/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.woff) format('woff');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 400;
+ src: url(https://d2c24pn6pcl4ug.cloudfront.net/fonts/Roboto/Roboto-Regular.woff2) format('woff2'), url(https://d2c24pn6pcl4ug.cloudfront.net/fonts/Roboto/Roboto-Regular.woff) format('woff');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
diff --git a/saas/app/public/fonts/server.css b/saas/app/public/fonts/server.css
@@ -0,0 +1,17 @@
+@font-face {
+ font-family: 'IBM Plex Mono';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 400;
+ src: url(./IBM-Plex-Mono/IBMPlexMono-Regular.woff2) format('woff2'), url(./IBM-Plex-Mono/IBMPlexMono-Regular.woff) format('woff');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 400;
+ src: url(./Roboto/Roboto-Regular.woff2) format('woff2'), url(./Roboto/Roboto-Regular.woff) format('woff');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}