{"id":15328,"date":"2019-02-15T15:14:59","date_gmt":"2019-02-15T15:14:59","guid":{"rendered":"https:\/\/www.hostinger.com\/tutorials\/?p=15328"},"modified":"2026-03-09T19:19:47","modified_gmt":"2026-03-09T19:19:47","slug":"change-font-size-in-wordpress","status":"publish","type":"post","link":"\/ng\/tutorials\/change-font-size-in-wordpress\/","title":{"rendered":"How to change font size in WordPress"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><p>Changing the font size on <a href=\"\/ng\/tutorials\/what-is-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress is<\/a> easy. You&rsquo;ll learn everything you need to know in this article. We&rsquo;ll cover two methods &ndash; installing a plugin and using CSS.<\/p><p>WordPress is known for its user-friendly post-editing. Just like your favorite word-processing software, it offers many options. You can edit content easily using a drop-down menu to set headings and paragraphs.<\/p><p>Please note that the structure of your content is important for visitors and SEO. Having a good heading structure helps search engines scan the main topics of your posts, especially the long ones. This will help achieve a better ranking in the search engine results pages.<\/p><p>The latest WordPress version comes with the Gutenberg editor. We&rsquo;ll also show you how to change the font size with this tool.<\/p><h2 class=\"wp-block-heading\" id=\"h-changing-the-font-size-using-the-tinymce-advanced-plugin\">Changing the Font Size Using the TinyMCE Advanced Plugin<\/h2><p><a href=\"https:\/\/wordpress.org\/plugins\/tinymce-advanced\/\" target=\"_blank\" rel=\"noopener noreferrer\">TinyMCE Advanced<\/a> is a free plugin that lets you choose your preferred font size easily. This plugin provides a classic editor toolbar on the new Gutenberg editor.<\/p><p>First, you need to <a href=\"\/ng\/tutorials\/wordpress\/how-to-install-wordpress-plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">install and activate the plugin<\/a>. Then, you can go to the <strong>Settings<\/strong> page. You&rsquo;ll find two tabs: <strong>Block Editor (Gutenberg)<\/strong> and <strong>Classic Editor (TinyMCE)<\/strong>.<\/p><p>If you want to use the classic editor only, enable <strong>Replace the Block Editor with the Classic Editor<\/strong> under <strong>Advanced Settings<\/strong>. But leave it unticked to use both editors side by side.<\/p><p>Here are the steps to change the font using this plugin:<\/p><p>1. Create a new post or edit an existing one. You&rsquo;ll see a classic paragraph editor.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1740\" height=\"698\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor.png\/w=1024,h=1024,fit=scale-down\" alt=\"The interface of the WordPress classic editor.\" class=\"wp-image-86441\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor.png\/w=1740,fit=scale-down 1740w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1740px) 100vw, 1740px\" \/><\/a><\/figure><p>2. Highlight the lines of text you want to change, then choose the font size.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor-font-size.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1425\" height=\"537\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor-font-size.png\/w=1024,h=1024,fit=scale-down\" alt=\"Picking a font size on the WordPress classic editor with the current size and text to modify highlighted.\" class=\"wp-image-86442\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor-font-size.png\/w=1425,fit=scale-down 1425w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor-font-size.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor-font-size.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor-font-size.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor-font-size.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1425px) 100vw, 1425px\" \/><\/a><\/figure><p>3. The result will look like this:<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor-font-size-changed.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1428\" height=\"606\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor-font-size-changed.png\/w=1024,h=1024,fit=scale-down\" alt=\"The highlighted text appears larger after increasing its size on the WordPress classic editor.\" class=\"wp-image-86443\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor-font-size-changed.png\/w=1428,fit=scale-down 1428w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor-font-size-changed.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor-font-size-changed.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor-font-size-changed.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-classic-editor-font-size-changed.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1428px) 100vw, 1428px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-using-css-the-classic-way\">Using CSS &ndash; The Classic Way<\/h2><p>While the above method is great for a beginner, the classic way requires CSS and might be a little bit more tricky.<\/p><p>However, when using a plugin or the default WordPress editor, you need to do the change for every posts and page. Using CSS changes the font size for the whole site.<\/p><p>Changing the font size using CSS requires adding lines of codes. You can do this via the editor or <strong>Customiser<\/strong>. But, we recommend the customizer as it is the easier method.<\/p><p>1. Go to the WordPress dashboard, then to <strong>Appearance<\/strong> &gt; <strong>Customise<\/strong>.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-appearance-customise.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1043\" height=\"659\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-appearance-customise.png\/w=1024,h=1024,fit=scale-down\" alt=\"WordPress dashboard menu with the Customise menu highlighted.\" class=\"wp-image-86444\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-appearance-customise.png\/w=1043,fit=scale-down 1043w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-appearance-customise.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-appearance-customise.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-appearance-customise.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-appearance-customise.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1043px) 100vw, 1043px\" \/><\/a><\/figure><p>2. Choose <a href=\"\/ng\/tutorials\/wordpress-custom-css\/\"><strong>Additional CSS<\/strong><\/a> on WordPress.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"414\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css.png\/w=1024,h=1024,fit=scale-down\" alt=\"WordPress Customiser with the Additional CSS menu highlighted.\" class=\"wp-image-86445\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>You can add lines of code on the left-hand side box.<\/p><p>1. To change the entire font: <code data-enlighter-language=\"null\" class=\"EnlighterJSRAW\">body { font-size: 1.25rem; }<\/code><\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css-font-body.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"496\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css-font-body.png\/w=1024,h=1024,fit=scale-down\" alt=\"WordPress Customiser shows a CSS editor with a syntax to modify the blog's entire font size.\" class=\"wp-image-86446\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css-font-body.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css-font-body.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css-font-body.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css-font-body.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>2. To change the paragraphs&rsquo; font: <code data-enlighter-language=\"null\" class=\"EnlighterJSRAW\">p { font-size: 25px; }<\/code><\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css-font-paragraph.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"496\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css-font-paragraph.png\/w=1024,h=1024,fit=scale-down\" alt=\"WordPress Customiser shows a CSS editor with a syntax to modify the blog's paragraph size.\" class=\"wp-image-86447\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css-font-paragraph.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css-font-paragraph.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css-font-paragraph.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css-font-paragraph.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>3. To change specific headings&rsquo; fonts: <code data-enlighter-language=\"null\" class=\"EnlighterJSRAW\">h2 { font-size: 2.5em; }<\/code><\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css-font-heading.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"496\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css-font-heading.png\/w=1024,h=1024,fit=scale-down\" alt=\"WordPress Customiser shows a CSS editor with a syntax to modify the font size of a specific heading.\" class=\"wp-image-86448\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css-font-heading.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css-font-heading.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css-font-heading.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-customiser-css-font-heading.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>4. To modify sidebar font size: <code data-enlighter-language=\"null\" class=\"EnlighterJSRAW\">.sidebar li { font-size: 12px; }<\/code> <\/p><p>5. To customize the footer font: <code data-enlighter-language=\"null\" class=\"EnlighterJSRAW\">.footer { font-size: 150%; }<\/code> <\/p><p>6. To change specific screen sizes&rsquo; font: <\/p><p><code data-enlighter-language=\"null\" class=\"EnlighterJSRAW\">html { font-size: 18px; } @media (min-width: 900px) { html { font-size: 20px; } }<\/code> <\/p><p>CSS stylings allow four different units to measure the size of the text:<\/p><ul class=\"wp-block-list\">\n<li><strong>Em<\/strong> <strong>(em)<\/strong>. This is a unit used in web media documents. 1em is equal to 12 points.<\/li>\n\n\n\n<li><strong>Pixels<\/strong> <strong>(px)<\/strong>. This is a unit used in screen media. 1px is equal to 1 dot on a computer screen.<\/li>\n\n\n\n<li><strong>Points<\/strong> <strong>(pt)<\/strong>. This unit is for traditional printed media. 1 point is equal to 1\/72 of an inch.<\/li>\n\n\n\n<li><strong>Percent<\/strong> <strong>(%)<\/strong>. The default is 100% which will change after zooming in or out.<\/li>\n<\/ul><figure class=\"wp-block-image size-large\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-wordpress-hosting\" href=\"\/ng\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"600\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-111781\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=2048,fit=scale-down 2048w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-using-the-gutenberg-editor\">Using the Gutenberg Editor<\/h2><p>As mentioned earlier, <a href=\"\/ng\/tutorials\/gutenberg-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Gutenberg<\/a> is a new WordPress addition. It integrates into the CMS to make editing media-rich posts easier.<\/p><p>A noticeable change is the use of <strong>blocks<\/strong>. Blocks let you drag and drop media files into your posts like any other page builder.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1916\" height=\"866\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor.png\/w=1024,h=1024,fit=scale-down\" alt=\"WordPress Gutenberg Editor shows the expanded block inserter tool.\" class=\"wp-image-86449\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor.png\/w=1916,fit=scale-down 1916w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1916px) 100vw, 1916px\" \/><\/a><\/figure><\/div><p>To change font sizes using the Gutenberg editor, follow these easy steps:<\/p><p>1. Pick an existing post to edit or create a new one<strong>.<\/strong><\/p><p>2. Click on the<strong> three-dot menu<\/strong> to access <strong>Typography <\/strong>settings that aren&rsquo;t visible by default.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1510\" height=\"838\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography.png\/w=1024,h=1024,fit=scale-down\" alt=\"WordPress Gutenberg with the Typography menu expanded.\" class=\"wp-image-86450\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography.png\/w=1510,fit=scale-down 1510w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1510px) 100vw, 1510px\" \/><\/a><\/figure><\/div><p>3. Hover your cursor over the block you want to modify and choose one of the four preset sizes &#8210; <strong>small<\/strong>, <strong>medium<\/strong>, <strong>large<\/strong>, and <strong>extra large<\/strong>.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-preset-size.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1452\" height=\"837\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-preset-size.png\/w=1024,h=1024,fit=scale-down\" alt=\"WordPress Gutenberg with the Size selection options highlighted.\" class=\"wp-image-86451\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-preset-size.png\/w=1452,fit=scale-down 1452w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-preset-size.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-preset-size.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-preset-size.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-preset-size.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1452px) 100vw, 1452px\" \/><\/a><\/figure><\/div><p>4. If you have a specific size in mind, enter the custom font size in the <strong>Size Custom<\/strong> field. You can choose between <strong>px<\/strong>, <strong>em<\/strong>, or <strong>rem<\/strong>.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-custom-size.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1453\" height=\"842\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-custom-size.png\/w=1024,h=1024,fit=scale-down\" alt=\"WordPress Gutenberg with the Size Custom field highlighted.\" class=\"wp-image-86452\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-custom-size.png\/w=1453,fit=scale-down 1453w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-custom-size.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-custom-size.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-custom-size.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-custom-size.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1453px) 100vw, 1453px\" \/><\/a><\/figure><\/div><p>Alternatively, move the slider to increase or decrease the font size.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-size-slider.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1457\" height=\"837\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-size-slider.png\/w=1024,h=1024,fit=scale-down\" alt=\"Changing the font size using the slider tool.\" class=\"wp-image-86454\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-size-slider.png\/w=1457,fit=scale-down 1457w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-size-slider.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-size-slider.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-size-slider.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-gutenberg-editor-typography-size-slider.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1457px) 100vw, 1457px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>WordPress offers great options for customization, including font size adjustment. A perfect font size makes your content more engaging and more comfortable to consume. These adjustments are incredibly easy to make.<\/p><p>Beginners can install a plugin, while users with some CSS knowledge can tweak the themes manually. Happy customizing.<\/p><p>        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Learn Other Advanced WordPress Techniques                <\/p>\n            <\/div>\n            <p class=\"protip__content\"><a href=\"\/ng\/tutorials\/how-to-add-custom-fonts-to-wordpress\/\">How to Add a Custom Font to WordPress<\/a><br>\n<a href=\"\/ng\/tutorials\/wordpress-memory-limit\/\">How to Increase WordPress Memory Limit<\/a><br>\n<a href=\"\/ng\/tutorials\/remove-sidebar-wordpress\/\">How to Remove a Sidebar in WordPress<\/a><br>\n<a href=\"\/ng\/tutorials\/wordpress-excerpt-length\/\">How to Change WordPress Excerpt Length<\/a><br>\n<a href=\"\/ng\/tutorials\/wordpress-a-b-testing\/\">A Complete Guide to WordPress A\/B Testing<\/a><br>\n<a href=\"\/ng\/tutorials\/how-to-hide-page-title-wordpress\/\">How to Hide a Page Title in WordPress<\/a><\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-change-font-size-in-wordpress-faq\">How to Change Font Size in WordPress FAQ<\/h2><p>Here are some of the frequently asked questions about how to change font size in WordPress.<\/p><div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1676906775784\"><h3 class=\"schema-faq-question\">Can I Change the Font Size for Specific Pages or Posts in WordPress?<\/h3> <p class=\"schema-faq-answer\">Yes, you can change the font size for specific pages or posts in WordPress by using page builders or by adding custom CSS code.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1676906799728\"><h3 class=\"schema-faq-question\">Is It Possible to Change the Font Size for Mobile Devices in WordPress?<\/h3> <p class=\"schema-faq-answer\">It is possible to change the font size for mobile devices in WordPress by using responsive design techniques and media queries in your CSS.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1676906829753\"><h3 class=\"schema-faq-question\">What Is the Default Font Size in WordPress?<\/h3> <p class=\"schema-faq-answer\">The default font size in WordPress depends on the theme you are using. It is usually set to 16 pixels, but it can vary. You can check the default font size by inspecting the code or by using a browser&rsquo;s developer tools.<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Changing the font size on WordPress is easy. You&rsquo;ll learn everything you need to know in this article. We&rsquo;ll cover two methods &ndash; installing a plugin and using CSS. WordPress is known for its user-friendly post-editing. Just like your favorite word-processing software, it offers many options. You can edit content easily using a drop-down menu [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ng\/tutorials\/change-font-size-in-wordpress\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":172,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How to Change Font Size in WordPress (Using 2 Methods)","rank_math_description":"Font sizes in WordPress matters for SEO reasons amongst other things. In this article, you'll learn how to change font size in WordPress.","rank_math_focus_keyword":"how to change font size in wordpress","footnotes":""},"categories":[22637],"tags":[],"class_list":["post-15328","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/change-font-size-in-wordpress","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-aumentar-tamanho-fonte-wordpress","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/changer-taille-police-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/cambiar-tamano-letra-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-mengganti-font-di-wordpress","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/change-font-size-in-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/change-font-size-in-wordpress","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/change-font-size-in-wordpress","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-son-hooks-wordpress-19","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-son-hooks-wordpress-19","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/cambiar-tamano-letra-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-aumentar-tamanho-fonte-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/change-font-size-in-wordpress","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/change-font-size-in-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/change-font-size-in-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/change-font-size-in-wordpress","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/15328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/users\/172"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/comments?post=15328"}],"version-history":[{"count":21,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/15328\/revisions"}],"predecessor-version":[{"id":145162,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/15328\/revisions\/145162"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/media?parent=15328"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/categories?post=15328"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/tags?post=15328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}