Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

Enabling fontface with local fonts

I am using Bootstrap and I want to use a specific font for the forum, how should I do this?

Comments

  • Options
    whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    I'm assuming you mean you want that font to be displayed to all visitors, whether or not they have the font installed on their computer.

    AfaIk you would use @font-face

    See here: http://css-tricks.com/snippets/css/using-font-face/

    You would have to have the font available on your server, if it isn't a freely available Google font (or similar)
    This is how it is used in the Bittersweet theme in 2.1:

    @font-face {
      font-family: 'Bitter';
      font-style: normal;
      font-weight: 400;
      src: local('Bitter-Regular'), url('http://themes.googleusercontent.com/static/fonts/bitter/v3/2PcBT6-VmYhQCus-O11S5-vvDin1pK8aKteLpeZ5c0A.woff') format('woff');
    }
  • Options

    thank you so much, you've learned me somethin new today :)

  • Options
    422422 Developer MVP

    taught

    There was an error rendering this rich post.

  • Options

    Pardon me :p
    I've learned somethin` new

  • Options
    businessdadbusinessdad Stealth contributor MVP

    Just be careful, if you use font-face and reference a font on an external server (e.g. Google), some Users might not see them, as some browsers/browser plugins, such as NoScript, block such type of cross domain requests.

    I had such issue myself, all browsers displayed the font, it took me a while to figure out that the font was being blocked.

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    just add the font files to the forum folder.

    example:

    forum/Bloody.ttf

    If I am correct that should be enough to become available no?

  • Options
    422422 Developer MVP

    I agree, dont reference external urls. Download the font-face pack and call them individually. like ..

    @font-face {
        font-family: 'DroidSansRegular';
        src: url('fonts/DroidSans-webfont.eot');
        src: url('fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/DroidSans-webfont.woff') format('woff'),
             url('fonts/DroidSans-webfont.ttf') format('truetype'),
             url('fonts/DroidSans-webfont.svg#DroidSansRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    

    ensure as vrijinder said, you have correct file path

    There was an error rendering this rich post.

  • Options
    TimmyTimmy New
    edited February 2013

    @vrijvlinder said:
    just add the font files to the forum folder.

    example:

    forum/Bloody.ttf

    If I am correct that should be enough to become available no?

    That ture, I did the same

Sign In or Register to comment.