@Font-Face Issues in vBulletin 4.0+

[LisaArnold]

Hi Guys,

I have an interesting problem that needs solving and, to my surprise, very few that are using vBulletin have ever mentioned having issues with @font-face. So here goes:

I want to use a specific font I acquired from font-squirrel, but for some reason I can?t. (Link: http://www.fontsquirrel.com/fonts/Nobile). Yes, it?s free for commercial use. Anyway, I started using the @font-face CSS coding that?s generated from font-squirrel. However, I?ve changed it slightly to mirror what might have been workable across the 4 main browsers + smartphones. (Link: http://readableweb.com/new-font-face...impler-easier/).

This is what I did:

1)I installed the fonts under the public_html folder. Path = /public_html/fonts/
2)The directory and fonts I want to use across multiple browsers have permissions set 755
3)I added the code into additional.css from readableweb as follows:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on December 5, 2011 08:45:23 PM America/New_York */


@font-face {
    font-family: 'NobileRegular';
    src: url(?fonts/nobile-webfont.eot?); /* IE9 Compat Modes */
    src: url(?fonts/nobile-webfont.eot?iefix?) format(?eot?), /* IE6-IE8 */
         url(?fonts/nobile-webfont.woff?) format('woff'), /* Modern Browsers */
         url(?fonts/nobile-webfont.ttf?) format('truetype'), /* Safari, Android, iOS */
         url(?fonts/nobile-webfont.svg#NobileRegular?) format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'NobileItalic';
    src: url(?fonts/nobile_italic-webfont.eot?); /* IE9 Compat Modes */
    src: url(?fonts/nobile_italic-webfont.eot?iefix?) format(?eot?), /* IE6-IE8 */
         url(?fonts/nobile_italic-webfont.woff?) format('woff'), /* Modern Browsers */
         url(?fonts/nobile_italic-webfont.ttf?) format('truetype'), /* Safari, Android, iOS */
         url(?fonts/nobile_italic-webfont.svg#NobileRegular?) format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'NobileBold';
    src: url(?fonts/nobile_bold-webfont.eot?); /* IE9 Compat Modes */
    src: url(?fonts/nobile_bold-webfont.eot?iefix?) format(?eot?), /* IE6-IE8 */
         url(?fonts/nobile_bold-webfont.woff?) format('woff'), /* Modern Browsers */
         url(?fonts/nobile_bold-webfont.ttf?) format('truetype'), /* Safari, Android, iOS */
         url(?fonts/nobile_bold-webfont.svg#NobileRegular?) format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'NobileBoldItalic';
    src: url(?fonts/nobile_bold_italic-webfont.eot?); /* IE9 Compat Modes */
    src: url(?fonts/nobile_bold_italic-webfont.eot?iefix?) format(?eot?), /* IE6-IE8 */
         url(?fonts/nobile_bold_italic-webfont.woff?) format('woff'), /* Modern Browsers */
         url(?fonts/nobile_bold_italic-webfont.ttf?) format('truetype'), /* Safari, Android, iOS */
         url(?fonts/nobile_bold_italic-webfont.svg#NobileRegular?) format('svg'); /* Legacy iOS */
}

4)I tested the font on the footer and copyright footer within stylevars with this notation: NobileRegular, Lucinda Sans Unicode, Sans-Serif

In following this sequence I couldn?t get the Nobile font to load. The question is whether if I?m missing something and what needs to be done such that the font I want to use is viewable across multiple browsers, because at this moment, it's not showing anywhere on the site.

Thx in advance for help.

Lisa