var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var i=a=>l(a,"__esModule",{value:!0});var f=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),y=(a,n)=>{for(var s in n)l(a,s,{get:n[s],enumerable:!0})},o=(a,n,s,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of N(n))!g.call(a,c)&&(s||c!=="default")&&l(a,c,{get:()=>n[c],enumerable:!(t=m(n,c))||t.enumerable});return a},w=(a,n)=>o(i(l(a!=null?u(k(a)):{},"default",!n&&a&&a.__esModule?{get:()=>a.default,enumerable:!0}:{value:a,enumerable:!0})),a),v=(a=>(n,s)=>a&&a.get(n)||(s=o(i({}),n,1),a&&a.set(n,s),s))(typeof WeakMap!="undefined"?new WeakMap:0);var d=f((T,r)=>{r.exports=_jsx_runtime});var S={};y(S,{default:()=>j,frontmatter:()=>x});var e=w(d()),x={title:"How to Add Google Fonts to a Tailwind Project",tags:["tailwind","javascript","react"],summary:"Learn how to easily use any Google font in your tailwind project",publishedAt:"July 29, 2022",image:"banner.jpeg"};function p(a){let n=Object.assign({h2:"h2",a:"a",span:"span",p:"p",strong:"strong",code:"code",div:"div",pre:"pre",blockquote:"blockquote",h3:"h3"},a.components),{Zoom:s,Image:t}=n;return t||h("Image",!0),s||h("Zoom",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.h2,{id:"overview",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#overview",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Overview"]}),` `,(0,e.jsx)(n.p,{children:"In this tutorial you will learn how to add, and use google fonts in your Tailwind project in simple steps. If you want to learn how to install and configure Tailwind with CSS-in-JS in a react app, you can read this guide."}),` `,(0,e.jsxs)(n.h2,{id:"prerequisite",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#prerequisite",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Prerequisite"]}),` `,(0,e.jsxs)(n.p,{children:["You will need to have a Tailwind project set up to continue, if you already have one you can skip to the next step. You can start by cloning this ",(0,e.jsx)(n.a,{href:"https://github.com/elvisduru/tailwind-react-starter",children:"tailwind-react starter"})," I created for this tutorial. If you use a different framework, you can read the official Tailwind ",(0,e.jsx)(n.a,{href:"https://tailwindcss.com/docs/installation/framework-guides",children:"installation guide for your framework here."})]}),` `,(0,e.jsxs)(n.h2,{id:"finding-a-google-font",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#finding-a-google-font",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Finding a Google Font"]}),` `,(0,e.jsxs)(n.p,{children:["To add Google fonts to your project you first need to find the font of your choice at ",(0,e.jsx)(n.a,{href:"https://fonts.google.com/",children:"Google Fonts"})]}),` `,(0,e.jsxs)(n.p,{children:["I have chosen to use the ",(0,e.jsx)(n.a,{href:"https://fonts.google.com/specimen/Satisfy",children:"Satisfy font"})," for this tutorial, but you can use any other font."]}),` `,(0,e.jsx)(s,{children:(0,e.jsx)(t,{alt:"Satify Font Family - Google Fonts",src:"/static/how-to-add-google-fonts-tailwind/satisfy-font-google.png",width:611,height:511})}),` `,(0,e.jsx)(n.p,{children:"Select the styles you need for your app by clicking the button with the font style and weight:"}),` `,(0,e.jsx)(s,{children:(0,e.jsx)(t,{alt:"Selecting font styles - Google Fonts",src:"/static/how-to-add-google-fonts-tailwind/select-fonts-google.png",width:1210,height:656})}),` `,(0,e.jsx)(n.p,{children:"When you\u2019re done selecting, you can check the sidebar at the right and copy the HTML snippet Google Font generates for you. You can find that at the section with the \u201CUse for the web\u201D heading:"}),` `,(0,e.jsx)(s,{children:(0,e.jsx)(t,{alt:"Google Fonts HTML Code",src:"/static/how-to-add-google-fonts-tailwind/google-fonts-html.png",width:637,height:482})}),` `,(0,e.jsxs)(n.p,{children:["Also take note of the CSS rule to specify the font family. For example, the CSS rule for the font I\u2019m adding is ",(0,e.jsx)(n.strong,{children:(0,e.jsx)(n.code,{children:'"Satisfy", cursive;'})}),". We\u2019ll need that when we\u2019re configuring Tailwind to use our google font."]}),` `,(0,e.jsxs)(n.h2,{id:"adding-a-google-font",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#adding-a-google-font",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Adding a Google Font"]}),` `,(0,e.jsxs)(n.p,{children:["Now that we have found our font of choice, we can add the Google font by pasting the HTML code generated from the Google Font website into the ",(0,e.jsx)(n.code,{children:""})," of our project\u2019s root ",(0,e.jsx)(n.code,{children:"index.html"})," file:"]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"index.html"}),(0,e.jsx)(n.pre,{className:"language-html",children:(0,e.jsxs)(n.code,{className:"language-html code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token doctype",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"html"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"lang"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"en",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"head"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"charset"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"UTF-8",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"link"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"rel"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"icon",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"type"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"image/svg+xml",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"href"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"/vite.svg",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"viewport",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"content"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"width=device-width, initial-scale=1.0",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"title"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Vite + React",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:""}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"link"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"rel"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"preconnect",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"href"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"https://fonts.googleapis.com",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"link"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"rel"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"preconnect",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"href"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"https://fonts.gstatic.com",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"crossorigin"}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"link"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"href"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"https://fonts.googleapis.com/css2?family=Satisfy&display=swap",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"rel"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"stylesheet",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"body"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"id"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"root",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"type"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"module",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"/src/main.jsx",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token script"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,e.jsxs)(n.h2,{id:"configure-tailwind-to-use-a-google-font",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#configure-tailwind-to-use-a-google-font",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Configure Tailwind to use a Google Font"]}),` `,(0,e.jsxs)(n.p,{children:["Finally, to configure your Tailwind theme to use a Google font, you need to edit the\xA0",(0,e.jsx)(n.strong,{children:(0,e.jsx)(n.code,{children:"theme.fontFamily"})})," section of your Tailwind config. Navigate to the ",(0,e.jsx)(n.code,{children:"tailwind.config.js"})," file in your project and edit the ",(0,e.jsx)(n.code,{children:"theme.fontFamily"})," section with the CSS rule for the Google font you added. For our example, the CSS rule is ",(0,e.jsx)(n.code,{children:'"Satisfy", cursive;'}),"."]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"tailwind.config.js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token doc-comment comment",children:["/** ",(0,e.jsx)(n.span,{className:"token keyword",children:"@type"})," ",(0,e.jsxs)(n.span,{className:"token class-name",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token keyword",children:"import"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'tailwindcss'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"Config",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," */"]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:["module",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"exports"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"content"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token string",children:'"./index.html"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"./src/**/*.{js,ts,jsx,tsx}"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"theme"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"fontFamily"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"display"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token string",children:'"Satisfy"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:'"cursive"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"plugins"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsx)(n.p,{children:"Note: We specify the font-families as string values in the array."}),` `]}),` `,(0,e.jsxs)(n.p,{children:["By specifying our ",(0,e.jsx)(n.code,{children:"fontFamily"})," key as ",(0,e.jsx)(n.code,{children:"display"}),", Tailwind will make it available as a class name ",(0,e.jsx)(n.code,{children:"font-display"}),"."]}),` `,(0,e.jsxs)(n.h2,{id:"using-the-google-font",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#using-the-google-font",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Using the Google Font"]}),` `,(0,e.jsxs)(n.p,{children:["To make use of our new Google font, we only need to specify the ",(0,e.jsx)(n.code,{children:"font-display"})," class name Tailwind creates for us anywhere we need the font style in our code. If you\u2019ve been using the ",(0,e.jsx)(n.a,{href:"https://github.com/elvisduru/tailwind-react-starter",children:"tailwind-react starter"}),", you can navigate to the ",(0,e.jsx)(n.code,{children:"App.jsx"})," file in the ",(0,e.jsx)(n.code,{children:"src"})," directory and then add the ",(0,e.jsx)(n.code,{children:"font-display"})," class name to the ",(0,e.jsx)(n.code,{children:"

"})," element to test the font style."]}),` `,(0,e.jsx)(n.pre,{className:"language-jsx",children:(0,e.jsxs)(n.code,{className:"language-jsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"App"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"max-w-4xl mx-auto text-center h-screen flex flex-col justify-center",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"h1"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"text-6xl font-display",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"Love Code"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"App"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"This will give us the following result:"}),` `,(0,e.jsx)(s,{children:(0,e.jsx)(t,{alt:"Add Google Fonts to Tailwind",src:"/static/how-to-add-google-fonts-tailwind/add-google-fonts-tailwind.png",width:890,height:599})}),` `,(0,e.jsxs)(n.h2,{id:"conclusion",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#conclusion",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Conclusion"]}),` `,(0,e.jsxs)(n.p,{children:["And there it is! We\u2019ve been able to add a Google font to our project using Tailwind CSS. You can find the ",(0,e.jsx)(n.a,{href:"https://github.com/elvisduru/tailwind-react-final",children:"final code on Github for reference"}),"."]}),` `,(0,e.jsxs)(n.p,{children:["If you enjoyed this tutorial and would like to receive the latest updates and tutorials on everything web development related, please subscribe to my newsletter, or follow me on ",(0,e.jsx)(n.a,{href:"https://twitter.com/elvisduru",children:"Twitter"}),"."]}),` `,(0,e.jsxs)(n.h3,{id:"further-reading",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#further-reading",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Further Reading"]}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.a,{href:"https://www.elvisduru.com/blog/twin-macro-use-tailwind-and-css-in-js-in-a-nextjs-app",children:"Twin 101: Use Tailwind CSS + CSS-in-JS in a Next.js App"})," \u{1F525}\u{1F525}"]}),` `,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.a,{href:"https://tailwindcss.com/docs/font-family#customizing-your-theme",children:"Font Family - Tailwind CSS"})}),` `,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.a,{href:"https://tailwindcss.com/docs/installation/framework-guides",children:"Installation: Framework Guides - Tailwind CSS"})})]})}function b(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(p,a)})):p(a)}var j=b;function h(a,n){throw new Error("Expected "+(n?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return v(S);})(); ;return Component;

Javascript Articles

How to Add Google Fonts to a Tailwind Project

Objects in JavaScript

Get the latest articles, in your inbox