Use custom CSS fonts to enrich your page

How to add stylish and curvy fonts to your blog post/page using CSS?

You may have observed while visiting other sites that they have very nice looking fonts specially with their qoutes. But however you hard you try to find what font they used, you can not duplicate it. How was that possible? It is by using custom CSS fonts.

Today many are already offering such fonts like fonts.com and face-fonts. But most of these needed that you upload them to your server and access it from there. There is one alternative though that does not require uploading to your server. It is Google Web Fonts or simply Google Fonts.

To give a sample of the fonts, here is a famous line from Confucius:

“Chose a job you love, and you will never have to work a day in your life.
-Confucius

The custom font used above is cursive Bilbo from Google Web Fonts. The texts affected by the custom font are the quote

Here is how it is done:
Using custom fonts with CSS. Here is the code for the above quote:

<blockquote style="font-family: 'Bilbo', cursive http://fonts.googleapis.com/css?family=Bilbo stylesheet text/css; font-size: 18px; font-style: italic; line-height: 1.45; margin: 0.25em 0; padding: 0.25em 40px; position: relative; width: 500px;">
<span style="color: lightgrey; font-size: 130px; left: -30px; position: absolute; top: -50px;">“</span><span style="font-family: Georgia, serif;">Chose a job you love, and you will never have to work a day in your life.</span><br />
<span style="color: lightgrey; font-family: 'Bilbo', cursive http://fonts.googleapis.com/css?family=Bilbo stylesheet text/css; font-size: 15px;">-Confucius</span></blockquote>

Google Fonts' instructions in using their fonts is to include a code into your website. For blogger users, you will have to include it into your template. By doing so, the said font will be available anytime you want to use it. The downside to it is that, the more fonts you add into your template, the slower it is for your site to load. And since you are forced not to add as much custom fonts as you want, you don't have that much flexibility in using all these custom fonts.

Fortunately there is another way of coding it that will only require to add a code into your browser. What I will describe below  does not require you to add anything in your template. But this will still add into the loading time for the page/blog post you will apply it with but not on your whole site.

• Follow the basic format for the code as shown below. Just include the code as inline CSS to the element you wish to place it. In the case that there is already an existing inline CSS in the said element, just copy the texts inside the double quotes and insert it inside the CSS.

style="font-family: 'Bilbo', cursive http://fonts.googleapis.com/css?family=Bilbo stylesheet text/css;"

Note the different colors of the texts. The red ones represent the URL for the font and the blue ones represent the name of the font.

• Get the font URL for the custom font.
1. Go to http://www.google.com/fonts/ and browse through the list then choose the font that you wish.
2. When you have chosen, click on the quick use button at the lower right for each font.
3. You will be redirected to another set of selections. If the font you selected had more than one style, you will need to choose for the style that you want. Choose only one. Actually it is possible to choose all but that is if you will be placing your code on your template.
4. You will also need to choose a character set in case there are more than one. Again just choose one for the same reason as above.
5. Finally, you will see some code similar to this:

<link href='http://fonts.googleapis.com/css?family=Roboto+Slab&subset=cyrillic-ext' rel='stylesheet' type='text/css'>

Copy all the text inside the single quote after href= and then in the basic format mentioned above replace the red texts with this. In the example above, replace http://fonts.googleapis.com/css?family=Bilbo with http://fonts.googleapis.com/css?family=Roboto+Slab&subset=cyrillic-ext.

• Get the font name for your chosen font
1. Just below the link code is another code that looks like this:

font-family: 'Roboto Slab', serif;rel='stylesheet' type='text/css'>

Copy the font-family until the first semi-colon (semicolon not included) and go back to your inline CSS to replace the existing font-family similar to the way you did with the URL. In the example above, replace font-family: 'Bilbo', cursive with font-family: 'Roboto Slab', serif.

That is it, you now have custom fonts inside your content and you can use different font type for different page and still not affecting the loading time of your site.

It is up to you know how big yo want it. What color and the positioning of the texts to make it even look better.