Spice Up Your vBulletin Forum with Google CSS3 Web Fonts
 

Spice Up Your vBulletin Forum with Google CSS3 Web Fonts

In This Article i will show you, how you can make your forum more attractive and beautiful by changing the default font style of your forum. I am going to use Google web fonts as CSS3 fonts and tell you how you can use Google web fonts in your forum

1: Goto Google Web Fonts Directory Google Fonts

Now Chose the font style you like, you will see small buttons in bottom right of each font style. See screenshot for reference. Click on small "Quick use" Button, this will now display available options for how to using that font style

http://www.xitclub.com/attachments/w...ts-capture.jpg

Scroll Down a bit and you see following screen. As you can see you have 3 options for using font style. I am using 1st method which is standard method.

http://www.xitclub.com/attachments/w...ts-capture.png

2: Adding Google fonts stylesheet to your forum template

a) Goto Admincp > Styles & Templates > Style Manager > Select Your template > Edit > headinclude
b) Copy <link href..... Code from Google and paste at the bottom

3: Using Font Family

Now edit you "additional.css" template

For all Headings


For All List Elements

For All Paragraphs

For All Links

great article ... many will find this useful

Very good! Thank you!

Got an example link?

Nice, thank you for this

Google fonts are awesome, but there are few that support Arabic language !

Yup! they are adding new one's time by time. may be they add more arabic fonts soon

Can you combine fonts? A different one for headers and paragraphs?

Great article. Very helpful. THANKS!:)

--------------- Added [DATE]1378059024[/DATE] at [TIME]1378059024[/TIME] ---------------

4.2.1

Is there a way to just use these fonts for posting purposes? :confused:

It's messing up the post bit area (where members stats are) and would like to either exclude that area OR just make posts with the new font.

its all about CSS, you can control via CSS all the font on your forum

--------------- Added [DATE]1378644547[/DATE] at [TIME]1378644547[/TIME] ---------------

yes u can use different font-family for h1,h2,h3... and for <p> tags

Ok well that tells us it's possible, but not the CSS code that we need to use.

Anyone know? :confused:

additional.css overrides any other css.

The easiest way to find out what the css for a particular element is, is to use "inspect element" in Firefox, ( right click on the element, brings up a menu)

then post that css in additional.css with the command line, click on save and reload

As you are only editing additional.css it should be fairly easy to see if you get the desired effect.

If you need more help google css elements and you should get enough info to keep you going.

This article is so useful. Google fonts work great on my web site. Thank you!