@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-syntax-simpler-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

[KevinL]

Put the fonts in the forum folder and give the full url when calling them

eg:

http://forum.com/forum/fonts/nobile_italic-webfont.ttf

[LisaArnold]

Thanks for you reply KevinL :)

I’d prefer not to use absolute URLs, especially when I want it to work in Firefox where they prefer to use relative URLs when embedding fonts in CSS. It’s like styling everything in HTML rather than using CSS given its purpose and function.

Besides, I had already tried this when it wasn’t working in the first instance (last night).

The reason why I wanted to know where I went wrong is because I’m thinking it has to do more than just the CSS coding. Is it a case of not repointing the font URLs correctly? Do I need to modify my .htaccess? How much more editing/modifications are required in vBulletin if using stylevars + CSS in additional.css is not enough?

Cheers,
Lisa

[Lynne]

You haven't posted the CSS where you have used these new font faces, so it's hard to know if it isn't your CSS that is wrong. (That code just makes the font-face available, it doesn't use it.)

[LisaArnold]

Sorry, Lynne, I didn't know you'd be posting on both sites/forums.

I replied to you here - https://www.vbulletin.com/forum/showthread.php/394012-Font-Face-Issues-in-vBulletin-4-0?p=2250575&viewfull=1#post2250575

Once again, thanks for your help.