{"id":78516,"date":"2023-02-17T14:33:03","date_gmt":"2023-02-17T14:33:03","guid":{"rendered":"\/tutorials\/?p=78516"},"modified":"2024-03-26T15:03:34","modified_gmt":"2024-03-26T15:03:34","slug":"how-to-change-the-font-color-on-wordpress-using-4-simple-methods","status":"publish","type":"post","link":"\/ph\/tutorials\/change-wordpress-font-color","title":{"rendered":"How to Change the Font Color on WordPress Using 4 Simple Methods"},"content":{"rendered":"

WordPress is a powerful and popular content management system (CMS) for building engaging, visually appealing websites without restrictions. It allows site owners to fully customize their websites, including changing typography settings.<\/p>

For instance, you can add a custom font, modify the font size, and change the font color. There are multiple methods to tweak the font color in WordPress. They depend on many aspects, such as the WordPress theme and site editor.<\/p>

Keep reading to learn more about how to change the font color in WordPress and the four easy ways to do it.<\/p>

\n\n\n\n\n\n\n\n\n<\/p>

Change the Font Color Using the WordPress Editor<\/h2>

The easiest method to customize the font color is via the WordPress text editor. This section will cover how to change the default font colors in WordPress using the block and classic editor.<\/p>

Using the WordPress Block Editor<\/h3>

The Gutenberg editor<\/a> or WordPress block editor has been the default text editor since WordPress 5.0. With the Color <\/strong>settings, you can quickly change the font color in a post or page.<\/p>

Follow the steps below to modify the text color in WordPress via the block editor:<\/p>

    \n
  1. Log in to your WordPress dashboard and open the post or page you want to customize.<\/li>\n\n\n\n
  2. Select the Paragraph<\/strong> or Heading<\/strong> block you want to customize. For example, we will use the Paragraph <\/strong>block.<\/li>\n<\/ol>
    \n
    \"The<\/a><\/figure><\/div>
      \n
    1. Click the three vertical dots icon<\/strong> on the block toolbar and select Show more settings<\/strong>. Alternatively, select Settings<\/strong> in the screen’s top-right corner.<\/li>\n<\/ol>
      \"The<\/a><\/figure>
        \n
      1. Navigate to the Color<\/strong> settings section and click the Text<\/strong> button. Pick a suitable color from the default color selector.<\/li>\n<\/ol>
        \n
        \"The<\/a><\/figure><\/div>

        Alternatively, use the custom font color selector or enter the RGB, HSL, or Hex code to add a preferred custom color.<\/p>

        \n
        \"The<\/a><\/figure><\/div>
          \n
        1. Click Publish<\/strong> or Save draft<\/strong> to apply the changes.<\/li>\n<\/ol>

          Using the WordPress Classic Editor<\/h3>

          To enable the Classic Editor<\/a>, you must first install and activate the plugin<\/a>. Then, set it as the default editor via Settings<\/strong> → Writing<\/strong> → Default editor for all users<\/strong>. <\/strong>Ensure the classic editor is selected.<\/p>

          Note that the classic text editor only lets you change the WordPress text color. Meanwhile, with the block editor, you can customize the text, background, and link colors.<\/p>

          Follow these steps to change the font color via the classic editor:<\/p>

            \n
          1. Open an existing post or create a new one from the WordPress admin dashboard.<\/li>\n\n\n\n
          2. In the visual editor, highlight the text you want to customize.<\/li>\n<\/ol>
            \n
            \"The<\/a><\/figure><\/div>
              \n
            1. Click the Toolbar Toggle<\/strong> button to show the text formatting options.<\/li>\n<\/ol>
              \n
              \"The<\/a><\/figure><\/div>
                \n
              1. Select the Text color<\/strong> button and choose from the color palette.<\/li>\n<\/ol>
                \n
                \"The<\/a><\/figure><\/div>

                Alternatively, add a custom color by clicking the Custom…<\/strong> button. Use the color picker or enter your preferred RGB or Hex color code.<\/p>

                \n
                \"The<\/a><\/figure><\/div>
                  \n
                1. Apply the changes by clicking Publish<\/strong> or Save draft<\/strong>.<\/li>\n<\/ol>

                  Change the Font Color With the WordPress Theme Customizer<\/h2>

                  You can modify entire site font colors using the WordPress theme customizer. This method is especially useful for changing the overall look of your WordPress site.<\/p>

                  Here are the steps to customize the font color in WordPress using the Theme Customizer. Many WordPress themes support the feature, but we will use Twenty Fifteen <\/strong>as an example:<\/p>

                    \n
                  1. From the WordPress dashboard, go to Appearance<\/strong> → Customize<\/strong>.<\/li>\n<\/ol>
                    \n
                    \"The<\/a><\/figure><\/div>
                      \n
                    1. Select the Colors <\/strong>tab.<\/li>\n<\/ol>
                      \n
                      \"The<\/a><\/figure><\/div>
                        \n
                      1. Go to the Header and Sidebar Text Color<\/strong> section and click Select Color<\/strong>. Pick a color from the color selector or customize it using the color picker tool.<\/li>\n<\/ol>
                        \"The<\/a><\/figure>
                          \n
                        1. Click Publish<\/strong> to save the changes.<\/li>\n<\/ol>

                          Change the Font Color in WordPress Using CSS Code<\/h2>

                          WordPress has an advanced feature called Additional <\/strong>CSS<\/strong><\/a> for customizing font size, colors, and family using custom CSS<\/a> code. Compared to the Theme Customizer, this feature offers more options to style specific elements.<\/p>

                          Follow these steps to use Additional CSS to modify font colors on the heading and paragraph elements:<\/p>

                            \n
                          1. Make sure your current theme supports the Theme Customizer. For example, we will use the Twenty Twenty-Two theme.<\/li>\n\n\n\n
                          2. Open a WordPress blog post via the site front-end.<\/li>\n<\/ol>
                            \n
                            \"The<\/a><\/figure><\/div>
                              \n
                            1. Open Customize<\/strong> from the top toolbar.<\/li>\n<\/ol>
                              \n
                              \"The<\/a><\/figure><\/div>
                                \n
                              1. Select Additional CSS<\/strong> from the sidebar.<\/li>\n<\/ol>
                                \n
                                \"The<\/a><\/figure><\/div>
                                  \n
                                1. In the Additional CSS editing area, enter the following code to change the heading color:<\/li>\n<\/ol>
                                  h2{\n\tcolor: #FF0000;\n}\n\nh3 {\n\tcolor: #00FF00;\n}\n\nh4 {\ncolor: #964B00;\n}<\/pre>
                                  Enter the CSS code below the previous one to change the paragraph text colors:<\/p>
                                  p {\n\tcolor: #0000FF;\n}<\/pre>
                                  Feel free to change each placeholder Hex code to your preferred color. The result will look like the following:<\/p>
                                  \n
                                  \"The<\/a><\/figure><\/div>
                                    \n
                                  1. Click Publish<\/strong> to save the changes.<\/li>\n<\/ol>
                                    \"\"<\/a><\/figure>
                                    Change the Font Color in WordPress With a Page Builder<\/h2>
                                    Another simple way to modify the font color in WordPress is using a page builder. In this tutorial, we will use Visual Composer<\/strong>, one of the best WordPress page builders<\/a>.<\/p>
                                    Follow the steps below to modify the font color in WordPress via Visual Composer:<\/p>
                                      \n
                                    1. Install and activate the Visual Composer<\/a> plugin. Once activated, you will be redirected to the setup wizard page, where you must complete the configuration.<\/li>\n\n\n\n
                                    2. Create a new post by clicking on the Add New with Visual Composer<\/strong> button or select Edit with Visual Composer<\/strong> under an existing one. For this tutorial, we’re going to create a new post.<\/li>\n<\/ol>
                                      \n
                                      \"WordPress<\/a><\/figure><\/div>
                                        \n
                                      1. Insert a text block into the layout and populate it with your desired text.<\/li>\n<\/ol>
                                        \n
                                        \"Visual<\/a><\/figure><\/div>
                                          \n
                                        1. Hover over the text and select Edit Text Block<\/strong>. Doing so opens the Content <\/strong>tab on the left panel of the screen.<\/li>\n\n\n\n
                                        2. Highlight the text and click on the Text color<\/strong> button. Choose one from the font color selector.<\/li>\n<\/ol>
                                          \n
                                          \"\"<\/a><\/figure><\/div>
                                            \n
                                          1. The change made will appear in the editor’s interface.<\/li>\n<\/ol>
                                            \n
                                            \"Visual<\/a><\/figure><\/div>
                                              \n
                                            1. Select the checkmark symbol in the bottom left corner of the page to save or publish the post.<\/li>\n<\/ol>
                                              Conclusion<\/h2>
                                              WordPress lets you freely customize your website. You can pick a theme and modify the visual style of any element, including the WordPress font color. When changing text colors, ensure that it remains readable.<\/p>
                                              We have learned four ways to change the font color in WordPress via two WordPress text editors, the WordPress Theme Customizer, custom CSS code, and a page builder. Since the steps are simple, any WordPress website owner can easily implement them.<\/p>
                                              Hopefully, this article has helped you learn about font color customization in WordPress. Feel free to ask if you have any questions by commenting below. Good luck on your online journey!<\/p>\n","protected":false},"excerpt":{"rendered":"
                                              WordPress is a powerful and popular content management system (CMS) for building engaging, visually appealing websites without restrictions. It allows site owners to fully customize their websites, including changing typography settings. For instance, you can add a custom font, modify the font size, and change the font color. There are multiple methods to tweak the […]<\/p>\n
                                              Read More…<\/a><\/p>\n","protected":false},"author":258,"featured_media":84304,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How to Change the Font Color on WordPress: 4 Easy Methods","rank_math_description":"Learn four simple methods on how to change the font color on WordPress: using the editor, your theme customizer, custom CSS, and a page builder.","rank_math_focus_keyword":"how to change the font color on wordpress","footnotes":""},"categories":[],"tags":[],"class_list":["post-78516","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/change-wordpress-font-color","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/change-wordpress-font-color","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-change-the-font-color-on-wordpress-using-4-simple-methods","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-change-the-font-color-on-wordpress-using-4-simple-methods","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/change-wordpress-font-color","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/change-wordpress-font-color","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/change-wordpress-font-color","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/change-wordpress-font-color","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/posts\/78516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/users\/258"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/comments?post=78516"}],"version-history":[{"count":9,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/posts\/78516\/revisions"}],"predecessor-version":[{"id":106465,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/posts\/78516\/revisions\/106465"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/media\/84304"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/media?parent=78516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/categories?post=78516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/tags?post=78516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}