Explore Metric2

aries-site/package.json

@@ -6,10 +6,10 @@
   "main": "src/pages/index.js",
   "private": true,
   "dependencies": {
-    "aries-core": "*",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@next/mdx": "^13.4.4",
+    "aries-core": "*",
     "next": "13.4.4",
     "react-ga": "^2.7.0",
     "react-syntax-highlighter": "^15.4.4",

aries-site/src/components/seo/Meta.js

@@ -26,7 +26,7 @@ export const Meta = ({
     // in dev mode, we allow unsafe-eval to work with react hot reloader
     process.env.NODE_ENV !== 'production' ? "'unsafe-eval'" : ''
   };
-  font-src *.hpe.com hpefonts.s3.amazonaws.com https://d3hq6blov2iije.cloudfront.net/fonts/;
+  font-src 'self' *.hpe.com hpefonts.s3.amazonaws.com https://d3hq6blov2iije.cloudfront.net/fonts/;
   object-src 'none';`;
 
   /*

aries-site/src/pages/_app.js

@@ -1,9 +1,33 @@
 import { MDXProvider } from '@mdx-js/react';
 import PropTypes from 'prop-types';
 import React, { useEffect } from 'react';
+import localFont from 'next/font/local';
 import { Layout, ThemeMode } from '../layouts';
 import { components } from '../components';
 
+const metric = localFont({
+  src: [
+    {
+      path: '../../public/fonts/metric-2-regular.woff2',
+      weight: '400',
+    },
+    {
+      path: '../../public/fonts/metric-2-medium.woff2',
+      weight: '500',
+    },
+    {
+      path: '../../public/fonts/metric-2-light.woff2',
+      weight: '300',
+    },
+    {
+      path: '../../public/fonts/metric-2-bold.woff2',
+      weight: '700',
+    },
+  ],
+  // src: '../../public/fonts/metric-2-regular.woff2',
+  variable: '--font-metric',
+});
+
 const slugToText = str => str.split('-').join(' ');
 
 const backgroundImages = {
@@ -91,18 +115,20 @@ function App({ Component, pageProps, router }) {
 
   return (
     <ThemeMode>
-      <Layout
-        title={title || ''}
-        topic={topic}
-        // What's new page is MDX
-        isLanding={!topic && title !== 'whats new'}
-        // applies card images to the "hub" pages
-        backgroundImage={backgroundImages[title]}
-      >
-        <MDXProvider components={components}>
-          <Component {...pageProps} />
-        </MDXProvider>
-      </Layout>
+      <div className={metric.className}>
+        <Layout
+          title={title || ''}
+          topic={topic}
+          // What's new page is MDX
+          isLanding={!topic && title !== 'whats new'}
+          // applies card images to the "hub" pages
+          backgroundImage={backgroundImages[title]}
+        >
+          <MDXProvider components={components}>
+            <Component {...pageProps} />
+          </MDXProvider>
+        </Layout>
+      </div>
     </ThemeMode>
   );
 }