Using Google Webfonts in vBulletin 5.

محروم.كوم · #1 10-13-2012, 12:40 AM

You can use embeddable fonts in your vBulletin 5 style as long as the browser in use supports it. Browsers that support Embeddable Fonts include IE 9, IE10, Chrome, Safari, and Firefox. Older versions of IE can support Embedded Fonts using a proprietary font format from Microsoft.

To use these fonts follow these instructions.

Go to Google's Webfont site and find the Fonts you want to use. A popular one is Open Sans. If you want to use multiple fonts, click "Add to Collection". If you just want to use one font, click "Quick Use". We're going to use Quick Use.

Google will provide the different varieties of the check the varieties you want. Google also shows a meter on the top right that estimates the load of your font package. Embeddable Fonts need to be downloaded by the end user when they visit, though they can be cached as well. In order to provide some font variety, I have selected Normal 400, Normal 400 Italic, Bold 700, and Bold 700 Italic. Increases the load time a little but provides a lot of flexibility.

After selecting your varieties, scroll down on the page and you'll see the code you need to embed the fonts on your site. You'll need to copy this code for inclusion in your forums. For our Open Sans example the code looks like this:
Code:

Now that you have your code, you need to log into the AdminCP of your vBulletin 5 installation. Once logged in go to Styles & Templates -> Style Manager. Click on the «» button on the far right to expand the template list. Next double click on header to edit that template.

Put the code above in the header. I put it right after the code for the favicon:
Code:

Save the header template

Next you need to change the font-family for an area. vBulletin 5 doesn't have any font stylevars so you need to edit the CSS directly. I recommend using the css_additional.css template. Double click on CSS Templates in the template list and then double click on css_additional.css. By default this template is blank.

Next you'll want to do something like:
Code:
body {font-family: "Open Sans";}
This will change the font globally throughout the entire site. If you want to change a specific area then you can do something like:
Code:
#channel-tabbar ul li a{font-family: "Open Sans"}
The second code sample only changes links in the Navigation Bar area of the site.

I suggest experimenting and playing with different classes until you get the results you're looking for. __DEFINE_LIKE_SHARE__

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
CMS vBulletin 4.0.4 CMS indexing well with Google Search ...?	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	08-09-2010 11:40 PM
Google apps and vBulletin	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	07-25-2010 09:40 AM
WebFonts - Rate Em or Hate Em?	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	06-23-2010 01:40 PM
Google adsence/vbulletin 3.8.4	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	11-24-2009 10:20 AM
how does google recognize vbulletin	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	05-03-2009 05:30 PM