How to change font on wordpress theme

New Page

Change your site’s fonts

Choosing a font is a great way to add a unique look to your site. Each theme offers a list of fonts to choose from, including Google Fonts.

To change its fonts, it will use a different option that depends on the theme you are using:

  • If you’re using a theme that’s compatible with the site editor (i.e. you can see Appearance → Editor in your dashboard), you can change your site’s fonts using Styles in the site editor.
  • If you use one of these themes, use the Global Styles option in the WordPress editor.
  • For other themes, you can customize the fonts used on your site via Appearance → Customize → Fonts.

Contents

  1. Change fonts with the site editor
  2. Change fonts with global styles
    1. Font size adjustment
  3. Change fonts in customizer
    1. Adjust font size and style
    2. Save sources
    3. Switch sources
    4. Reset sources
  4. Apply a font to specific text
  5. Use custom fonts
  6. Frequently Asked Questions

Change fonts with the site editor

If your site uses a theme compatible with the site editor, you can modify the fonts of your site using the Typography parameter accessible from the Styles button of the site editor.

An arrow points to the Styles button in the site editor.

^ Index ^

Change fonts with global styles

If your site uses one of these themes, you can use the global styles to change your site’s font

  1. On your dashboard, click Pages.
  2. Click the Add New button or the title of an existing page to open it in the WordPress editor.
    • Select your preferred layout or the default blank layout if adding a new page.
  3. In the editor, click the Global Styles button. The “Aa” button is located between the Settings icon and the green Jetpack button.
  4. Click the dropdown menu under Headings or Base Font to see the available font options.

A box around the Global Styles button found in the upper left corner of the block editor between the Page Settings button and the Jetpack Settings button.

Fonts are set in pairs, one for headings and one for the base font.

  • Fuente del encabezado: elija una fuente para usar en todos los encabezados de su blog. Los ejemplos comunes de texto de encabezado incluyen títulos de publicaciones y páginas, títulos de widgets, encabezados de comentarios y títulos dentro de publicaciones y páginas.
  • Fuente base: elija una fuente para usar en el cuerpo principal del texto y en los menús de su blog.

Haga clic en Publicar para guardar sus nuevas combinaciones de fuentes en el menú Estilos globales o Restablecer para revertir los cambios.

Publishing your changes in the Global Styles menu will not publish the specific page you are working on.

Ajuste del tamaño de fuente

The Block Editor provides options for changing the font size within individual blocks.

To change the heading font size, select a different heading (H1, H2, etc) in your heading block.

The toolbar above a header block with the option to change the size of the header to be used. H5 through H6 options are located in the Block Settings to the side of the Block Editor.

Paragraphs, buttons, and other text blocks have a Typography option in the Block Settings where you can change the text size to a Preset size or type in a custom font size.

✅

If you don’t see the Block Settings menu on the right side of your screen, click the cog icon next to your “Update” or “Publish” button to open the menu.

The right side of the editor with the settings gear activated to show the block settings. Example of the Typography options for a Paragraph block

↑ Índice ↑

Change Fonts in the Customizer

Many themes have options to change the font by going to Appearance → Customize. If you don’t see font options in the Customizer, check to see if your theme supports the Global Styles method of changing fonts.

  1. From your dashboard, go to Appearance → Customize.
  2. Click on the Fonts option in the Customizer.
  3. Click the drop-down under Headings or Base Font to see the available font options.

The Font Customization section of the Customizer showing the Headers and Base Font drop-down menus.

Fonts are set in pairs, one for headings and the other for the base font.

  • Headings: Choose a font to use for all of the headings on your blog. Common examples of heading text include post and page titles, widget titles, comment headers, and headlines inside posts and pages.
  • Base Font: Choose a font to use for the main body text and for the menus on your blog.

Each time you change a font, the live preview refreshes so you can see how that font will look on your blog.

Ajustar el tamaño y el estilo de la fuente

Font style – To adjust the style of your heading fonts, click the option below and to the left of the font. The available styles will vary depending on the font you have chosen.

Font size – To adjust the size of either your heading or your base fonts, click the size option below and to the right for each selected font and select a size from the drop-down menu.

El panel Personalizar fuentes con la opción Títulos configurada en Tangerine, el estilo de fuente configurado en negrita y el tamaño de fuente configurado en enorme.

💡

You can change the global default font sizes with custom CSS.

Save Fonts

Once you are satisfied with your font selections, Publish your site, or Save Draft if you want to continue to customize your site before publishing it.

Change Fonts

Once you’ve selected your custom fonts, you can change them as often as you want.

To change the custom fonts you use, go to Appearance → Customize → Fonts and select a different Header or Base Font. Or, you can switch back to your Theme’s default font by clicking the X to the right of the custom font name.

Once you are satisfied with your changes to the fonts, click Publish or Save Draft to continue customizing your site.

El panel Personalización de fuentes con una flecha que apunta a la X a la derecha de la fuente de título personalizada para restablecer la fuente a la predeterminada del tema. Click the X next to a custom font to restore the default font for the theme.

📌

It may take a few minutes for your fonts to show up on your blog or site after you save them. You may also want to clear your browser’s cache to be sure you’re viewing the latest version of your site.

Reset Fonts

To reset your fonts to the theme’s defaults, you can click the X next to your current font.

  1. Go to Appearance → Customize
  2. Click Fonts.
  3. Click the X next to the custom font to reset the font to the theme’s default.
  4. Click Save Changes.

the Customizer Fonts option with the mouse clicking on the X next to the font selected for Headings and Base Font to set the font back to the theme's default.

↑ Índice ↑

Apply a Font to Specific Text

When choosing fonts, you’ll see options to set the fonts for your overall site, not for individual pages or a specific line of text. This is a best practice when it comes to design — websites look best when there is consistency with the fonts across the entire site. If a site had a bunch of different fonts, it could get unwieldy.

If your goal is to make a piece of text stand out, consider other ways of doing so, such as applying different colors, using a Quote block, or inserting an image.

↑ Índice ↑

Use Custom Fonts

You can use a plugin that installs more fonts on your site. Many plugins will allow you to add your own fonts to your site. When reviewing plugins, check the ratings, the number of positive comments, and the type of support you can expect from the Plugin Developer. If you decide not to use a plugin after testing it, make sure to deactivate/delete it to keep your plugin list clean.

💡

Not sure which font to choose? Get some ideas with this post on nine free and elegant cursive fonts.

↑ Índice ↑

Frequently Asked Questions

Can I connect a Typekit.com account to my WordPress.com site?

It is not possible to connect an outside Typekit.com account to a WordPress.com site or blog.

Will the fonts display in my language?

If you have selected a non-Latin language for the blog under Settings → General, then all of the custom font’s characters will be loaded. If you have selected a Latin language such as English, Italian, Portuguese, or Spanish, then only a smaller subset of the font will be loaded. If some characters aren’t displaying correctly on your blog, please check the language settings first to ensure you have selected the language you are writing in. Then, go to your Customizer → Fonts and re-save the font to make it update to your new language setting.

How can I tell if the font I want to use is supported for my language?

The best way to check if a particular font will display properly in any given language is to try that font in the Customizer and see if the font changes from the theme default. Currently, no Asian languages are supported, and Cyrillic is supported in most, but not all, font families. Wider language support is an area that will continue to grow and improve in the future.

Why does a different font briefly appear before my chosen font appears?

This is called Flash of Unstyled Text (FOUT). The text is displayed in the theme’s default font on slower connections first. This way, people can start reading your content before your custom font loads instead of waiting while looking at a blank page. This might mean that there’s a flash of a different font before the page finishes loading, but overall this is better for viewers on slower connections than seeing a blank screen. If you don’t want this to happen, you can add this CSS code to your site using the CSS Editor in Appearance → Customize → Additional CSS (Premium, Business, eCommerce, and legacy Pro only): .wf-loading body { visibility: hidden; } or html:not(.wf-active) body { display: none; }

Planes y precios versátiles

  • Libre

    plan-free-circle

    Lo mejor para los estudiantes

  • Personal

    plan-personal-circle

    Lo mejor para los aficionados

  • De primera calidad

    plan-premium-circle

    Lo mejor para autónomos

  • Negocio

    plan-business-circle

    Ideal for small businesses

choose a package

Still confused?

Contact Bracket.

Help us improve:

We are always looking to improve our documentation. If this page didn’t answer your question or made you want to know more, let us know! We love to hear your comments. For help, please use the forums or contact the support form. Thanks!

Nom

E-mail

Site Internet

D

How to Change Fonts in Your WordPress Theme (5 Easy Ways)

Dernière mise à jour le 25 juillet 2022 par Equipe éditoriale | Divulgation des lecteurs Divulgation : Notre contenu est pris en charge par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Découvrez comment WPBeginner est financé, pourquoi c’est important et comment vous pouvez nous soutenir.

Partager 747 Partager Tweeter Partager Facebook Messenger WhatsApp E-mail

Are you looking to change the font on your WordPress theme to something different?

Your website text font plays an important role in your site’s design and brand identity. It can improve the readability of your content and make your site look modern and professional.

In this article, we’ll show you how to change font in WordPress using 5 different ways, so you can easily change fonts using no-code method, or change WordPress font without using any plugin.

How to change font in WordPress How to change font in WordPress

Why Change Fonts on Your WordPress Website?

Fonts are an essential part of your website design and have a huge impact on how your WordPress site will look and feel.

If your website has a difficult font to read, then it will be hard to retain visitors, and they’ll eventually abandon your site.

A font also shows your brand identity. For instance, you can use specific fonts to make your site look more professional, or casual.

WordPress themes come with a default font, font size, and font color for your website. However, you may want to change the default font to something different.

That said, there are several ways of changing fonts in WordPress. We’ll show you several different methods. You can click the links below to jump ahead to any section.

  • Changing Fonts in WordPress Theme Customizer
  • Changing Fonts in WordPress Full Site Editor
  • Change WordPress Fonts Using a WordPress Plugin
  • Change Fonts Using a WordPress Theme Builder
  • Customize Font Appearance in WordPress Content Editor

Changing Fonts in WordPress Theme Customizer

An easy way of changing your site’s font is by going to the WordPress theme customizer. It allows you to change the appearance of your website and shows a real-time preview.

Note: If your customizer menu option is missing, then your theme likely has full site editing enabled and you’ll need to use a different method or switch themes.

For this tutorial, we’ll use the Astra theme. However, the options will change depending on the WordPress theme you use. Depending on your theme, you’ll want to look for ‘font’ or ‘typography’ options in the customizer.

First, you can head over to Appearance » Customize from your WordPress dashboard.

Go to appearance menu Go to appearance menu

This will launch the WordPress theme customizer.

The Astra theme has a ‘Global’ section with options to change site-wide styles. To change the font on your whole website, you can click the ‘Global’ option from the menu on your left.

Go to Global settings Go to Global settings

On the next screen, you’ll see options like typography, colors, container, and buttons.

Go ahead and click the ‘Typography’ option.

Open typography settings Open typography settings

From here, you can choose different fonts under the ‘Presets’ section.

These are default fonts offered by the theme and selecting a preset will change the font on your entire website.

Change font in theme customizer Change font in theme customizer

Besides that, you can also change fonts for individual elements on your theme.

For example, you can use a different font for body and headings. There are even options to use separate fonts for each heading level.

To start, simply choose a font from the ‘Font Family’ dropdown menu for any individual element.

Change font of individual elements Change font of individual elements

Besides that, there are more options to change the font size, weight, select variants, and more.

When you’re done, don’t forget to click the ‘Publish’ button.

You can now visit your website and see the new font. For instance, we changed the body font to Roboto and the heading font to Helvetica on our demo site.

Font change preview Font change preview

It’s important to note that not all WordPress themes will offer the same features and customizations that Astra is offering. If your theme doesn’t offer that, then continue reading to the next step.

Changing Fonts in WordPress Full Site Editor

If you’re using a block-based WordPress theme like Twenty Twenty-Two, then you can change your site’s font using the full site editor (FSE).

The full site editor allows you to customize your WordPress theme using blocks, just like when editing posts or pages using the WordPress content editor. However, FSE is currently in beta and only a handful of themes support it.

For the sake of this tutorial, we’ll use the Twenty Twenty-Two theme.

To get started, you can head over to Appearance » Editor from the WordPress admin panel.

Go to full site editor Go to full site editor

This will open the full site editor for your WordPress theme.

Next, you can click the Styles icon in the top right corner and then click on the ‘Typography’ option.

Open the style settings Open the style settings

After that, you can select elements like text and links to change their typography.

We’ll select Text as the element and then click on the ‘Font Family’ dropdown menu to change its font.

Change font in FSE Change font in FSE

When you’re done, simply click the ‘Save’ button.

You’ve successfully changed the font using the full site editor. You can also add custom fonts to your WordPress site as well and then change them in the full site editor.

Change WordPress Fonts Using a WordPress Plugin

Another way of changing WordPress fonts is by using a WordPress plugin like Easy Google Fonts.

It’s a free WordPress typography plugin that lets you add over 600 Google fonts and different font variants to your website.

First, you’ll need to install and activate the Easy Google Fonts plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, you will see the Easy Google Fonts welcome screen in your WordPress dashboard. You can scroll down and click the ‘Go to Settings → Easy Google Fonts’ button.

Go to easy google fonts settings Go to easy google fonts settings

On the next screen, you will see different plugin settings.

Go ahead and click the ‘Manage with Live Preview’ button at the top.

Click manage with live preview Click manage with live preview

This will open the WordPress theme customizer, and you be in the ‘Typography’ tab.

Another way of accessing fonts added by the plugin is by going to Appearance » Customize from your WordPress dashboard and then clicking the ‘Typography’ tab.

Go to the typography tab Go to the typography tab

On the next screen, you’ll see the ‘Default Typography’ option.

Go ahead and click on it.

Go to default typography Go to default typography

After that, you can change the font of every element on your website.

For example, let’s change the font of Heading 1. Simply click the arrow next to Heading 1 to expand the options. From here, you can click the ‘Font Family’ dropdown menu and select a font.

Select a font using a plugin Select a font using a plugin

You can do the same for other heading levels and paragraphs.

Don’t forget to click the ‘Publish’ button when you’re done.

Change Fonts Using a WordPress Theme Builder

There are many powerful WordPress theme builders that let you create a custom theme without editing code. You can use them to change the font of different elements on your website.

For this tutorial, we’ll use SeedProd. It’s the best landing page and theme builder plugin for WordPress and offers a drag and drop builder to create custom themes without touching a single line of code.

Note that you’ll need the SeedProd Pro version because it includes the theme builder. There is also a SeedProd Lite version that you can use for free.

First, you’ll need to install and activate the SeedProd plugin. For more details, please see our guide on how to install a WordPress plugin.

Upon activation, you’ll see the SeedProd welcome screen. Go ahead and enter your license key and click the ‘Verify key’ button. You can easily find the license key in your SeedProd account area.

SeedProd license key SeedProd license key

After that, you can head over to SeedProd » Theme Builder from the WordPress dashboard.

Next, go ahead and click the ‘Themes’ button at the top.

Create your custom theme Create your custom theme

From here, the plugin will show you multiple themes to choose from.

Simply hover over a theme you want to use and then click on it. We’ll use the Starter theme for this tutorial.

Choisissez un thème de démarrage Choisissez un thème de démarrage

SeedProd will now generate different theme templates.

You can edit each template and customize your WordPress theme. There’s even an option to manually add a theme template.

Let’s edit the Homepage theme template and change the fonts of different elements. To start, click the ‘Edit Design’ link under Homepage.

Modifier la conception de la page d'accueil Modifier la conception de la page d'accueil

This will launch the SeedProd’s drag and drop theme builder. You can add new elements from the menu on your left and place them anywhere on the template.

To change the font of any theme section, simply select it. For example, we’ll select the text box under the Starter heading.

Next, go to the ‘Advanced’ tab from the menu on your left and click the ‘Edit’ button in front of Typography.

Sélectionner du texte dans le générateur de thème Sélectionner du texte dans le générateur de thème

After that, you’ll see multiple options to edit the typography of your selected section.

You can click on the ‘Font Family’ dropdown menu and choose a font for your text. There are also options to select font weight, adjust the font size, line height, letter spacing, alignment, letter case, and more.

Changer la police dans le générateur de thèmes Changer la police dans le générateur de thèmes

You can now repeat this step and change the font of other elements on your theme.

When you’re done, simply click the ‘Save’ button at the top.

To apply the custom theme and fonts, go to SeedProd » Theme Builder and toggle the switch next to the ‘Enable SeedProd Theme’ option to Yes.

Activer le thème SeedProd Activer le thème SeedProd

If you’re looking to create a WordPress theme from scratch, then see our guide on how to easily create a custom WordPress theme.

Customize Font Appearance in WordPress Content Editor

Using the content editor, you can also change how your fonts appear in specific blog posts and pages.

The downside of this method is that it will only apply the new font to that particular post or page only. You’d have to repeat this step manually for all other posts where you want to apply similar customization.

This can be really handy for post specific customizations, but if you’re looking for a sitewide font change option, then you should consider the other options instead.

With that said, to change the font using WordPress content editor, simply edit a post or add a new one. Once you’re in the WordPress content editor, select the text to change its appearance.

In the settings panel on your right, head to the ‘Typography’ section. Then click the 3 dots in front of Typography and select ‘Appearance’ from the dropdown options.

Ouvrir les paramètres de typographie dans l'éditeur de contenu Ouvrir les paramètres de typographie dans l'éditeur de contenu

Once you do that, the Appearance settings will be visible under the Typography section.

Simply click the dropdown menu under Appearance and select a style for your font. For example, you can make the font bold, thin, italic, black, bold italic, extra bold, and more.

There are also options to change the font size, choose a letter case, edit the color, enable drop caps, and more.

Choisissez un style d'apparence Choisissez un style d'apparence

Don’t forget to update or publish your page when you’re done.

We hope this article helped you learn how to change font in WordPress. You can also see our ultimate WordPress SEO guide for beginners, and check out our expert-pick of the best email marketing services for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Shares 747 Share Tweet Share Facebook Messenger WhatsApp Email

Change a theme and make it the default in Word or Excel

Excel for Microsoft 365 Word for Microsoft 365 Excel 2021 Word 2021 Excel 2019 Word 2019 Excel 2016 Word 2016 Excel 2013 Word 2013 Excel 2010 Excel 2007 Excel Starter 2010 More… Less

Document themes make it easy to coordinate colors, fonts, and graphic formatting effects across your Word, Excel, and PowerPoint documents and update them quickly. This video show you how-to change the entire theme, read below to just customize theme fonts, colors, or effects. 

I want to

  • Choose a standard color theme

  • Create my own color theme

  • Change theme fonts

  • Change theme effects

  • Switch or remove a theme

  • Save a custom theme for reuse

  • Make my changes the new default theme

  • Learn more about themes

Choose a standard color theme

  • On the Page Layout tab in Excel or the Design tab in Word, click Colors, and pick the color set you want.

    Excel

    La galerie de couleurs de thème est ouverte via le bouton Couleurs de l'onglet Mise en page

    Word

    Galerie de couleurs de thème

    Tip: The first group of colors are the colors in the current theme.

Create my own color theme

  1. On the Page Layout tab in Excel or the Design tab in Word, click Colors, and then click Customize Colors.

  2. Click the button next to the theme color you want to change (for example, Accent 1 or Hyperlink), and then pick a color under Theme Colors.

    Changer la couleur du thème

    To create your own color, click More Colors, and then pick a color on the Standard tab, or enter numbers or select a color on the Custom tab.

  3. In the Sample pane, preview the changes that you made.

  4. Repeat this for all the colors you want to change.

  5. In the Name box, type a name for the new theme colors, and click Save.

    Tip: To return to the original theme colors, click Reset before you click Save.

Change theme fonts

  1. On the Page Layout tab in Excel or the Design tab in Word, click Fonts, and pick the font set you want.

    Excel

    Galerie de polices dans l'onglet Mise en page

    Word

    Galerie de polices dans l'onglet Conception

    Tip: The top fonts are the fonts in the current theme.

  2. To create your own set of fonts, click Customize Fonts.

  3. In the Create New Theme Fonts box, under the Heading font and Body font boxes, pick the fonts you want.

    Créer de nouvelles polices de sujet

  4. In the Name box, enter a name, and click Save.

Change theme effects

Theme effects include shadows, reflections, lines, fills, and more. While you cannot create your own set of theme effects, you can choose a set of effects that work for your document.

  1. On the Page Layout tab in Excel or the Design tab in Word, click Effects. Image du bouton.

  2. Select the set of effects that you want to use.

    Options d'effets

Cambiar o eliminar un tema

  • Para cambiar de tema, simplemente elija un tema diferente del menú Temas . Para volver al tema predeterminado, elija el tema de Office .

  • Para eliminar el formato del tema de solo una parte de su documento, seleccione la parte que desea cambiar y cambie el formato que desee, como el estilo de fuente, el tamaño de fuente, el color, etc.

Guardar un tema personalizado para reutilizarlo

Una vez que haya realizado cambios en su tema, puede guardarlo para usarlo nuevamente. O puede convertirlo en el valor predeterminado para documentos nuevos .

  1. En la pestaña Diseño de página en Excel o la pestaña Diseño en Word, haga clic en Temas > Guardar tema actual .

    Galerie de thèmes à partir du bouton Thème

  2. In the File name box , enter a name for the theme and click Save .

    Note:  The theme is saved as a .thmx file in the document’s Themes folder on its local drive and is automatically added to the list of custom themes that appears when you click Themes .

    Custom themes accessible from the Themes button

Make my changes the new default theme

After saving your theme, you can configure it to be used in all new documents.

Overcome

Apply your custom theme to a blank workbook, then save it as a template called Book.xltx.

Against

  • On the Design tab , click Set as Default .

    Save as default option for Word themes located in the Design tab

More on topics

A document theme is a unique set of colors, fonts, and effects. Themes are shared between Office programs so that all their Office documents can have the same uniform look.

It can also change the Office theme. The Office theme is the color scheme for your entire Office program, while document themes are more specific (they appear in individual Word documents or Excel spreadsheets).

It shows Office theme options in PowerPoint 2016

Additionally, you can add a template to your Office program by changing the Office background.

See also

  • Change font size in Word, Excel, or PowerPoint

  • Change Line Spacing in Word

  • Insert subscript or superscript text in Word

  • Add or remove sheet background in Excel

  • Create your own theme in PowerPoint

  • Customize and save a theme in Word 2016 for Mac

Facebook To connect with Facebook LinkedIn E-mail address

Need help?

Develop your skills

EXPLORE TRAINING >

Get new features first

JOIN MICROSOFT INTEGRANTS >

Google Google Translator

Google Google Translate


Video How to change font on wordpress theme

Related Posts

How to add seo keywords in wordpress

Contents1 Cómo agregar palabras clave de SEO en WordPress (aumentar el CTR y las clasificaciones)1.1 Post Title1.2 Headline1.3 Header Tags1.4 Introduction and Conclusion1.5 Body Copy1.6 URL1.7 Meta…

How to embed google calendar into wordpress

Contents1 How to Add a Google Calendar in WordPress (Step by Step)2 Add a Google calendar to your website3 calendario de Google3.1 Versatile plans and pricing4 Video…

How to change the logo in wordpress

Contents1 How to Add a Custom Logo to Your Site Header2 Site Logo2.1 Planes y precios versátiles3 Add, remove or edit a custom logo4 Video How to…

How to add a popup on wordpress

Contents1 Easily create a WordPress emergent form (2 forms)1.1 ¿Por qué usar un formulario emergente de WordPress?1.2 Método #1: Crear un formulario emergente con OptinMonster + WPForms1.3…

How to roll back wordpress version

Contents1 How to Revert WordPress: Undo WordPress Updates (Easy Way)2 How to Downgrade WordPress & Roll Back to a Previous Version2.1 1. A WordPress update included significant changes…

How to rollback wordpress version

Contents1 How to Downgrade WordPress and Revert to an Older Version1.1 1. A WordPress update included significant changes that are not compatible with your theme or plugins1.2…