XiTCLUB
04-17-2013, 10:00 PM
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 (http://www.google.com/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/web-designing-development-233/16445d1366312552-spice-up-your-vbulletin-forum-google-css3-web-fonts-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/web-designing-development-233/16446d1366312717-spice-up-your-vbulletin-forum-google-css3-web-fonts-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
h1,h2,h3,h4,h5,h6 { font-family: 'Roboto Condensed', sans-serif; //(or your font family you chose on google) }For All List Elements
ul li, ol li { font-family: 'Roboto Condensed', sans-serif; }For All Paragraphs
p { font-family: 'Roboto Condensed', sans-serif; }For All Links
a, a:hover, a:visited { font-family: 'Roboto Condensed', sans-serif; }
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 (http://www.google.com/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/web-designing-development-233/16445d1366312552-spice-up-your-vbulletin-forum-google-css3-web-fonts-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/web-designing-development-233/16446d1366312717-spice-up-your-vbulletin-forum-google-css3-web-fonts-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
h1,h2,h3,h4,h5,h6 { font-family: 'Roboto Condensed', sans-serif; //(or your font family you chose on google) }For All List Elements
ul li, ol li { font-family: 'Roboto Condensed', sans-serif; }For All Paragraphs
p { font-family: 'Roboto Condensed', sans-serif; }For All Links
a, a:hover, a:visited { font-family: 'Roboto Condensed', sans-serif; }