Login/Register
Custom google font (poppins) in Tailwind CSS?
Asked Answered
importfontstailwind-cssgoogle-fonts
S

7

10

I want to use the Google font called poppins and this is the url of the font https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap. Does anyone know hot to do this?

Sixtynine answered 19/3, 2021 at 16:51 Comment(0)
U
18

There are three steps to getting a custom font into a tailwindcss project.

  1. Getting the font into the project
  2. Configuring tailwindcss to use the font.
  3. Using custom font-family

1. Getting the font into the project (Reply by: Adam Wathan)

Tailwind doesn't do anything special to auto-import fonts or anything, so you need to import them the same way you would in a regular project, either by adding the Google stylesheet reference to the top of your HTML like this:

    <!-- index.html or similar -->
    <head>
      ...
      <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
    </head>

...or by importing your fonts with @font-face declarations at the beginning of your CSS file:

/* Example file: styles.css */

/* poppins-regular - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins-v15-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}

Which way? According to this SO answer: mostly prefer link

2. Configuring tailwindcss to use the font - tailwind docs

Customizing Font Families

By default, Tailwind provides three font family utilities: a cross-browser sans-serif stack, a cross-browser serif stack, and a cross-browser monospaced stack. You can change, add, or remove these by editing the theme.fontFamily section of your Tailwind config.

      // tailwind.config.js
      module.exports = {
        theme: {
          fontFamily: {
           // Note: This is @notapatch and not the docs
           //       I think what it is trying to say is that if you define
           //       a custom font here you are also removing the default
           //       font families sans, serif and mono.
           //
           - 'sans': ['ui-sans-serif', 'system-ui', ...],
           - 'serif': ['ui-serif', 'Georgia', ...],
           - 'mono': ['ui-monospace', 'SFMono-Regular', ...],
           + 'display': ['Poppins', ...],
           + 'body': ['"Open Sans"', ...],
          }
        }
      }

// Docs end:

Customizing font-family with extend

The font-family docs don't cover this, but I've seen examples of extending the font-family instead of removing the default fonts sans serif and mono ... this is from a github issue by simonswiss

    // tailwind.config.js
    const defaultTheme = require('tailwindcss/defaultTheme')
    
    module.exports = {
      theme: {
    +    extend: {
          fontFamily: {
            sans: ['Poppins', ...defaultTheme.fontFamily.sans]
          }
    +    }
      }
    }

... will add Poppins to the font-sans stack, and preserve the other font families like font-mono, font-serif etc.

3. Using custom Font-Family

Using a custom font-family is a matter of adding "font" to the fontFamily name. In our case, font-display and font-sans.

    <h1 class="font-display">Example display font</h1>
    
    <p class="font-sans">Example text in body</p>

Note: Changed font to Poppins throughout answer to give consistency across text.

Unsupportable answered 19/7, 2021 at 14:49 Comment(0)
H
10

If you want to directly import and use it from Google fonts, Then add the <link> in your <head> section of your index.html file.

Then in your tailwind.config.js file

module.exports = {
  theme: {
     extend: {
        fontFamily: {
           'poppins': ['Poppins'],
        }
     }
  }
}

By defining your own font within extend will preserve the default theme fonts and add/extend your own font.

Now, you can use your font with the class font-poppins along with font-sans etc You can add fallback font by adding it to the poppins array in the theme extension.

For more, please refer to the below links, https://tailwindcss.com/docs/theme

https://tailwindcss.com/docs/font-family#customizing

Houseless answered 25/3, 2021 at 2:8 Comment(0)
G
6

1. Import font

You can use @import... directive from the Google Font website to import web fonts in your global.css file. Be sure to put the directive at the beginning or it is invalid

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

2. Use the font

As has mentioned by the other anwsers, you can configure the tailwind.config.js to generate a reusable utilities in your project. Besides, you can also use square bracket notation to generate a class on the fly. Just add font-['Poppins'] to class properties.

Here is tailwind playground example: https://play.tailwindcss.com/xZpx31j8W0

Gunderson answered 19/1, 2022 at 7:23 Comment(0)
A
5

I have done it this way for vite + react + tailwind CSS + shadcn/ui.

In my index.css file, I simply add this

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: 'Poppins', sans-serif;
  }
}

My tailwind CSS config was not picking the font-family 'Poppins' and I want to use it everywhere (default)

Abuse answered 22/1 at 14:11 Comment(1)
The best answer IMO! – Uda
H
2

Here's what I did

In your main scss file

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

then in tailwind config....

theme: {
        extend: {
            fontFamily: {
                sans: ['Poppins', ...defaultTheme.fontFamily.sans],
            },
Hagar answered 2/12, 2021 at 17:48 Comment(0)
T
1

I have this configuration in a .css file

@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Regular'), local('Nunito-Regular'),
    url('~assets/fonts/Nunito-400-cyrillic-ext1.woff2') format('woff2');
}

And this in my tailwind.config.js file

fontFamily: {
  // https://tailwindcss.com/docs/font-family#customizing
  sans: [
    'Nunito'
  ],
},

Thus I can use it in my markup with

<p class="font-sans">
  I'm a sans-serif paragraph.
</p>

So yeah, my font is local but maybe my configuration can give you some insight on how to setup it on your side too.

Then, you could font-face's url key to set in the google fonts url as shown here: https://css-tricks.com/dont-just-copy-the-font-face-out-of-google-fonts-urls/

Totten answered 19/3, 2021 at 17:9 Comment(0)
A
0

I have tried and this was the method that worked for me

Configure Tailwind for Poppins: Open your tailwind.config.js file and extend the fontFamily section to include Poppins

theme: {
 extend: {
    fontFamily: {
     poppins: ['Poppins', 'sans-serif'],
   },
  },
 },
}

Use Poppins in HTML: Now, you can use the Poppins font in your HTML directly with Tailwind CSS classes:

<div class="font-poppins">This text uses the Poppins font.</div>

Make sure to rebuild your stylesheets after making changes to the tailwind.config.js file:

npx tailwindcss-cli -i src/input.css -o ./build/output.css
Actaeon answered 14/12, 2023 at 14:40 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.