Support & Downloads

Quisque actraqum nunc no dolor sit ametaugue dolor. Lorem ipsum dolor sit amet, consyect etur adipiscing elit.

s f

Contact Info
198 West 21th Street, Suite 721
New York, NY 10010
[email protected]
+88 (0) 101 0000 000
Follow Us

Client Portal (866) 963-0424

The Complete Guide to Customizing Text in WordPress

How to update text in WordPress

Welcome to the blog for all things fonts in WordPress!  When creating your website the text and text style can influence the overall readability and feel. Throughout this guide you will learn basic CSS for stylizing text. CSS code can be intimidating, but we have made this guide user friendly for all levels.

Editing the text style for specific areas in WordPress:

Are you looking to update specific sections of text, but not apply it to the whole area? Throughout this section, you will learn how to change the font family, style, weight, size, and color. To make things easier, you can copy and paste our code into your WordPress code and update the individual elements. 

To add this code, switch from the “visual” section to the “text” section of your page. Then place the <span style=…> before the text you want to stylize, and </span> after it. To see these tips in action, click here.

Changing the font family:

When you update the font, you need to make sure it is compatible with your theme. If the font you want to use is available in the theme, you can change the font using the code below. 

<span style= “font-family: ‘Name of font’;”> Your Text

</span>

If your theme does not have the font you want you can download a plugin to add the font.  https://fonts.google.com/ is an awesome utility for downloading fonts.

Changing the text style:

When changing the font style you can choose between normal, italic and oblique. 

<span style= “font-style: italic;”> Your Text

</span>

or

<em> Your text </em>

Changing the text weight:

You can update font weight by designating it bold, or you can get more specific by assigning a numerical weight value. Normal font weight is 400, and fonts work in multiples of 100. 

<strong> Your Text </strong>

or

<span style=”font weight: 500;”> Your Text

</span>

Changing the text size:

When updating the font size you can put in the exact px size you want to use, css syntax, or a percent. 

<span style=”font-size: 12px;”> Your Text

</span>

or

<span style=”font-size: large;”> Your Text

</span>

or

<span style=”font-size: 150%;”> Your Text

</span>

Changing the text color:

To change the font color, you can input a specific color, but to get a specific shade you need to determine the HEX value. A HEX value is a hashtag followed by a 6-digit number. (example: #45bda1)

<span style=”color: green;”> Your Text

</span>

or

<span style=”color: #45bda1;”> Your Text

</span>

Editing sections of text like h1, h2, body, etc. in WordPress

Are you looking to stylize the text for specific areas like h1, h2, body, etc.? Throughout this section, you will learn how to change the font family, style, weight, size, and color. To make things easier, you can copy and paste our code into your WordPress code and update the individual elements. 

To edit these you first need to head to your WordPress dashboard > Theme > Customize > Additional CSS. Once there you can insert the following codes to stylize your site.

Changing the font family:

When you update the font, you need to make sure it is compatible with your theme. If the font you want to use is available in the theme, you can change the font using the code below. 

body {
font-family: “Name of font”;
}

h1, h2, h3 {
font-family: “Name of font”;
}

If your theme does not have the font you want you can download a plugin to add the font.  https://fonts.google.com/ is an awesome utility for downloading fonts.

Changing the text style:

When changing the font style you can choose between normal, italic and oblique. 

body {

font-style: normal;

}

h1, h2 {

font-style: italic;

}

Changing the text weight:

You can update font weight by designating it light, normal, medium, bold, etc. You can also get more specific by assigning a numerical weight value. Normal font weight is 400, and fonts work in multiples of 100. 

body {

font-weight: medium;

}

h1, h2 {

font-weight: bold;

}

or

body {

font-weight: 500;

}

h1, h2 {

font-weight: 700;

}

Changing the text size:

When updating the font size you can put in the exact px size you want to use, css syntax, or a percent. 

This image has an empty alt attribute; its file name is Syntax.png

body {

font-size: 12px;

}

h1, h2 {

font-size: 24px;

}

or

body {

font-size: medium;

}

h1, h2 {

font-size: large;

}

Changing the text alignment:

You can align your text left, right or center. 

body {

text-alignment: center;

}

h1, h2 {

text-alignment: left;

}

Changing the text color:

To change the font color, you can input a specific color, but to get a specific shade you need to determine the HEX value. A HEX value is a hashtag followed by a 6-digit number. (example: #45bda1)

body {

color: black;

}

h1, h2 {

color: green;

}

or

body {

color: #000000;

}

h1, h2 {

color: #45bda1;

}

Changing the text on your entire website in WordPress

Are you looking to customize your entire website with specific fonts and styles? Throughout this section you will learn how to update individual dont elements and see the changes reflected over your entire site.

Head to your theme’s CSS stylesheet. To get here, go to your WordPress dashboard and under appearance click on theme editor. 

Changing the font family:

When you update the font, you need to make sure it is compatible with your theme. If the font you want to use is available in the theme, you can change the font using the code below. 

* {font-family:”Name of font”}

If your theme does not have the font you want you can download a plugin to add the font.  https://fonts.google.com/ is an awesome utility for downloading fonts.

Changing the text size:

When updating the font size you can put in the exact px size you want to use, css syntax, or a percent. 

This image has an empty alt attribute; its file name is Syntax.png

* {font-size: 24px}

or

* {font-size: medium}

Changing the text alignment:

You can align your text left, right or center.

* {text-alignment: left}

Changing the text color:

To change the font color, you can input a specific color, but to get a specific shade you need to determine the HEX value. A HEX value is a hashtag followed by a 6-digit number. (example: #45bda1)

*{text-color:#45bda1;}

or

*{text-color: green;}

If all your font questions weren’t answered, reach out and let us know!

Post a Comment