How to Change Fonts in React Components

The three ways to set fonts in React

React itself does not handle fonts — it renders HTML and CSS to the browser, which displays the text. To change a font in React, you write CSS the same way you would in any web project: by targeting HTML elements with style rules. The difference is where and how you write that CSS, depending on whether you are using inline styles, CSS files, or a CSS-in-JS library.

The most common approaches are inline styles (written directly in your component), external CSS files (linked in your HTML), and CSS modules (scoped to individual components). Each has trade-offs in readability and maintainability, and the right choice depends on your project structure and team preference.

Key Takeaways

Inline styles in React use JavaScript objects with camelCase property names, so font-family becomes fontFamily.
External CSS files work in React exactly as they do in plain HTML — link them in your index.html and target elements by class or id.
CSS modules let you write CSS in separate files and import them into components, keeping styles scoped to avoid naming conflicts.
Web fonts from Google Fonts or other services can be loaded via a <link> tag in your HTML head or imported in your CSS.
The font-family property accepts a comma-separated list of fallback fonts, so always include a generic family like serif or sans-serif at the end.

Using inline styles to set a font

Inline styles are the quickest way to test a font change. In React, you pass a JavaScript object to the style attribute, with CSS property names converted to camelCase. So font-family becomes fontFamily, and font-size becomes fontSize.

Here is a simple example:

<h1 style={{ fontFamily: 'Georgia, serif', fontSize: '32px' }}>My Heading</h1>

The outer curly braces tell React you are writing JavaScript. The inner braces create the style object. Notice that font sizes and other measurements are strings with units — '32px', not just 32.

Inline styles are useful for quick prototypes or one-off changes, but they become hard to maintain if many components need the same font. For larger projects, external CSS or CSS modules are cleaner.

Loading web fonts from Google Fonts or other services

If you want to use a font that is not installed on most computers — like Roboto, Open Sans, or Playfair Display — you need to load it from a web font service. Google Fonts is free and widely used.

To use a Google Font, add a <link> tag to the <head> section of your public/index.html file. For example, to load Roboto:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Once the link is in place, use the font name in any CSS rule. In an inline style, that looks like:

<p style={{ fontFamily: 'Roboto, sans-serif' }}>This uses Roboto.</p>

Always include a fallback font at the end — sans-serif, serif, or monospace — so the page remains readable if the web font fails to load.

Setting fonts with external CSS files

For larger projects, keeping CSS in separate files is cleaner than inline styles. Create a CSS file — for example, styles.css — and link it in your public/index.html:

<link rel="stylesheet" href="styles.css">

Then write your CSS rules as you normally would:

h1 { font-family: 'Georgia, serif'; font-size: 32px; } .highlight { font-family: 'Roboto, sans-serif'; font-weight: bold; }

In your React component, add the class name to the element:

<h1 className="highlight">My Heading</h1>

This approach works well when you have a consistent design system and want to reuse the same styles across many components. The downside is that CSS rules are global — if two components use the same class name, they will share the same styles, which can cause conflicts in larger projects.

Using CSS modules to scope styles to a component

CSS modules solve the naming conflict problem by automatically scoping CSS to a single component. Create a file named Button.module.css next to your Button.js component:

.button { font-family: 'Roboto, sans-serif'; font-size: 16px; font-weight: bold; }

Then import the styles in your component and use them:

import styles from './Button.module.css'; export default function Button() { return <button className={styles.button}>Click me</button>; }

React automatically converts the class name to a unique identifier, so .button in one module will not conflict with .button in another. This is especially useful in large projects where many developers are working on different components.

Changing font weight and style

Font weight controls how thick or thin the text appears. Common values are 400 (normal), 700 (bold), and 300 (light). If you are using a web font, check what weights are available — not all fonts offer every weight.

Font style is usually normal or italic. Here is an example using inline styles:

<p style={{ fontFamily: 'Roboto, sans-serif', fontWeight: 700, fontStyle: 'italic' }}>Bold italic text</p>

In external CSS, use the same property names with hyphens:

p { font-family: 'Roboto, sans-serif'; font-weight: 700; font-style: italic; }

If you load a web font from Google Fonts, the URL includes a wght parameter that specifies which weights to download. For example, wght@400;700 loads only normal and bold weights, which keeps the file size smaller.

Frequently Asked Questions

Do I need to install fonts locally to use them in React?

No. Web fonts like Google Fonts are served from a remote server, so users download them when they visit your site. System fonts — like Arial, Georgia, or Helvetica — are already installed on most computers, so you can use them without any setup. For custom fonts that are not available online, you can upload them to your project and reference them with the @font-face rule in CSS.

What is the difference between font-family and font-face?

font-family tells the browser which font to use for text. @font-face is a CSS rule that tells the browser where to download a custom font file from. You use @font-face once to register the font, then use font-family in your styles to apply it.

Why does my web font not load?

The most common reasons are a broken link (check the URL in your <link> tag), a slow network (the font takes time to download), or a browser that does not support the font format. Always include a fallback font so text remains readable while the web font loads. You can also use the font-display: swap parameter in Google Fonts URLs to show text immediately in the fallback font.

Can I use custom fonts I designed myself?

Yes. Upload your font file (usually .woff or .woff2 format) to your project, then use @font-face in your CSS to register it. For example: @font-face { font-family: 'MyFont'; src: url('/fonts/myfont.woff2') format('woff2'); }. Then use font-family: 'MyFont' in your styles.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.