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

Ensuring the bottom border of an element extends to the edge of the screen when utilizing a 960 grid in HTML/CSS

Use React Router to create a link that goes to the same URL but passes along unique state

A guide on extracting content from a PDF file with JavaScript

Unique style pattern for parent links with both nested and non-nested elements

Enhance your React Table with a dynamic Material UI context menu

Customize Material UI's CssBaseline for individual pages, focusing on altering the background color

Invalid anchorEl prop given for MUI component

Select an option from the navigation bar - the chosen item will remain highlighted

React Select only enabling single selection at a time

Customizing checkboxes in React with JSS: A step-by-step guide

Tips for creating a checkbox within a form control or form control label without using a label

What is the process for utilizing Angular's emulated encapsulation attributes on HTML elements that are dynamically added to an Angular component?

Updating user information in MongoDB

Splitting the page into four sections with a unique H layout using CSS styling

Can a DjangoREST+React project be deployed on a single Google Cloud App Engine instance?

Having issues with jQuery not functioning on this specific web page across all browsers. The reason behind this puzzling dilemma remains elusive to me

A guide to resetting items directly from a dropdown select menu

The process of testing the catch part in jest and @testing-library/react

The filter on the mobile version is not displaying correctly

The angular-block-ui feature fails to run my HTML code as a personalized message