Replace Google Font with local variable font (#1910)

* Removed the Google OpenSans with fontsource/open-sans

* Placed the fonts inside the project directory itself

* Fixed the fonts not being read

* Removed redundant fonts, and also removed css/fonts

* Changed the font-weight (100 to 700) range

* correct font family name and remove ttf font files

* correcting italic font file name

* Removed ttf fonts and renamed the font fileNames for simplicity

* font imports removed from style.css

* fix: path fix and font preload

* fix: fixed fonts.css order

* chore: removed additional whitespaces

---------

Co-authored-by: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com>

Author: utkarsh125

_includes/head.html

@@ -2,52 +2,72 @@
     <title>{{ page.title }}</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link 
+        rel="preload" 
+        href="/fonts/open-sans/woff2/OpenSans.woff2"
+        as="font" 
+        type="font/woff2" 
+        crossorigin 
+    />
+    <link 
+        rel="preload" 
+        href="/fonts/open-sans/woff2/OpenSans-Italic.woff2" 
+        as="font" 
+        type="font/woff2" 
+        crossorigin 
+    />
+    <link
+        href="/fonts/open-sans/woff/OpenSans.woff"
+        as="font"
+        type="font/woff"
+        crossorigin
+    />
+    <link
+        href="/fonts/open-sans/woff/OpenSans-Italic.woff"
+        as="font"
+        type="font/woff"
+        crossorigin
+    />
+    <link rel="stylesheet" href="/fonts/open-sans/fonts.css" />
     <link rel="icon" type="image/png" href="/images/favicon.png" />
     <script data-cfasync="false" src="/js/theme.js"></script>
     <link rel="stylesheet" href="/css/variables.css?_={{ site.time | date: '%s' }}">
     <link rel="stylesheet" href="/css/themes/dark-theme.css?_={{ site.time | date: '%s' }}">
     <link rel="stylesheet" href="/css/style.css?_={{ site.time | date: '%s' }}">
     <link rel="stylesheet" href="/css/sintax.css?_={{ site.time | date: '%s' }}">
-
     <link rel="stylesheet" href="/css/font-awesome.min.css">
-    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;amp;subset=latin,latin-ext">
     <link rel="stylesheet" href="/css/langs/{{ page.lang }}.css">
-
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta name="description" content="{{page.description}}">
     <meta property="og:url" content="https://expressjs.com{{page.url}}">
-    
     {% if page.author %}
-    <meta property="og:type" content="article" >
+    <meta property="og:type" content="article">
     <meta property="og:article:author" content="{{page.author}}">
     {% else %}
-    <meta property="og:type" content="website" >
+    <meta property="og:type" content="website">
     {% endif %}
-    
     <meta name="title" property="og:title" content="{{page.title}}">
     <meta property="og:description" content="{{page.description}}">
     {% if page.image %}
-    <meta property="og:image" content="{{page.image}}" > 
+    <meta property="og:image" content="{{page.image}}">
     {% else %}
-    <meta property="og:image" content="https://expressjs.com/images/og.png" >    
+    <meta property="og:image" content="https://expressjs.com/images/og.png">
     {% endif %}
     <meta name="twitter:card" content="summary_large_image">
     <meta property="twitter:domain" content="expressjs.com">
     <meta property="twitter:url" content="https://expressjs.com{{page.url}}">
     <meta name="twitter:title" content="{{page.title}}">
     <meta name="twitter:description" content="{{page.description}}">
     {% if page contains "image" %}
-    <meta property="twitter:image" content="{{ page.image }}" > 
+    <meta property="twitter:image" content="{{ page.image }}">
     {% else %}
-    <meta property="twitter:image" content="https://expressjs.com/images/og.png" >    
+    <meta property="twitter:image" content="https://expressjs.com/images/og.png">
     {% endif %}
-
     <script data-cfasync="false" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script data-cfasync="false" src="/js/app.js"></script>
     <script data-cfasync="false" defer src="/js/menu.js"></script>
     <script data-cfasync="false" defer src="/js/copycode.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
-
     <link rel="alternate" type="application/atom+xml" href="/feed.xml" title="Express Blog" />
     <link rel="alternate" type="application/atom+xml" href="/vulnerabilities.xml" title="Express Vulnerabilities" />
-</head>
+</head>

fonts/open-sans/fonts.css

@@ -0,0 +1,19 @@
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 100 700;
+  font-display: swap;
+  src: local("Open Sans"),
+        url("./woff2/OpenSans.woff2") format("woff2"),
+        url("./woff/OpenSans.woff")   format("woff"),
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: italic;
+  font-weight: 100 700;
+  font-display: swap;
+  src: local("Open Sans"),
+       url("./woff2/OpenSans-Italic.woff2") format("woff2"),
+       url("./woff/OpenSans-Italic.woff")   format("woff"),
+}