Update to rebrand fonts (except Monaco, for now)

Monaco has some ongoing problems with layout with non-default fonts,
notable with both broken word wrapping (goes slightly too far) and weird
relayout of text when big chunks are selected.

Enabling ligatures & doing remeasure slightly helps in the Settings UI
case maybe, but not in normal editors. Needs proper investigation.

Author: pimterry

automation/webpack.common.ts

@@ -2,7 +2,6 @@ import * as path from 'path';
 import * as Webpack from 'webpack';
 
 import HtmlWebpackPlugin from 'html-webpack-plugin';
-import GoogleFontsPlugin from '@beyonk/google-fonts-webpack-plugin';
 import CopyPlugin from 'copy-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import ForkTsCheckerNotifierWebpackPlugin from 'fork-ts-checker-notifier-webpack-plugin';
@@ -165,16 +164,6 @@ export default <Webpack.Configuration>{
                 'wordOperations'
             ]
         }),
-        new GoogleFontsPlugin({
-            fonts: [
-                { family: "Fira Mono" },
-                { family: "Lato" }
-            ],
-            path: '.',
-            formats: ['woff2'], // Supported by Chrome, FF, Edge, Safari 12+
-            filename: 'fonts.css',
-            apiUrl: 'https://gwfh.mranftl.com/api/fonts'
-        }),
         new Webpack.ProvidePlugin({
             'process': 'process/browser.js',
             'Buffer': ['buffer', 'Buffer']

package-lock.json

@@ -34,6 +34,9 @@
   },
   "dependencies": {
     "@ethersproject/abi": "^5.7.0",
+    "@fontsource/dm-mono": "^5.0.19",
+    "@fontsource/dm-sans": "^5.0.20",
+    "@fontsource/saira": "^5.0.27",
     "@fortawesome/fontawesome-svg-core": "^1.2.27",
     "@fortawesome/free-brands-svg-icons": "^5.12.1",
     "@fortawesome/free-regular-svg-icons": "^5.12.1",
@@ -144,7 +147,6 @@
     "yaml": "^1.7.2"
   },
   "devDependencies": {
-    "@beyonk/google-fonts-webpack-plugin": "^1.7.0",
     "@types/chai": "^4.1.7",
     "@types/chai-as-promised": "^7.1.0",
     "@types/chai-enzyme": "^0.6.6",

package.json

@@ -22,7 +22,8 @@
       padding: 8px;
 
       background-color: #d8e2e6;
-      font-family: Lato;
+      font-family: "DM Sans", Arial, sans-serif;
+      letter-spacing: -0.5px;
       line-height: 1.3;
       display: flex;
       flex-direction: column;
@@ -35,11 +36,12 @@
     }
 
     h1 {
-      font-size: 36pt;
+      font-size: 48px;
+      letter-spacing: -2px;
     }
 
     p {
-      font-size: 18pt;
+      font-size: 24px;
     }
 
     .logo {
@@ -62,6 +64,6 @@ <h1>You're being intercepted by HTTP Toolkit</h1>
       that brought you this page, or start browsing elsewhere to collect more data.
     </p>
   </div>
-  <link href="https://fonts.googleapis.com/css?family=Lato&display=block" rel="stylesheet" />
+  <link href="https://fonts.cdnfonts.com/css/dm-sans" rel="stylesheet">
 </body>
 </html>

src/amiusing.html

@@ -49,6 +49,7 @@ const PlanPickerDetails = styled.section`
 
 const PlanPickerHeading = styled.h1`
     font-size: ${p => p.theme.loudHeadingSize};
+    font-family: ${p => p.theme.titleTextFamily};
     font-weight: bold;
     letter-spacing: -1px;
     text-align: center;
@@ -117,6 +118,8 @@ const PlanPickerButtons = styled.div`
 `;
 
 const PlanSecondaryButton = styled(SecondaryButton)`
+    letter-spacing: -0.5px;
+
     &:not(:last-child) {
         margin-bottom: 10px;
     }
@@ -170,13 +173,14 @@ const PricingTier = styled.section<{ highlighted?: boolean }>`
     `}
 `;
 
-const TierHeader = styled.div`
+const TierHeader = styled.h2`
     width: 100%;
     padding: 30px 0;
     color: ${p => p.theme.popColor};
     text-align: center;
     font-weight: bold;
     font-size: ${p => p.theme.loudHeadingSize};
+    font-family: ${p => p.theme.titleTextFamily};
 `;
 
 const TierPriceBlock = styled.div`

src/components/account/plan-picker.tsx

@@ -104,6 +104,10 @@ export const MediumCard = styled(Card)`
     padding: 20px;
     margin-bottom: 20px;
 
+    > header h1, > h1 {
+        font-family: ${p => p.theme.titleTextFamily};
+    }
+
     > header, > h1 {
         text-transform: uppercase;
         text-align: ${p => p.headerAlignment};

src/components/common/card.tsx

@@ -27,8 +27,10 @@ export const EmptyState = styled((props: React.HTMLAttributes<HTMLDivElement> &
     align-items: center;
     justify-content: center;
 
-    color: ${props => props.theme.containerWatermark};
-    font-size: 40px;
+    color: ${p => p.theme.containerWatermark};
+    font-size: ${p => p.theme.loudHeadingSize};
+    letter-spacing: -1px;
+
     text-align: center;
 
     box-sizing: border-box;

src/components/common/empty-state.tsx

@@ -40,7 +40,7 @@ function getDefaultColor(theme: Theme) {
 const pillStyles = css`
     display: inline-block;
     border-radius: 4px;
-    padding: 4px 8px;
+    padding: 5px 8px 3px;
 
     text-align: center;
     text-transform: none;
@@ -80,7 +80,7 @@ const Select = styled(Pill.withComponent('select'))`
     border: none;
 
     height: 24px;
-    padding: 0 4px 3px 8px;
+    padding: 0 4px 0 8px;
 
     font-size: ${p => p.theme.textSize};
     font-family: ${p => p.theme.fontFamily};

src/components/common/pill.tsx

@@ -9,6 +9,7 @@ import { fromMarkdown } from '../../model/ui/markdown';
 
 export const ContentLabel = styled.h2`
     text-transform: uppercase;
+    font-family: ${p => p.theme.titleTextFamily};
     opacity: ${p => p.theme.lowlightTextOpacity};
 
     display: inline-block;

src/components/common/text-content.tsx

@@ -34,6 +34,7 @@ const ErrorOverlay = styled((props: {
 
     h1 {
         font-size: ${p => p.theme.screamingHeadingSize};
+        font-family: ${p => p.theme.titleTextFamily};
         font-weight: bold;
         margin-bottom: 50px;
     }

src/components/error-boundary.tsx

@@ -118,6 +118,10 @@ const InterceptOptionCard = styled(LittleCard)<{
         z-index: 1;
     }
 
+    h1 {
+        font-family: ${p => p.theme.titleTextFamily};
+    }
+
     > h1:not(:last-child) {
         margin-bottom: 10px; /* Override LittleCard default */
     }