[template] XenFans.com CSS3 @font-face tweak

[Floris]

XenFans.com CSS3 @font-face tweak
version 0.0.1 for XenForo version 1.0.0 beta 2

Description:
This template modification adds a CSS @font-face to your board to make the header 1 titles, which you see under the breadcrumbs, show in fonts otherwise not available - and much more sexy looking.

We're using it here on http://xenfans.com/ and there have been quite a few requests for it, so I've decided to give the non-complicated version

Installation:
Download this font "REGULAR" in OTF: http://www.yanone.de/typedesign/kaffeesatz/

Put it in the root dir of where you have xenforo installed

Open the admin.php > appearance > template > public.css and at the bottom add:

@font-face { font-family: YanoneKaffeesatz; src: url('YanoneKaffeesatz-Regular.otf'); }

Save the template

Then go to the template PAGE_CONTAINER and find this code:

<h1><xen:if is="{$h1}">{xen:raw $h1}<xen:elseif is="{$title}" />{xen:raw $title}<xen:else />{$xenOptions.boardTitle}</xen:if></h1>

and replace the <h1> tag with:

<h1 style="font-family: YanoneKaffeesatz, Helvetica, sans-serif; font-size: 28px">

(in other words: add style="" to the h1 tag)

Save the template.

And, you should be done.

Screenshots:

 

[George G Halstead]

Liked this one alot.

 

[Floris]

Liked this one alot.

oh btw, pssst.. you got a PM ^_^

 

[Miko]

Then go to the template PAGE_CONTAINER and find this code:

<h1><xen:if is="{$h1}">{xen:raw $h1}<xen:elseif is="{$title}" />{xen:raw $title}<xen:else />{$xenOptions.boardTitle}</xen:if></h1>

and replace the <h1> tag with:

<h1 style="font-family: YanoneKaffeesatz, Helvetica, sans-serif; font-size: 28px">

(in other words: add style="" to the h1 tag)

Nice one Floris!
I just did the same for my forum node categories

Only suggestion i have is to not add the inline style and instead use css selector, I have not tested it with your mod by that h1 tag is always in titleBar div so you should be able to add

.titleBar h1 {
font-family: YanoneKaffeesatz, Helvetica, sans-serif;
font-size: 28px;
}

to your css template, without the nedd of editing the page_container.

 

[Floris]

To be honest, the only reason I did it inline is because I already customized the template and didn't want to customize other templates It's still early in the beta of xenforo, and it makes upgrading a bit easier.
After beta 3, with the new style properties and other elements like EXTRA.css and no more footer/header .css etc. upgrading what I have is a lot easier. I am down from 9 templates for the xenfans style to 3 now.

 

[George G Halstead]

I customized my logo to meet the OTF as well. Gives a very distinct look.

 

[Vincent_imported]

If you want this to happen without template changes, you can do it by going to
Style Properties -> General -> Page Title

There, fill in the following:

• Size: 28px
• Font Family: YanoneKaffeesatz, Helvetica, sans-serif

Now update the style properties and it will work

 

[a_legacy_reborn_oth]

Has anyone else had any load related issues after putting this up? For some reason when I tried putting this up(on a board a long time ago) it kept taking forever to load the text, it would load the rest of the page and the default text with but then like 3 seconds later the actual text YanoneKaffeesatz would load.

 

[Floris]

Yeah, a few people have reported issues with this. However, the bigger majority when I ask around mention it loads instantly. I think it's a per os/browser performance issue. It's a modern technology where you're injecting a font-face type.

 

[a_legacy_reborn_oth]

Yeah, a few people have reported issues with this. However, the bigger majority when I ask around mention it loads instantly. I think it's a per os/browser performance issue. It's a modern technology where you're injecting a font-face type.

I'm using Win7(sadly although I do switch to Ubuntu sometimes) and FF5, anyway that you know of to make it faster?

 

[Floris]

It's instant on the Mac, and on XP in Virtualization .. I've yet to reproduce the slowness :/