what is the process for customizing the default font in tailwindcss?

I recently started a new project using React, and I have integrated a custom font in my index.css file. I have also included the necessary font files.

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
@import url(assets/font/iransans/index.css);

html {
  margin: 0;
  font-family:
    "iransans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Roboto",
    "Oxygen",
    "Ubuntu",
    "Cantarell",
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: "iransans", source-code-pro, Menlo, Monaco, Consolas,
    "Courier New", monospace;
}

html {
  scrollbar-gutter: scroll;
}

body {
  margin: 0;
  font-family:
    "iransans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Roboto",
    "Oxygen",
    "Ubuntu",
    "Cantarell",
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

In my tailwind.config.ts file, I have included my custom font in the font family section.

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ["iransans", ...defaultTheme.fontFamily.sans],
        serif: ["iransans", ...defaultTheme.fontFamily.serif],
        mono: ["iransans", ...defaultTheme.fontFamily.mono],
        iransans: "iransans",
      },
    },
  },

...
}

However, I have encountered an issue where the custom font is not automatically applied to all elements. For instance, if I want a span element to use this custom font, I must set the font manually.

<span className="font-iransans">تست</span>
htmlcssreactjsfontstailwind-css

Answer №1

To customize the default fonts in tailwind CSS, the sans style is the default for all elements. To change this, you can modify the tailwind.config file as shown below:

theme: {
      fontFamily: {
        sans: ["iransans", "Sans-serif"],
        ...,
      },
  },

After making this change, all elements will automatically use the new font.

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

Answer №2

To customize the default font in tailwindcss, simply insert the following code snippet into your main CSS file, app.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
....
@font-face {
  font-family: 'font-geist';
  src: url('/fonts/Geist-UltraLight.woff2') format('woff2');
}

@layer base {
  html {
    margin: 0;
    font-family: "font-geist", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Current recommended method for updating innerHTML with properly formatted text?

My understanding is that using innerHTML on an element can be risky, as malicious users could potentially inject harmful content such as <script> tags. This question shows there are multiple alternative tags, some of which are non-standard. In my s ...

javascripthtml

Utilize JavaScript to compute and implement a deeper shade of background color

To dynamically apply darker shades of background using JavaScript, I have devised the following code. .event-list .bg{ background:#eee; padding:5px; } .grid .event-list:first-child .bg{ background: #2aac97 } .grid .event-list:nth-child(2) .bg{ backgrou ...

javascripthtmlcsscolors

Filtering DataGrid columns with an external button in Material-UI: A step-by-step guide

Imagine having a datagrid table structured as shown below: import * as React from 'react'; import { DataGrid, GridToolbar } from '@mui/x-data-grid'; import { useDemoData } from '@mui/x-data-grid-generator'; const VISIBLE_FIEL ...

javascriptreactjsmaterial-ui

Encountering an issue where an error message indicates that a variable previously declared is now undefined

Currently, I am working on developing a small test application to enhance my coding skills. However, I have encountered a roadblock while attempting to display dummy information from a mongodb database that I have set up. I have tried various solutions bu ...

javascripthtmlnode.jsmongodbejs

Issue: Hydration unsuccessful due to the initial UI not aligning with the server-rendered content

I encountered an Unhandled Runtime Error Error: Failed Hydration due to initial UI not matching server render. In my NEXT.js (tailwind CSS) Application Please provide assistance in resolving this issue. import React from "react"; import { Soc ...

javascriptreactjsnext.jstailwind-css

Height of dropdown items in the horizontal navbar

I am working on a navbar that includes a dropdown menu. Currently, the dropdown items are being displayed horizontally in full width with a larger height. However, I would like them to be displayed vertically in full width and with a smaller, normal height ...

csstwitter-bootstrap-3

Problem with Clerk's authentication() functionality

Currently facing an issue with the Clerk auth() helper (auth() documentation) while working with react and next 13 (app router). When trying to access both userId and user from auth(), const { userId, user } = auth();, it seems that userId contains a val ...

javascriptreactjstypescriptnext.jsclerk

The MUI persistent drawer navigation bar becomes dysfunctional when accessing a specific route

Exploring the MUI library for the first time, I successfully created a navigation bar that functions properly for one route (Dashboard). However, when attempting to implement it on the candidate route, it collapses as shown in this Screengrab of collapsed ...

javascriptreactjsmaterial-ui

Determine the overall width of a JSX element

Is there a way to retrieve the width of a JSX.Element? In a traditional setup, I would typically use something like: const button = document.createElement('button'); document.body.appendChild(button) window.getComputedStyle(button).width However ...

javascriptreactjs

The server-side rendering of a React, Webpack, and Node project is encountering issues due to the undefined 'window' object

During my attempts to execute server-side rendering with components that reference the window object, I encountered an error. Specifically, when including slick-carousel (https://github.com/kenwheeler/slick), the following error arose: var Slick = window. ...

node.jsexpressreactjswebpackserverside-javascript

Error in Deploying Website on Vercel

I've been facing some challenges while trying to deploy my website using Vercel. Despite having the API URL and token stored in index.js within the consts folder, I couldn't proceed with the deployment process. I attempted to move the API informa ...

reactjsdeploymentvercel

Encountering a connection issue: SMTP connect() failure when using PHPmailer with reCaptcha on a CentOS server

My company is looking to set up a website on a CentOS server that includes a contact form with captcha. I came across PHPMailer and got the code working on my local machine, but when trying to send emails on CentOS, I encountered an error saying "SMTP conn ...

phphtmlphpmailerrecaptcha

Unable to submit form in Nextjs using react-bootstrap

Instructions To create a registration form, follow these steps: Fill out the form on the register page and then click submit. The react-bootstrap button will trigger the handleSubmit() function using onSubmit={}. Expected vs Actual Outcome I attempted va ...

javascriptnode.jsreactjsnext.jsreact-bootstrap

Utilize the MaterialUI DataGrid to showcase nested object values in a visually appealing

Hey there, fellow coders! I'm currently working on fetching data from an API and displaying it in a data grid using React.js. Here's the format of the data I'm receiving from the API: {data: Array(200)} data : (200) [{…}, {…}, {…}, { ...

javascriptreactjsmaterial-ui

Change MaterialUI MuiCheckbox icons default properties

I am looking to customize the icons used in MuiCheckbox, specifically the icon and indeterminateIcon props with my own SVG icons throughout my project. In my project, I have implemented a custom theme: import { CustomBlankIcon, CustomIndeterminateIcon } f ...

reactjsmaterial-uimaterial-design

different ways to dynamically increase CSS ID in PHP

Is there a way to dynamically increment my CSS ID using PHP? foreach ($query_cat->result() as $row_cat) { $row_cat_id = $row_cat->id; echo '<div class="product-wrapper">'; echo '<div id="product-header' . $r ...

phpcss

Is there a way to make the product list view in Magento much more compact and smaller in size?

My issue is pretty straightforward. I find Magento's product display in list view to be too large for my liking. The images are bigger than necessary and each product takes up too much space. I want to resize the listing so that each product only occu ...

htmlcssmagento

What would be more efficient: inputting all items in a form at once or adding them one by one consecutively

My mind is preoccupied with a dilemma: is it better to have all possible items already on the form, or should items only be added when the user requests them? Let me elaborate - Imagine I have a form with 4 input fields and one textarea. Alongside that, t ...

jqueryhtmlcssajaxforms

Uploading a File to a Remote WCF Service via jQuery AJAX on Different Domains

I am currently facing some difficulties in achieving the following task and would really appreciate any guidance you can provide. My goal is to upload a file from my HTML5 site to a cross domain WCF service hosted in IIS 7.5. Additionally, I need to send ...

c#jqueryasp.nethtmlwcf

Learn how to utilize Javascript to easily drag and drop an image within the same block

I am encountering an issue with dragging and dropping images or swapping them using JavaScript. I have tried to implement this in the code below, where clicking on icons moves them onto a colored div. However, I am now trying to drag and drop the images wi ...

javascriptjqueryhtmlcss