Enabling fontface with local fonts

Timmy · February 2013

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

whu606 · February 2013

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');
}

Timmy · February 2013

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

422 · February 2013

taught

Timmy · February 2013

Pardon me
I've learned somethin` new

businessdad · February 2013

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.

vrijvlinder · February 2013

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?

422 · February 2013

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

Timmy · 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

Enabling fontface with local fonts

Comments