Home
HTML/CSS
Link 1
Sublinks >>>
jQuery/JS
PHP
MySQL
XSLT
How To Change Font Family, Color, Style And Font Size In WordPress?
Changing font family and adding a detail to your Fonts
style, fonts color and fonts size will totally give a different look to your
site. To make you sites more elegant you should focus on changing the default
font family, colors, style and size. In all premium wordpress themes you
can look for a themes option panel. In there you will have the options to
change font family, color, style and size for your posts, widgets and footer
texts separately.
But, how about free wordpress themes?
Here we will discuss on how
to change font family, font color, font style and font size in wordpress. No
matter what you get, but anyhow the theme does not have the option to change
font family for particular text or paragraph in specific post. Recently
one of our visitors asked us about changing font family for specific text in a
particular post. You can change font style, font size, font color and font
weight from your post visual editor, but not font family. Here we will also see how
to change font family for specific text or paragraph in a post.
Understanding CSS Font Properties
font-family:– This specifies font family for the text (e.g.
font-family: Times New Roman, Arial).
font-color:- This specifies the color of text (e.g. red, green, black).
font-size:– This specifies font size for the text (H1,
H2, paragraph…).
font-style:– This one specifies the text style that is normal,
italic and oblique.
1. How To Change Font Family In WordPress?
Login to you WordPress account, go to Appearance >> Edit.
After making all changes, finally hit the button "Update File".
If you want to change the font used in your post’s body, you’ll
have to find out where the font style of the body is defined.
Scroll down and you’ll find the theme’s CSS Stylesheet.
Fonts are defined in this part of a theme.
If you want to change the font globally across your theme,
you can just stick this line of code at the top of your css stylesheet.
/* This Will Change The Font Family To Courier New */
* {font-family:”Courier New”}
/* This Will Change The Font Family To Arial */
* {font-family:”Arial”}
/* This Will Change The Font Family To Times New Roman */
* {font-family:”Times New Roman”}
/* This Will Change The Font Family To Monotype Corsiva */
* {font-family:”Monotype Corsiva”}
/* This Will Change The Font Family To Georgia */
* {font-family:”Georgia”}
Just change the name of the font to the one that you want to
use.
After making all changes, finally hit the button "Update File".
Changing Font For Specific Theme Areas
Depending upon the area whose font you want to change,
you’ll have to identify the relevant code snippets in the Stylesheet. This can
be really painful.
Tip:- Some themes use lots of fonts. So it will be very
difficult to look for the relevant code. To make this easy, I’d recommend you
to download the WhatFont extension (I’ve only used it with Google
Chrome).
With this extension installed, just hovering on any text on
your website will tell you which font is in use in that area. Simply pick this
font and search for it in your theme’s Stylesheet. And then you can go ahead
with changing it.
3. This will bring up some extra options in the toolbar above your post. One of these options is a “Text color” drop-down box.
4. Use your mouse to highlight the text you want to change and then click the “Text color” drop-down box. Choose whichever color you like.
5. Once you have chosen a color you can click the blue “Update” button on the right-hand side to save your changes.
This is all done with changing the color in WordPress.
2. How To Change Color In WordPress?
At first look you probably won’t see an easy way to change
the text color. This is because, for some reason, the developers of WordPress
decided to hide this feature. Here is how to get to it.
1. In your WordPress dashboard go to the “Posts” section and
click on the post you want to edit.
2. Once you are on the post editor screen click the “Toolbar Toggle” button just about your post (circled in red below).
2. Once you are on the post editor screen click the “Toolbar Toggle” button just about your post (circled in red below).
3. This will bring up some extra options in the toolbar above your post. One of these options is a “Text color” drop-down box.
4. Use your mouse to highlight the text you want to change and then click the “Text color” drop-down box. Choose whichever color you like.
5. Once you have chosen a color you can click the blue “Update” button on the right-hand side to save your changes.
This is all done with changing the color in WordPress.
3. How To Change Font Style In WordPress?
In today’s world there are lot of people who build their
website or blogs using WordPress. Most of the people who likes a
particular Theme ends up not liking the font style. But no need to worry, i
will show you How to Change Font Style in WordPress Theme. There are
plenty of Plugins in WordPress using which you can change font style.
Click on Google Fonts which is present in the WordPress Menu.
After selecting the font now select the Font Style. Select Normal 400 and select the Elements which you want to
apply this font to. I recommend to select all the check boxes.
Here are Simple Steps to Change Fonts or Font Style in
WordPress Theme.
Go to Plugins and click on Add New. Type WP GOOGLE
FONTS in search and click on Install Now. WP GOOGLE FONTS
is the best Plugin to change the Fonts easily in a minute. By using it you can
set different Fonts to different elements.
Note:- By Using this Plugin you can only use Google Fonts to your theme.
1. Install WP GOOGLE FONTS Plugin.
Go to Plugins and click on Add New. Type WP GOOGLE
FONTS in search and click on Install Now. WP GOOGLE FONTS
is the best Plugin to change the Fonts easily in a minute. By using it you can
set different Fonts to different elements.Note:- By Using this Plugin you can only use Google Fonts to your theme.
2. Go To Google Fonts
Click on Google Fonts which is present in the WordPress Menu.3. Select The Font
After clicking on Google Fonts, select the Fonts which you
like or want to apply to your website.
Select Font from Drop Down menu.
4. Select Font Style
After selecting the font now select the Font Style. Select 5. Save Your Settings
Select Latin as your character sets. After selecting the Font and the Font styles, click on Save All Fonts to apply the Font Style to all the theme. That’s it New Font has applied to your theme. Open your website to check the Fonts you saved.
By using WP GOOGLE FONTS you can select different
Fonts and Font Styles to the different elements you want to assign Font to.
In this Tutorial i have used only one Font and Font style to
all of the theme elements in Font 1 ex: For all body tags,
paragraphs, Headings. But if you want to set different Fonts to
different elements like for a paragraph different font or for an heading H1,
H2, H3 etc different font, just Go to Font 2, Font 3, Font 4, Font 5,
Font 6 select the Font and select the elements you want to use for and
save the settings.
4. How To Change Font Size In WordPress?
How to change the font size in a WordPress post?
How can you
make your text size bigger or smaller?
It sounds like a straightforward task
but that’s not exactly the case. If you notice in the WordPress rich text editor you have the
options for changing the font colour, making the text bold, underlined or
italics but you do not have the option to change the font size. What
happens if you want to make your text smaller or bigger?
4 Ways To Change The Font Size In WordPress
1. Use Format Option
The format drop down list, available in the WordPress rich
text editor, gives you a number of pre-defined text styles. Among the available
styles you will see the Heading 1, Heading 2…..Heading 6. Choosing
any of those will make the font size bigger depending on how those styles are
defined in your theme’s style sheet (css).
SEO Tip:- For best SEO practices a page should only have one
Heading 1 tag so if you want to add more headings to your text (recommended)
use heading 2 to heading 6.
2. Use Custom CSS Classes
This is not the easiest method but it is the most
recommended. You define custom css classes in your theme’s custom stylesheet
and use those classes with-in the post. This method requires a bit of technical
knowledge but it is the most efficient since the classes can be used across
several posts/pages without adding any extra code to each and every page.
1. Go to Appearance >> Editor.
2. Find your custom css file (this depends on your theme but
usually this is under Styles on the right menu).
3. Add a custom class like this which makes the text font size with different pixels.
4. Use any one css class according to need of your text size.
4. Use any one css class according to need of your text size.
/* This will display the font size 12 pixels*/
.biggerText {
font-size:12px;
}
/* This will display the font size 14 pixels*/
.biggerText {
font-size:14px;
}
/* This will display the font size 16 pixels*/
.biggerText {
font-size:16px;
}
/* This will display the font size 20 pixels*/
.biggerText {
font-size:20px;
}
/* This will display the font size 25 pixels*/
.biggerText {
font-size:25px;
}
/* This will display the font size 30 pixels*/
.biggerText {
font-size:30px;
}
5. While editing a post or page click the TEXT button
to view the code and use the span tags to format specific parts of
the text like the example shown below.
This is some text and <span>This is some bigger text</span>
Note:- In order to view your changes you need to preview
the post in your browser as changes made by class definitions are not shown in
the rich text editor.
3. Style Text Using In-Line CSS
This is only recommended if you plan to do it on a couple of
cases, if you plan to change the font size in many posts/pages then better use
method 2 (custom css classes) above.
While editing a post or page click the TEXT button
to view the code and use the span tags to format specific parts of
the text like the example shown below.
This is some text and <span style=”font-size: 28px;” >This is some bigger text</span>
When you click the VISUAL button you can see your
changes (unlike method 2 above).
4. Use WordPress Plugin
If any of the above methods are too complicated or technical
for you, then you can easily install a WordPress plugin that will provide you
with an easy visual way to change the font size in WordPress posts. One of
those plugins is TinyMCE Advanced and you can install it by going to Plugins
– > Add new.
After you install the plugin you will notice that it adds
several new options in the rich text editor and one of them is the Font
Size. All you have to do is highlight the text you want to change the font size
and use a value from the drop down list.
For the more technical oriented, you can click the TEXT button
to view the html code of the post and see how the plugin formats the text,
which is similar to method 3 above. The only advantage from using the plugin is
that you do not need to have any knowledge of CSS or html.
I hope this article helped you to change your desired Font Family, Color, Font styles and Font Size In WordPress. Do let us know in the comments section below.
Share On
Your blog has given me that thing which I never expect to get from all over the websites. Nice post guys!
ReplyDeleteWeb Developers Melbourne
Are you bored of using routine fonts on you smart phone? then this Stylish Fonts Free app will help you to try different Stylish Fonts on your smartphones.
ReplyDelete"“Hi, i absolutely got tons of value from your post. Please i have 2 quick questions.
ReplyDelete1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
Finally, would you spare a few seconds to check this site and offer me your candid advice http://www.samozoani.com"
This comment has been removed by the author.
ReplyDeleteDafont.com is a site where you can download a ton of free fonts. You can search for a specific typeface, or search by the type of lettering you want, whether it’s serif or sans serif, hand lettered or grunge style. You can also put in your own phrase to see how it looks in a particular font. A lot of these fonts are very decorative and many are handdrawn, so it’s not always the best place to search for body text fonts. Each selection also tells you whether your download is free for personal or commercial use. The download is easy – you get a zip file with the font file inside. Unzip, install, and you’re ready to go.
ReplyDeleteDafont.com is a site where you can download a ton of free fonts. You can search for a specific typeface, or search by the type of lettering you want, whether it’s serif or sans serif, hand lettered or grunge style. You can also put in your own phrase to see how it looks in a particular font. A lot of these fonts are very decorative and many are handdrawn, so it’s not always the best place to search for body text fonts. Each selection also tells you whether your download is free for personal or commercial use. The download is easy – you get a zip file with the font file inside. Unzip, install, and you’re ready to go.
ReplyDelete