Example: add font optimization example

Author: fwang

example/package.json

@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@next/font": "13.0.5",
     "date-fns": "^2.23.0",
     "gray-matter": "^4.0.3",
     "next": "13.0.5",

example/pages/font-css-front.js renamed to example/pages/font-css-font.js

@@ -0,0 +1,20 @@
+import Layout from "../components/layout";
+import { MuseoModerno } from "@next/font/google";
+
+const museo = MuseoModerno({
+  subsets: ["latin"],
+  weight: "400",
+});
+
+export default function Page() {
+  return (
+    <Layout>
+      <article>
+        <h1>Font — @next/font</h1>
+        <p><b>Test 1:</b></p>
+        <p>This uses default font.</p>
+        <p className={museo.className}>This uses MuseoModerno font.</p>
+      </article>
+    </Layout>
+  );
+}

example/pages/font-next-font.js

@@ -39,7 +39,8 @@ 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={`/font-css-font`}>Font — CSS Font</Link><br />
+        <Link href={`/font-next-font`}>Font — @next/font</Link><br />
         <Link href={`/page-does-not-exist`}>404 Page not found</Link><br />
       </section>
     </Layout>