- {fonts.map((font) => (
-
- ))}
+
+ {fonts.map((font) => {
+ let href: string;
+ if (font === "Font Awesome") {
+ href =
+ "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css";
+ } else {
+ const name = font.replace(/\s+/g, "+");
+ href = `https://fonts.googleapis.com/css2?family=${name}&display=swap`;
+ }
+
+ return
;
+ })}
+
{description}
{demos.map((demo, index) => (
// eslint-disable-next-line react/jsx-key
diff --git a/packages/documentation/src/components/Demos/DemoPageFont.tsx b/packages/documentation/src/components/Demos/DemoPageFont.tsx
deleted file mode 100644
index 5c96543421..0000000000
--- a/packages/documentation/src/components/Demos/DemoPageFont.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { ReactElement } from "react";
-import Head from "next/head";
-
-import GoogleFont from "components/GoogleFont";
-
-export interface DemoPageFontProps {
- font: string;
-}
-
-export default function DemoPageFont({
- font,
-}: DemoPageFontProps): ReactElement {
- if (font === "Font Awesome") {
- return (
-
-
-
- );
- }
-
- return
;
-}
diff --git a/packages/documentation/src/components/GoogleFont.tsx b/packages/documentation/src/components/GoogleFont.tsx
deleted file mode 100644
index c4fe85a0eb..0000000000
--- a/packages/documentation/src/components/GoogleFont.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { memo, ReactElement } from "react";
-import Head from "next/head";
-
-export interface GoogleFontProps {
- font: string;
-}
-
-export default memo(function GoogleFont({
- font,
-}: GoogleFontProps): ReactElement {
- const name = font.split(" ").join("+");
-
- return (
-
-
-
- );
-});
diff --git a/packages/documentation/src/components/Markdown/Markdown.tsx b/packages/documentation/src/components/Markdown/Markdown.tsx
index bedffa6b79..45bb30cc97 100644
--- a/packages/documentation/src/components/Markdown/Markdown.tsx
+++ b/packages/documentation/src/components/Markdown/Markdown.tsx
@@ -11,8 +11,6 @@ import React, {
import cn from "classnames";
import { useRouter } from "next/router";
-import GoogleFont from "components/GoogleFont";
-
import styles from "./Markdown.module.scss";
import { markdownToHTML } from "./utils";
@@ -116,7 +114,6 @@ export default function Markdown({
return (
<>
-
{
return (
<>
-
-
{
const { theme } = this.props;
return (
-
+
+
+
+