Implementing Google Fonts into Next.js with the combination of Sass, CSS, and Semantic UI React

Question

Implementing Google Fonts into Next.js with the combination of Sass, CSS, and Semantic UI React

I have set up my next.config.js file with the following configuration:

const withSass = require('@zeit/next-sass');
const withCss = require('@zeit/next-css');

module.exports = withSass(withCss({
  webpack (config) {
    config.module.rules.push({
      test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          publicPath: './',
          outputPath: 'static/',
          name: '[name].[ext]'
        }
      }
    })

    return config
  }
}));

This setup allows me to efficiently run semantic ui css files.

However, I'm currently facing a problem. I am unable to import Google font URLs successfully. I attempted to download the ttf file into my file path and reference it using the @import SCSS function. Unfortunately, when doing so, I receive a GET http://localhost:3000/fonts/Cabin/Cabin-Regular.ttf net::ERR_ABORTED 404 (Not Found) error

Here is how I am trying to use the Google font:

@font-face {
  font-family: 'Cabin';
  src: url('/fonts/Cabin/Cabin-Regular.ttf')  format('truetype');
}

$font-size: 100px;
.example {
  font-size: $font-size;
  font-family: 'Cabin', sans-serif;
}

In addition to setting up this configuration, I have also installed the necessary npm dependencies:

"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"file-loader": "^2.0.0",
"next": "^7.0.2",
"node-sass": "^4.9.4",
"react": "^16.6.0",
"react-dom": "^16.6.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.83.0",
"url-loader": "^1.1.2"

css reactjs sass next.js

Answer 1

Answer №1

In the latest version of Next.js 9.3, you have the ability to easily incorporate Google Fonts by copying the @import statement:

@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');

You can then paste this snippet into a CSS file, such as styles/fonts.css:

@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');

.jost {
  font-family: 'Jost', sans-serif;
}

Next, import this CSS file into your global _app.js file like so:

import `../styles/fonts.css`

Now, you will have universal access to the defined class with the Google Font across all Next.js pages.

Answer 2

In the latest version of Next.js 9.3, you have the ability to easily incorporate Google Fonts by copying the @import statement:

@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');

You can then paste this snippet into a CSS file, such as styles/fonts.css:

@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');

.jost {
  font-family: 'Jost', sans-serif;
}

Next, import this CSS file into your global _app.js file like so:

import `../styles/fonts.css`

Now, you will have universal access to the defined class with the Google Font across all Next.js pages.

Answer 3

Answer №2

One solution I recommend is utilizing fonts directly from Google by customizing the _app.js file and including a <link rel="stylesheet" /> in the <Head />

Check out this sample _app.js for reference:

import React from 'react';
import App, { Container } from 'next/app';
import Head from 'next/head';

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;

    return (
      <Container>
        <Head>
          <link
            href="https://fonts.googleapis.com/css?family=Cabin"
            rel="stylesheet"
            key="google-font-cabin"
          />
        </Head>

        <Component {...pageProps} />

        <style global jsx>{`
          body {
            font-family: 'Cabin', sans-serif;
          }
        `}</style>
      </Container>
    );
  }
}

Answer 4

One solution I recommend is utilizing fonts directly from Google by customizing the _app.js file and including a <link rel="stylesheet" /> in the <Head />

Check out this sample _app.js for reference:

import React from 'react';
import App, { Container } from 'next/app';
import Head from 'next/head';

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;

    return (
      <Container>
        <Head>
          <link
            href="https://fonts.googleapis.com/css?family=Cabin"
            rel="stylesheet"
            key="google-font-cabin"
          />
        </Head>

        <Component {...pageProps} />

        <style global jsx>{`
          body {
            font-family: 'Cabin', sans-serif;
          }
        `}</style>
      </Container>
    );
  }
}

Answer 5

Answer №3

 class EnhancedApp extends App {
  render() {
    const { ChildComponent } = this.props
    return (
          <React.Fragment>
            <ChildComponent {...pageProps} />

            <style jsx="true" global>{`

              @import url('https://fonts.googleapis.com/css?family=Barlow');

              body {
                margin: 0;
                font-family: 'Barlow', sans-serif;
              }

            `}</style>

          </React.Fragment>
        </Provider>
      </Container>
    )
  }
}

Using the Google Fonts URL in styled-jsx did the trick for me!

Answer 6

 class EnhancedApp extends App {
  render() {
    const { ChildComponent } = this.props
    return (
          <React.Fragment>
            <ChildComponent {...pageProps} />

            <style jsx="true" global>{`

              @import url('https://fonts.googleapis.com/css?family=Barlow');

              body {
                margin: 0;
                font-family: 'Barlow', sans-serif;
              }

            `}</style>

          </React.Fragment>
        </Provider>
      </Container>
    )
  }
}

Using the Google Fonts URL in styled-jsx did the trick for me!

Answer 7

Answer №4

According to the most recent documentation, you now have the ability to include global CSS by updating the _app.js file and importing your CSS styles. Follow the steps outlined below:

Create a custom _app.js file in the pages directory following the instructions in the documentation.
Add your styles.css file to the pages directory.
Include the styles as shown below:

// _app.js

// Import styles
import './styles.css'

// Function to create custom app
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

// Export app
export default MyApp

And that's it! These styles from styles.css will be applied to all pages and components within your application. Since stylesheets have a global scope, and to prevent conflicts, make sure to only import them within the _app.js file.

Answer 8

According to the most recent documentation, you now have the ability to include global CSS by updating the _app.js file and importing your CSS styles. Follow the steps outlined below:

Create a custom _app.js file in the pages directory following the instructions in the documentation.
Add your styles.css file to the pages directory.
Include the styles as shown below:

// _app.js

// Import styles
import './styles.css'

// Function to create custom app
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

// Export app
export default MyApp

And that's it! These styles from styles.css will be applied to all pages and components within your application. Since stylesheets have a global scope, and to prevent conflicts, make sure to only import them within the _app.js file.

Answer 9

Answer №5

To get it working, I needed to move the files to the static directory. It seems there was a particular configuration for displaying images and fonts in nextjs.

Answer 10

To get it working, I needed to move the files to the static directory. It seems there was a particular configuration for displaying images and fonts in nextjs.

Answer 11

Answer №6

To incorporate Google Fonts or any CDN-linked fonts into your custom functional app, you can follow the steps below:

import Head from 'next/head';

// Custom app as a functional component
function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet"/>
      </Head>
      <Component {...pageProps}/>
    </>
  )
}

MyApp.getInitialProps = async ({ Component, ctx }) => {
  let pageProps = {};
  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx);
  }

  return { pageProps };
};

// Export app
export default MyApp

You can then apply the font family to the body element using CSS to ensure the font is displayed throughout the website:

body {
  font-family: 'Source Sans Pro', sans-serif;
}

Answer 12

To incorporate Google Fonts or any CDN-linked fonts into your custom functional app, you can follow the steps below:

import Head from 'next/head';

// Custom app as a functional component
function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet"/>
      </Head>
      <Component {...pageProps}/>
    </>
  )
}

MyApp.getInitialProps = async ({ Component, ctx }) => {
  let pageProps = {};
  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx);
  }

  return { pageProps };
};

// Export app
export default MyApp

You can then apply the font family to the body element using CSS to ensure the font is displayed throughout the website:

body {
  font-family: 'Source Sans Pro', sans-serif;
}

Answer 13

Answer №7

This is my current method for loading external fonts nonblocking. In the head of _document.js:

<script dangerouslySetInnerHTML={{__html: '</script><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" media="print" onload="this.media=\'all\'" /><script>' }} />

Using dangerouslySetInnerHTML and some script manipulation to bypass the onload issue in _document.js until it is resolved

source

Answer 14

This is my current method for loading external fonts nonblocking. In the head of _document.js:

<script dangerouslySetInnerHTML={{__html: '</script><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" media="print" onload="this.media=\'all\'" /><script>' }} />

Using dangerouslySetInnerHTML and some script manipulation to bypass the onload issue in _document.js until it is resolved

source

Implementing Google Fonts into Next.js with the combination of Sass, CSS, and Semantic UI React

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

What is the reason for the child component having a greater number of props compared to the parent component

Generate a list of items in typescript, and then import them into a react component dynamically

What is the best way to incorporate raw HTML code into a .jsx file within a NextJS website?

How can I apply a blurred effect to the background image of a jumbotron in Bootstrap-vue without affecting the clarity of the text overlay

I'm a complete programming newbie and I want to start learning JavaScript, jQuery, and other programming languages. Where should I

Is there a method available to retrieve the data values stored within these objects?

Setting a state variable in the parent component of a React Route: A step-by-step guide

What is the best way to access bootstrap col and row styles without needing to import the entire framework?

The dialog box is not taking up the full width of the browser window

Delayed hover dropdown navigation menu powered by Bootstrap

Exploring the discrepancies in utilizing the i18n library versus directly incorporating locale from JSON in vue.js

What is the process for incorporating styles into an external widget?

Learn how to effectively transfer parameters between two React components

Issues with data within a Vue.js pagination component for Bootstrap tables

Can React Hooks API be used in TypeScript without using JSX?

Uninterrupted movement within a picture carousel

React createElement function does not include string children when there are multiple children present within the inner HTML

Resetting state upon ISR revalidation in Next.js: a step-by-step guide

Expanding the full width of the bootstrap navbar

Looking for assistance in showcasing information retrieved from an external API