Menu
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?
398
There are three steps to getting a custom font into a tailwindcss project.
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
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:
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.
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.
198
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
28
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/
29
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;
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
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
