Add three new fonts, display fonts in the font selector

apple/OmnivoreKit/Sources/Views/Article/OmnivoreWebView.swift

@@ -42,7 +42,7 @@ public final class OmnivoreWebView: WKWebView {
   public func updateTheme() {
     do {
       if let themeName = UserDefaults.standard.value(forKey: UserDefaultKey.themeName.rawValue) as? String {
-        try dispatchEvent(.updateTheme(themeName: "Gray" /* themeName */ ))
+        try dispatchEvent(.updateTheme(themeName: themeName))
       }
     } catch {
       showErrorInSnackbar("Error updating theme")

apple/OmnivoreKit/Sources/Views/CustomFontRegistration.swift

@@ -12,7 +12,17 @@ public func registerFonts() -> Bool {
     registerFont(bundle: .module, fontName: "Inter-Light-300", fontExtension: "ttf"),
     registerFont(bundle: .module, fontName: "Inter-ExtraLight-200", fontExtension: "ttf"),
     registerFont(bundle: .module, fontName: "Inter-Thin", fontExtension: "ttf"),
-    registerFont(bundle: .module, fontName: "SFMonoRegular", fontExtension: "otf")
+    registerFont(bundle: .module, fontName: "SFMonoRegular", fontExtension: "otf"),
+    registerFont(bundle: .module, fontName: "Merriweather-Regular", fontExtension: "ttf"),
+    registerFont(bundle: .module, fontName: "Lora-Regular", fontExtension: "ttf"),
+    registerFont(bundle: .module, fontName: "OpenSans-Regular", fontExtension: "ttf"),
+    registerFont(bundle: .module, fontName: "Roboto-Regular", fontExtension: "ttf"),
+    registerFont(bundle: .module, fontName: "CrimsonText-Regular", fontExtension: "ttf"),
+    registerFont(bundle: .module, fontName: "OpenDyslexicAlta-Regular", fontExtension: "otf"),
+    registerFont(bundle: .module, fontName: "Georgia-Regular", fontExtension: "ttf"),
+    registerFont(bundle: .module, fontName: "Montserrat-Regular", fontExtension: "ttf"),
+    registerFont(bundle: .module, fontName: "Newsreader-Regular", fontExtension: "ttf"),
+    registerFont(bundle: .module, fontName: "SourceSerifPro-Regular", fontExtension: "ttf")
   ]
   .allSatisfy { $0 }
 }

apple/OmnivoreKit/Sources/Views/FontSizeAdjustmentPopoverView.swift

@@ -11,10 +11,30 @@ public enum WebFont: String, CaseIterable {
   case crimsontext = "Crimson Text"
   case sourceserifpro = "Source Serif Pro"
   case openDyslexic = "OpenDyslexic"
+  case georgia = "Georgia"
+  case montserrat = "Montserrat"
+  case newsreader = "Newsreader"
+
+  static var sorted: [WebFont] {
+    allCases.sorted { left, right in
+      left.displayValue <= right.displayValue
+    }
+  }
+
+  public var registeredName: String {
+    switch self {
+    case .openDyslexic:
+      return "OpenDyslexicAlta"
+    case .system:
+      return "San Francisco"
+    default:
+      return rawValue
+    }
+  }
 
   public var displayValue: String {
     switch self {
-    case .inter, .merriweather, .lora, .opensans, .roboto, .crimsontext, .sourceserifpro:
+    case .inter, .merriweather, .lora, .opensans, .roboto, .crimsontext, .sourceserifpro, .georgia, .montserrat, .newsreader:
       return rawValue
     case .openDyslexic:
       return "Open Dyslexic"
@@ -22,6 +42,13 @@ public enum WebFont: String, CaseIterable {
       return "System Default"
     }
   }
+
+  public func font() -> Font? {
+    if let uiFont = UIFont(name: registeredName, size: 22) {
+      return Font(uiFont as CTFont)
+    }
+    return Font.system(size: 22)
+  }
 }
 
 #if os(iOS)
@@ -46,7 +73,7 @@ public enum WebFont: String, CaseIterable {
 
     var fontList: some View {
       List {
-        ForEach(WebFont.allCases, id: \.self) { font in
+        ForEach(WebFont.sorted, id: \.self) { font in
           Button(
             action: {
               preferredFont = font.rawValue
@@ -54,14 +81,18 @@ public enum WebFont: String, CaseIterable {
             },
             label: {
               HStack {
-                Text(font.displayValue).foregroundColor(.appGrayTextContrast)
+                Text(font.displayValue)
+                  .font(font.font())
+                  .foregroundColor(.appGrayTextContrast)
                 Spacer()
                 if font.rawValue == preferredFont {
-                  Image(systemName: "checkmark").foregroundColor(.appGrayTextContrast)
+                  Image(systemName: "checkmark")
+                    .font(Font.system(size: 18))
+                    .foregroundColor(.appGrayTextContrast)
                 }
               }
             }
-          )
+          ).frame(minHeight: 44)
         }
       }
       .listStyle(.plain)

packages/web/components/templates/article/ArticleContainer.tsx

@@ -195,6 +195,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
     readerTableHeaderColor: theme.colors.readerTableHeader.toString(),
     readerHeadersColor: theme.colors.readerHeader.toString(),
   }
+  console.log('setting font family: ', styles.fontFamily)
 
   return (
     <>

packages/web/styles/globals.css

@@ -228,6 +228,69 @@ div#appleid-signin {
   src: url('/static/fonts/Source_Serif_Pro/SourceSerifPro-Italic.ttf');
 }
 
+@font-face {
+  font-family: 'Montserrat';
+  font-weight: 400;
+  font-style: normal;
+  src: url('/static/fonts/Source_Serif_Pro/Montserrat-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  font-weight: 700;
+  font-style: normal;
+  src: url('/static/fonts/Source_Serif_Pro/Montserrat-Bold.ttf');
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  font-weight: 400;
+  font-style: italic;
+  src: url('/static/fonts/Source_Serif_Pro/Montserrat-Italic.ttf');
+}
+
+@font-face {
+  font-family: 'Georgia';
+  font-weight: 400;
+  font-style: normal;
+  src: url('/static/fonts/Source_Serif_Pro/Georgia-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'Georgia';
+  font-weight: 700;
+  font-style: normal;
+  src: url('/static/fonts/Source_Serif_Pro/Georgia-Bold.ttf');
+}
+
+@font-face {
+  font-family: 'Georgia';
+  font-weight: 400;
+  font-style: italic;
+  src: url('/static/fonts/Source_Serif_Pro/Georgia-Italic.ttf');
+}
+
+@font-face {
+  font-family: 'Newsreader';
+  font-weight: 400;
+  font-style: normal;
+  src: url('/static/fonts/Source_Serif_Pro/Newsreader-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'Newsreader';
+  font-weight: 700;
+  font-style: normal;
+  src: url('/static/fonts/Source_Serif_Pro/Newsreader-Bold.ttf');
+}
+
+@font-face {
+  font-family: 'Newsreader';
+  font-weight: 400;
+  font-style: italic;
+  src: url('/static/fonts/Source_Serif_Pro/Newsreader-Italic.ttf');
+}
+
 @font-face {
   font-family: 'SF Mono';
   font-weight: 400;