(feat): Adopting next/fonts for loading fonts from google in nextjs projects.

[JayaKrishnaNamburu]

The refactor still needs to happen on project level. But, there are a lot of edge cases covered till now

• Using fonts on the nodes directly
• Using different fonts on different conditions, like media, selector etc
• Using fonts on the component style sheet
• Using fonts on the project style sheet
• Using fonts on the default-style-sheet
• When the plugin is used, there is no need to append link attrs and loading fonts from Google anymore in the _app.js file.

[JayaKrishnaNamburu]

Here is a reference of the code changes on the component level when users are using a google font

import React from 'react'

import {
  Nova_Oval,
  Inter,
  Chivo_Mono,
  Sedgwick_Ave_Display,
} from 'next/font/google'

const sedgwick_ave_display = Sedgwick_Ave_Display({
  preload: false,
  variable: '--sedgwick_ave_display-font',
  weight: '400',
})

const chivo_mono = Chivo_Mono({
  preload: false,
  variable: '--chivo_mono-font',
})

const inter = Inter({
  preload: false,
  variable: '--inter-font',
})

const nova_oval = Nova_Oval({
  preload: false,
  variable: '--nova_oval-font',
  weight: '400',
})

const AppComponent = (props) => {
  return (
    <>
      <div
        className={`component-container ${sedgwick_ave_display.variable} ${chivo_mono.variable} ${inter.variable} ${nova_oval.variable} `}
      >
        <div className="component-container1">
          Lorem Ipsum has been the industry&apos;s standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book.
        </div>
        <div className="component-container2">
          Lorem Ipsum has been the industry&apos;s standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book.
        </div>
        <div className="component-primary-button">
          Lorem Ipsum has been the industry&apos;s standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book.
        </div>
      </div>
      <style jsx>
        {`
          .component-container {
            width: 100%;
            height: 400px;
            display: flex;
            position: relative;
            align-items: flex-start;
            flex-direction: column;
          }
          .component-container1 {
            font-family: var(--inter-font);
          }
          .component-container2 {
            margin-top: 100px;
            font-family: var(--sedgwick_ave_display-font);
            font-weight: 400;
          }
          .component-primary-button {
            margin-top: 100px;
            font-family: var(--nova_oval-font);
            font-weight: 400;
          }
          @media (max-width: 767px) {
            .component-container1 {
              font-family: var(--chivo_mono-font);
            }
          }
        `}
      </style>
    </>
  )
}

export default AppComponent

[JayaKrishnaNamburu]

And the styles that are added as the default styles using html tags and injected into document.js. Doesn't work with this way of next/fonts. So, we need to handle them using

import "./style.css";

import { Inter } from "next/font/google";

const inter = Inter({
  preload: false,
  variable: "--inter-font"
});

import React from "react";
export default function MyApp({
  Component: Component,
  pageProps: pageProps
}) {
  React.useEffect(() => {
    import("@lottiefiles/lottie-player");
    return;
  });
  return <main className={` ${inter.variable} `}><style jsx global>{`html {
  font-family: ${inter.style.fontFamily};
  font-size: 16px;
}

body {
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.15;
  color: var(--dl-color-gray-black);
  background-color: var(--dl-color-gray-white);
}`}</style><style jsx global>{`html {
  line-height: 1.15;
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
}

p,
li,
ul,
pre,
div,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focus,
[type="button"]:-moz-focus,
[type="reset"]:-moz-focus,
[type="submit"]:-moz-focus {
  outline: 1px dotted ButtonText;
}

a {
  color: inherit;
  text-decoration: inherit;
}

input {
  padding: 2px 4px;
}

img {
  display: block;
}`}</style><Component {...pageProps} /></main>;
}

And we can omit injecting the whole fonts into the project that loads from google.

[codecov]

Codecov Report

Patch coverage: 10.74% and project coverage change: -1.85 ⚠️

Comparison is base (53c7b8a) 70.52% compared to head (a9ec89f) 68.68%.

❗ Current head a9ec89f differs from pull request most recent head 78fa46f. Consider uploading reports for the commit 78fa46f to get more accurate results

Additional details and impacted files

@@               Coverage Diff               @@
##           development     #771      +/-   ##
===============================================
- Coverage        70.52%   68.68%   -1.85%     
===============================================
  Files              170      174       +4     
  Lines             6999     7204     +205     
  Branches          2026     2087      +61     
===============================================
+ Hits              4936     4948      +12     
- Misses            2060     2253     +193     
  Partials             3        3              

Impacted Files	Coverage Δ
packages/teleport-plugin-css/src/index.ts	80.24% <ø> (ø)
...ages/teleport-plugin-react-styled-jsx/src/index.ts	77.19% <ø> (ø)
...kages/teleport-project-generator-next/src/index.ts	100.00% <ø> (ø)
...project-generator-next/src/next-project-mapping.ts	100.00% <ø> (ø)
...ort-project-generator-next/src/project-template.ts	100.00% <ø> (ø)
...kages/teleport-project-generator-next/src/utils.ts	94.23% <ø> (ø)
...-project-plugin-next-fonts/src/component-plugin.ts	0.00% <0.00%> (ø)
...es/teleport-project-plugin-next-fonts/src/fonts.ts	0.00% <0.00%> (ø)
...es/teleport-project-plugin-next-fonts/src/index.ts	0.00% <0.00%> (ø)
...es/teleport-project-plugin-next-fonts/src/utils.ts	0.00% <0.00%> (ø)
... and 4 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[JayaKrishnaNamburu]

Btw this will upgrade Next to 13 too 👍 when the plugin is used. Since, next/fonts works only on 13

[JayaKrishnaNamburu]

Screen.Recording.2023-04-21.at.20.07.17.mov