• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.1 Everyone duck - Stuart's learning Xenforo!

Stuart Wright

Well-known member
#1
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?
 

0xym0r0n

Well-known member
#3
@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

Well-known member
#4
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

Well-known member
#5
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

Well-known member
#6
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

Well-known member
#9
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.png
 

Stuart Wright

Well-known member
#11
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.jpg

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.
 

SneakyDave

Well-known member
#13
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');
 

Forsaken

Well-known member
#14
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 :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.