WPTemplate.com

Adding Custom Fonts to WordPress

WordPress themes are excellent open source platform for blogging and online publication. You can customize your website or blog as per your choice. There are many ways you can change the font in a WordPress theme. The prime ways through which you can add customs fonts to a WordPress theme include @Font-Face and CSS. Apart from that you can also add customized fonts through Google Web Fonts. This tutorial step by step tells you how you can add custom fonts to your WordPress.

Adding Custom Fonts through Plugins

Google Web Fonts

Google Font Directory is the biggest source of different types of fonts. To get fonts for your website go the http://www.google.com/webfonts#ChoosePlace:select . Make selection for the fonts you wish to choose. Each of the fonts has a code. Note this code and edit the code in WordPress theme file fonts.php inside the ‘function’ folder. Specify the style you wish to apply to the fonts in following manner.

‘gudea’ => array(

‘family’=> ‘gudea’

‘weight’ => array(

‘400italic’ => ‘Normal italic’

700 => ‘Bold’

Adding Custom Fonts using TypeKit

TypeKit is also an effective tool which allows you to install custom fonts on WordPress theme. The first step involves registering at the website. Soon after registration you will see a box containing a range of fonts with JavaScript. JavaScript is placed between <head></head> and continued. TypeKit allows you to choose the font of your choice. You can also specify style and weight for your desired font. Once you are done click on ‘Add’. Insert the suitable selectors <h1>, <h2> or <h1> in the TypeKit editor.

Adding Custom Fonts Manually

Using @Font-Face

@font face CSS rule is quite easy to use. The first step involves uploading desired fonts through FTP in a folder. In the admin panel of WordPress proceed as Appearance>> Editor >>Stylesheet.

@font-face {

font-family: Ubuntu;

src: http://www.yourdomain.com/fonts/ubuntu/ubuntu.otf;

font-weight:400;

}

Next add the below code to the style sheet.

p {

font-family: Georgia, Arial, sans-serif;

}

Adding Custom Fonts

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.

1000's of Wordpress Templates at Great Prices: Visit ThemeForest