XF 1.1 Everyone duck - Stuart's learning Xenforo!

[Stuart Wright]

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

I edited extra.css and inserted

@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?

 

[Lisa]

http://xenforo.com/community/resources/install-and-use-fonts-in-xenforo.402/ This might help. Stuart

 

[0xym0r0n]

@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

 

[Stuart Wright]

Actually I think I already figured it out. It's not css but Javascript. So which template to I edit to put it in the vB3 equivalent of the heading?

 

[Stuart Wright]

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?

 

[Stuart Wright]

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.

 

[Shelley]

[requires suicide smiley]

Give me a moment. Be back in two ticks.

 

[Lisa]

Give me a moment. Be back in two ticks.

That's just favouritism now Where's my angelic smiley.. and my.... and my ....

 

[Shelley]

That's just favouritism now Where's my angelic smiley.. and my.... and my ....

This was already designed.

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

 

[Forsaken]

You can also just use the Google WebFont: http://www.google.com/fonts/specimen/Titillium+Web

 

[Stuart Wright]

You can also just use the Google WebFont: http://www.google.com/fonts/specimen/Titillium Web

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.



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

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.

 

[Stuart Wright]

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.

 

[SneakyDave]

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:

src: local('Titillium Web'), local('TitilliumWeb-Regular'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/7XUFZ5tgS-tD6QamInJTcdGU7DQ8I6RFMlK0vgclk7w.woff) format('woff');

 

[Forsaken]

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!

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 .

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.