[Gatsby] Removed Typekit in favour of system fonts (#10988)

www/src/components/LayoutFooter/ExternalFooterLink.js

@@ -16,7 +16,6 @@ import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
 const ExternalFooterLink = ({children, href, target}) => (
   <a
     css={{
-      fontWeight: 300,
       lineHeight: 2,
       ':hover': {
         color: colors.brand,

www/src/components/LayoutFooter/FooterLink.js

@@ -16,7 +16,6 @@ import {colors} from 'theme';
 const FooterLink = ({children, target, to}) => (
   <Link
     css={{
-      fontWeight: 300,
       lineHeight: 2,
       ':hover': {
         color: colors.brand,

www/src/components/LayoutHeader/Header.js

@@ -164,6 +164,7 @@ const Header = ({location}) => (
               border: 0,
               color: colors.white,
               fontSize: 18,
+              fontWeight: 300,
               fontFamily: 'inherit',
               position: 'relative',
               paddingLeft: '24px',

www/src/components/LayoutHeader/HeaderLink.js

@@ -44,7 +44,6 @@ const style = {
     paddingLeft: 20,
     paddingRight: 20,
     fontSize: 18,
-    fontWeight: 400,
 
     ':hover': {
       color: colors.brand,

www/src/css/algolia.css

@@ -401,7 +401,7 @@
   color: #222222;
   background-color: #EBEBEB;
   border-radius: 3px;
-  font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 
 .algolia-autocomplete .algolia-docsearch-suggestion code .algolia-docsearch-suggestion--highlight {

www/src/css/reset.css

@@ -1,6 +1,10 @@
 html {
   box-sizing: border-box;
-  font-family: "proxima-nova", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont,
+    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+    "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  font-weight: 400;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
 }
@@ -35,5 +39,5 @@ img {
 }
 
 pre, code {
-  font-family: source-code-pro, Menlo, Consolas, "Courier New", monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }

www/src/html.js

@@ -59,12 +59,6 @@ export default class HTML extends Component {
             dangerouslySetInnerHTML={{__html: this.props.body}}
           />
           {this.props.postBodyComponents}
-          <script src="https://use.typekit.net/vqa1hcx.js" />
-          <script
-            dangerouslySetInnerHTML={{
-              __html: 'try{Typekit.load({ async: true });}catch(e){}',
-            }}
-          />
         </body>
       </html>
     );

www/src/templates/components/ButtonLink/ButtonLink.js

@@ -61,7 +61,6 @@ const style = {
 const primaryStyle = {
   backgroundColor: colors.brand,
   color: colors.black,
-  fontWeight: 300,
   padding: '10px 25px',
   whiteSpace: 'nowrap',
   transition: 'background-color 0.2s ease-out',

www/src/templates/home.js

@@ -71,6 +71,7 @@ class Home extends Component {
                   textAlign: 'center',
                   margin: 0,
                   fontSize: 45,
+                  letterSpacing: '0.01em',
                   [media.size('xsmall')]: {
                     fontSize: 30,
                   },
@@ -85,6 +86,8 @@ class Home extends Component {
                   paddingTop: 15,
                   textAlign: 'center',
                   fontSize: 24,
+                  letterSpacing: '0.01em',
+                  fontWeight: 200,
 
                   [media.size('xsmall')]: {
                     fontSize: 16,
@@ -96,7 +99,6 @@ class Home extends Component {
                   [media.greaterThan('xlarge')]: {
                     paddingTop: 20,
                     fontSize: 30,
-                    fontWeight: 300,
                   },
                 }}>
                 A JavaScript library for building user interfaces
@@ -281,15 +283,12 @@ const markdownStyles = {
     '& h3': {
       color: colors.subtle,
       paddingTop: 0,
-
-      [media.lessThan('large')]: {
-        fontSize: 18,
-        fontWeight: 400,
-      },
+      fontWeight: 300,
+      fontSize: 20,
 
       [media.greaterThan('xlarge')]: {
         fontSize: 24,
-        fontWeight: 400,
+        fontWeight: 200,
       },
     },
 

www/src/theme.js

@@ -198,18 +198,21 @@ const sharedStyles = {
 
     '& > p:first-child': {
       fontSize: 18,
-      lineHeight: '30px',
+      fontWeight: 300,
       color: colors.subtle,
 
       [media.greaterThan('xlarge')]: {
         fontSize: 24,
-        lineHeight: '40px',
+      },
+
+      '& a, & strong': {
+        fontWeight: 400,
       },
     },
 
     '& p': {
       marginTop: 30,
-      fontSize: 18,
+      fontSize: 17,
       lineHeight: 1.7,
       maxWidth: '42em',