Utilize Google Fonts v2 API with optimized variable fonts, provide fallback when

 var font support is not available
Variable fonts are optimized in size
refs,
- https://developers.google.com/fonts/docs/css2

Author: atiq-cs

input/_layout.cshtml

@@ -50,8 +50,33 @@
 
   <!-- Custom fonts for this template -->
   <link href='@Context.GetLink("/vendor/fontawesome-free/css/all.min.css")' rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" data-no-mirror>
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" data-no-mirror>
+  <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400..700&display=swap" rel="stylesheet" data-no-mirror>
+  <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,400..700&display=swap" rel="stylesheet" data-no-mirror>
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400..700&display=swap" rel="stylesheet" data-no-mirror>
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,400..700&display=swap" rel="stylesheet" data-no-mirror>
+  <style>
+    * {
+      font-family: 'Lora';
+      font-weight: 400;
+    }
+    @@supports (font-variation-settings: "wght" 500) {
+      * {
+        font-family: 'Lora';
+        font-weight: 500;
+      }
+    }
+
+    * {
+      font-family: 'Open Sans';
+      font-weight: 400;
+    }
+    @@supports (font-variation-settings: "wght" 500) {
+      * {
+        font-family: 'Open Sans';
+        font-weight: 500;
+      }
+    }
+  </style>
 
   <!-- Styles for this template (also includes Bootstrap) -->
   <link href='@Context.GetLink("/scss/clean-blog.css")' rel="stylesheet">