Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
Spice Up Your vBulletin Forum with Google CSS3 Web Fonts
XiTCLUB
Join Date: Jan 2010
Posts: 304

I am on Skype these days contact me their : gsolutionspk

Lahore, Pakistan
by XiTCLUB XiTCLUB is offline 18 Apr 2013
Rating: (1 vote - 5.00 average)

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



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.



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



Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

For All List Elements


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

For All Paragraphs


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

For All Links


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Views: 12912
Reply With Quote
Comments
  #2  
Old 19 Apr 2013, 12:26
Princeton's Avatar
Princeton Princeton is offline
 
Join Date: Nov 2001
Real name: Joe Velez
great article ... many will find this useful
__________________
Latest Articles:
Liquid Layout = Less Ad Revenue?
How to Monetize Your Site
Improve Web Page Performance
How To Write For The Web


If it needs instructions, there's room for improvement.
Give users what they actually want, not what they say they want. And whatever you do, don't give them new features just because your competitors have them!
Reply With Quote
  #3  
Old 23 Apr 2013, 15:03
joeychgo's Avatar
joeychgo joeychgo is offline
 
Join Date: Mar 2004
Real name: Joey
Very good! Thank you!
Reply With Quote
  #4  
Old 23 Apr 2013, 15:24
wacnstac wacnstac is offline
 
Join Date: Nov 2001
Got an example link?
Reply With Quote
  #5  
Old 24 Apr 2013, 19:51
XiTCLUB's Avatar
XiTCLUB XiTCLUB is offline
 
Join Date: Jan 2010
Real name: Mian Shahzad Raza
Originally Posted by wacnstac View Post
Got an example link?
http://www.xitclub.com/
Reply With Quote
  #6  
Old 14 May 2013, 18:11
joeychgo's Avatar
joeychgo joeychgo is offline
 
Join Date: Mar 2004
Real name: Joey
Nice, thank you for this
__________________
Lincoln vs Cadillac Forums -
Reply With Quote
  #7  
Old 26 May 2013, 00:10
abdobasha2004's Avatar
abdobasha2004 abdobasha2004 is offline
 
Join Date: Aug 2008
Google fonts are awesome, but there are few that support Arabic language !
__________________
Egypt News website, latest Egyptian news updated instantly.
Reply With Quote
  #8  
Old 27 Jul 2013, 23:27
XiTCLUB's Avatar
XiTCLUB XiTCLUB is offline
 
Join Date: Jan 2010
Real name: Mian Shahzad Raza
Originally Posted by abdobasha2004 View Post
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
Reply With Quote
  #9  
Old 23 Aug 2013, 07:54
SBlueman SBlueman is offline
 
Join Date: Jan 2006
Can you combine fonts? A different one for headers and paragraphs?
Reply With Quote
  #10  
Old 01 Sep 2013, 03:24
Bubble #5 Bubble #5 is offline
 
Join Date: Apr 2005
Question

Great article. Very helpful. THANKS!

--------------- Added 01 Sep 2013 at 19:10 ---------------

4.2.1

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

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.
__________________
If we don't help each other when we can, then we're not making this world a better place.
Reply With Quote
  #11  
Old 08 Sep 2013, 13:48
XiTCLUB's Avatar
XiTCLUB XiTCLUB is offline
 
Join Date: Jan 2010
Real name: Mian Shahzad Raza
Originally Posted by Bubble #5 View Post
Great article. Very helpful. THANKS!

--------------- Added 01 Sep 2013 at 19:10 ---------------

4.2.1

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

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 08 Sep 2013 at 13:49 ---------------

Originally Posted by SBlueman View Post
Can you combine fonts? A different one for headers and paragraphs?
yes u can use different font-family for h1,h2,h3... and for <p> tags
Reply With Quote
  #12  
Old 08 Sep 2013, 19:25
Bubble #5 Bubble #5 is offline
 
Join Date: Apr 2005
Question

Originally Posted by XiTCLUB View Post
its all about CSS, you can control via CSS all the font on your forum
Ok well that tells us it's possible, but not the CSS code that we need to use.

Anyone know?
__________________
If we don't help each other when we can, then we're not making this world a better place.
Reply With Quote
  #13  
Old 15 Sep 2013, 22:01
Spangle Spangle is offline
 
Join Date: Jun 2011
Originally Posted by Bubble #5 View Post
Ok well that tells us it's possible, but not the CSS code that we need to use.

Anyone know?
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.
Reply With Quote
  #14  
Old 24 Aug 2017, 14:36
Cem01 Cem01 is offline
 
Join Date: Nov 2016
Real name: Cem
This article is so useful. Google fonts work great on my web site. Thank you!
Reply With Quote
Reply

Similar Article
Article Author Type Replies Last Post
Forum Style -XMedia Darkness- with *CSS3 Fonts* - XiTCLUB Xclusive - 4.1.12 XiTCLUB vBulletin 4.x Styles 26 06 Jan 2013 19:37
Forum Home Enhancements Spice Up Your Forum Look. Rounded Corners For All Browsers borbole vBulletin 4.x Template Modifications 54 19 Sep 2012 20:15
Integration with vBulletin Add Google Web Fonts tafreeh vBulletin 4.x Template Modifications 14 07 Feb 2011 15:29



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Article Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


New To Site? Need Help?

All times are GMT. The time now is 06:10.

Layout Options | Width: Wide Color: