1. 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!

Discussion in 'Troubleshooting and Problems' started by Stuart Wright, May 16, 2013.

  1. Stuart Wright

    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?
     
  2. Lisa

    Lisa Well-Known Member

  3. 0xym0r0n

    0xym0r0n Well-Known Member

    @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
     
    SneakyDave likes this.
  4. Stuart Wright

    Stuart Wright Well-Known Member

    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?
     
  5. Stuart Wright

    Stuart Wright Well-Known Member

    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?
     
  6. Stuart Wright

    Stuart Wright Well-Known Member

    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.
     
    Lisa and 0xym0r0n like this.
  7. Shelley

    Shelley Well-Known Member

    Give me a moment. Be back in two ticks.
     
    0xym0r0n and Lisa like this.
  8. Lisa

    Lisa Well-Known Member

    That's just favouritism now :p Where's my angelic smiley.. and my.... and my .... :D
     
    Shelley likes this.
  9. Shelley

    Shelley Well-Known Member

    This was already designed. :LOL:

    Only be used in small doses :p suicidal.png
     
    Stuart Wright, SneakyDave and Lisa like this.
  10. Forsaken

    Forsaken Well-Known Member

    Shelley likes this.
  11. Stuart Wright

    Stuart Wright Well-Known Member

    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!
    [​IMG]
    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.
     
    Shelley likes this.
  12. Stuart Wright

    Stuart Wright Well-Known Member

    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.
     
  13. SneakyDave

    SneakyDave Well-Known Member

    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');
    
     
  14. Forsaken

    Forsaken Well-Known Member

    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/

    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.
     

Share This Page