Example: add css font example

Author: fwang

example/pages/font-css-front.js

@@ -0,0 +1,14 @@
+import Layout from "../components/layout";
+
+export default function Page() {
+  return (
+    <Layout>
+      <article>
+        <h1>Font — CSS Font</h1>
+        <p><b>Test 1:</b></p>
+        <p>This uses default font.</p>
+        <p style={{ fontFamily: 'MuseoModerno' }}>This uses MuseoModerno font.</p>
+      </article>
+    </Layout>
+  );
+}

example/pages/index.js

@@ -39,6 +39,7 @@ export default function Home({}) {
         <Link href={`/image-optimization-imported`}>Image Optimization — imported image</Link><br />
         <Link href={`/image-optimization-remote`}>Image Optimization — remote image</Link><br />
         <Link href={`/image-html-tag`}>Image using html image tag</Link><br />
+        <Link href={`/font-css-front`}>Font — CSS Font</Link><br />
         <Link href={`/page-does-not-exist`}>404 Page not found</Link><br />
       </section>
     </Layout>

example/public/fonts/MuseoModerno/MuseoModerno-Regular.ttf

@@ -25,3 +25,8 @@ img {
   max-width: 100%;
   display: block;
 }
+
+@font-face {
+  font-family: 'MuseoModerno';
+  src: url('/fonts/MuseoModerno/MuseoModerno-Regular.ttf') format('truetype');
+}