From 7a2b1ca940db62c2a5556304500fde21f76d6f69 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 15 Jun 2022 12:38:36 -0700
Subject: [PATCH] Update list of fonts

---
 .../templates/article/FontFamiliesOptions.tsx | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/web/components/templates/article/FontFamiliesOptions.tsx b/packages/web/components/templates/article/FontFamiliesOptions.tsx
index de8c88d00..7ea01d8f9 100644
--- a/packages/web/components/templates/article/FontFamiliesOptions.tsx
+++ b/packages/web/components/templates/article/FontFamiliesOptions.tsx
@@ -3,8 +3,16 @@ import { StyledText } from '../../elements/StyledText'
 import { theme } from '../../tokens/stitches.config'
 import { CaretLeft, CheckCircle } from 'phosphor-react'
 
-const DEFAULT_FONT_FAMILY = 'Inter'
-const GOOGLE_FONT_FAMILIES = ['Lyon', 'Tisa', 'Merriweather']
+const FONT_FAMILIES = [
+  'Inter',
+  'System Default',
+  'Merriweather',
+  'Lora',
+  'Open Sans',
+  'Roboto',
+  'Crimson Text',
+  'Source Serif Pro'
+]
 
 type FontFamiliesListProps = {
   selected: string
@@ -19,15 +27,16 @@ type FontOptionProps = {
 }
 
 function FontOption(props: FontOptionProps):JSX.Element {
+  const isSelected = props.selected === props.family
   return (
     <HStack distribution='between' alignment='start' css={{width: '100%', pt: '14px'}}>
       <StyledText
-        css={{ m: '0px', fontSize: 16, fontWeight: '600', fontFamily: props.family, textTransform: 'capitalize', cursor: 'pointer' }}
+        css={{ m: '0px', fontSize: 16, fontWeight: isSelected ? 'bold' : 'regular', fontFamily: props.family, textTransform: 'capitalize', cursor: 'pointer' }}
         onClick={() => props.onSelect(props.family)}
       >
         {props.family}
       </StyledText>
-      {props.selected === props.family && (
+      {isSelected && (
         <CheckCircle color={theme.colors.grayTextContrast.toString()} />
       )}
     </HStack>
@@ -56,10 +65,7 @@ export function FontFamiliesOptions(props: FontFamiliesListProps): JSX.Element {
         </HStack>
       </Box>
       <Box css={{px: 15, width: '100%', pb: 15}}>
-        <StyledText css={{m: 0, fontSize: 10, fontWeight: '600', pt: 14, color: theme.colors.textSubtle.toString()}}>DEFAULT</StyledText>
-        <FontOption selected={props.selected} family={DEFAULT_FONT_FAMILY} onSelect={props.onSelect} key={`font-${DEFAULT_FONT_FAMILY}`} />
-        <StyledText css={{m: 0, fontSize: 10, fontWeight: '600', pt: 14, color: theme.colors.textSubtle.toString()}}>GOOGLE FONTS</StyledText>
-        {GOOGLE_FONT_FAMILIES.map((family) => (
+        {FONT_FAMILIES.map((family) => (
           <FontOption selected={props.selected} family={family} onSelect={props.onSelect} key={`font-${family}`} />
         ))}
       </Box>