XF 1.1 Everyone duck - Stuart's learning Xenforo!

Stuart Wright

Well-known member
Folks I'm starting my very first steps into Xenforo by putting a custom font in the forum.

I edited extra.css and inserted
Code:
@font-face {
    font-family: 'Titillium Web';
    src: url('/fonts/Titillium.eot');
    src: local('ò∫'),
    url('/fonts/Titillium.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Titillium.woff') format('woff'),
    url('/fonts/Titillium.ttf') format('truetype'),
    url('/fonts/Titillium.svg#TitilliumText25L400wt') format('svg');
    font-weight: normal;
    font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
    font-family: 'Titillium Web';
    url('/fonts/Titillium.svg#TitilliumText25L400wt') format('svg');
}
}
@font-face {
    font-family: 'Titillium Bold';
    src: url('/fonts/TitilliumBold.eot');
    src: local('ò∫'),
    url('/fonts/TitilliumBold.eot?#iefix') format('embedded-opentype'),
    url('/fonts/TitilliumBold.woff') format('woff'),
    url('/fonts/TitilliumBold.ttf') format('truetype'),
    url('/fonts/TitilliumBold.svg#TitilliumText25L999wt') format('svg');
    font-weight: bold;
    font-style: normal;
}
and editing the Style Properties: General > body to insert 'Titillium Web', in front of the standard fonts.
But nothing has changed.
What have I done wrong?
 
@font-face {
font-family: ChineseRocks;
src: url('Chinese-Rocks.woff') format('woff'),
url('Chinese-Rocks.ttf');
}
.recentNews .subHeading .newsTitle {
font: normal 20px "ChineseRocks" !important;
}

This is what I use for my homepage
 
No, I was right the first time with extra.css, then.
Thanks.
But I can't see what I'm doing wrong. Is it maybe the URL of the fonts?
I don't want them in the xenforo folder as they are used by other scripts on AVForums.
They are in /fonts off root, so the path is correct, right?
 
That's just favouritism now :p Where's my angelic smiley.. and my.... and my .... :D

This was already designed. :LOL:

Yay, I got it. Forgot I was using the new sandbox and hadn't actually put the fonts folder in it. [requires suicide smiley]
Thanks folks. A good start illustrating the great support from the community.

Only be used in small doses :P suicidal.webp
 
I tried this but Google web fonts aren't anti-aliased properly in Chrome and maybe some other browsers. It's not perfect, but better if the font is fed from the server. Leastways that's what I read and found in practise myself.

1.webp

Blimey Shelly, I would have been more specific if I had known you were reading!
suicide.gif

I'm just having a play really, now that the sandbox is set up and I can get some coders to work on imports and addons.
 
Looks great!

To use the google fonts, where's the best place to put the link to the style sheet they use?

Never mind, I was being dense, the @font-face declares that. Just need to change the source to something like:
Code:
src: local('Titillium Web'), local('TitilliumWeb-Regular'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/7XUFZ5tgS-tD6QamInJTcdGU7DQ8I6RFMlK0vgclk7w.woff) format('woff');
 
I tried this but Google web fonts aren't anti-aliased properly in Chrome and maybe some other browsers. It's not perfect, but better if the font is fed from the server. Leastways that's what I read and found in practise myself.

View attachment 46312

Blimey Shelly, I would have been more specific if I had known you were reading!
suicide.gif

I'm just having a play really, now that the sandbox is set up and I can get some coders to work on imports and addons.
You can use -webkit-font-smoothing (http://www.usabilitypost.com/2010/08/26/font-smoothing/) to clear that issue up.

It's an issue with all web-fonts but more so with font services due to the way that the fonts are delivered.

You can read about the issue here: http://blog.typekit.com/category/type-rendering/

Titillium is a bit smaller than I'd like by default. I wish there was a way to up the size of all fonts in Xenforo globally a notch.

I wish there were a way to bulk manage all of the font sizes period :mad:.

I want to move all my fonts to the rem size unit but the easy way to do so would add an additional 437+ lines of code to my CSS.
 
Top Bottom