How to Customize fonts in WordPress blog with CSS3

Nur . Posted in How-To, Plugins 1049 Views

Before start, Would like to tell you a very important thing that Font designers work very hard to create fonts, their work is copyrighted and licensed. Thats why, keep in mind before embedding any font into your site, make sure you’re using truly “open” and free font or have the right to use them in your blog.

Fonts type that can be used for Safari, Chrome and Firefox3.1+ are .ttf(True Type Font) and .otf(open type font). Both support the @font-face rule that allows stylesheet to point to a .ttf  or .otf on server.  IE has little problem with .otf.  After declaring the @font-face rule give reference(I hope you know how to give reference in stylesheet ) to your required font-family property in your stylesheet as following:

  @font-face {
   font-family: MEgalopolis Extra; src: url(‘MEgalopolis-Extra.otf');
   }
  h3 { font-family: MEgalopolis Extra, sans-serif; }

Reference:
@font-face {
 font-family: MEgalopolis Extra;
 src: url('MEgalopolis-Extra.otf');
}

Example:

MEgalopolis Extra

The drawback of embedding fonts in stylesheet is again licensing and infringement issues which you can handle with the sIFR (Scalable Inman Flash Replacement) method. There is a well explained article on sIFR implementing the core method, you can find it at Mike Industries’s Blog “sIFR 2.0: Rich Accessible Typography for the Masses“.
There are lots of websites where you can find Free and useful resources.

    1. For @Font-face friendly fonts: Font Squirrel

    2. Fonts available for @font-face embedding: Web Fonts

    3. OpenType for your desktop and webfonts: Font Spring

Font resource Compilation:

Free-fonts-collection

1. 75+ Excellent Free Fonts For Professional Design

In this article tripwire magazine presents an overview of more than 75 excellent free fonts you should consider using for your designs. Not all free Fonts are worth using but the Fonts listed in this article have all been picked out because they are better than the rest.

2. 20 High Quality Free Fonts for Designers

Here are 20 high quality free fonts for you to use in your designs. In this selection, you will find a variety of styles.

3. 40+ Excellent Freefonts For Professional Design

4. 50 Amazing Free Fonts For Designers

They have rounded up some of the top favorites of designers around the world. These fonts can fall in all categories when put to creativity by users with your wildest imagination.

5. 104 Free Fonts for Web Designers and Logo Artists

You’ll find Over 100 Free Downloadable Fonts for Web Designers and Logo Artists by which you can save money and focus on making great applications.

6. Top 20 Sites To Download Free Fonts

A list of most recommended and visited sites to download free fonts.

Customize Fonts through WordPress Plugin:

Customize-fonts-in-WordPres

    1. 10 WordPress Plugins For Enhancing Typography

    2. AutoTTF WordPress Plugin for Rendering True Type Fonts

    3. Custom Fonts WordPress Plugin (v 5)

If want to learn About wordpress pulgins them go through the 642-813 dumps prepared by certified professional to provide up to date knowledge. We offer up to date SY0-201 dumps and 70-680 dumps for easy and fast learning.

Nur

I am a Wordpress, Website Developer and Designer, creator @ WP Arena, Provide Free WordPress consultation and can help to install WordPress in a secure way to small businesses and bloggers.

Free & Professional WordPress Security Service Free & Professional WordPress Security Service

We Love WordPress. WordPress Arena is a place for WordPress Developers and Designers, providing Tips, tricks, tools and resources to build a website or blog on WordPress. We also present The WordPress Showcase for all kind of WordPress Powered Websites.


Copyright © 2014 WP Arena All Rights Reserved

Divi WordPress Theme