MyBB Community Forums

So yeah.. How so I use @font-face with MyBB?
I've been trying to get it working for ages and there's nothing wrong with it at all.

Is there a reason it's not working?

see search results !!

The search results are the reason for this thread. None of those gave a clear answer on the answer, just one answer on why they don't work.

okay, can we have your code - how you are using font-face ; it is inline code OR on stylesheet ?

Stylesheet

@font-face {
    font-family: 'UbuntuRegular';
    src: url(images/ff/fonts/ubuntu/Ubuntu-R-webfont.eot);
    src: url(images/ff/fonts/ubuntu/Ubuntu-R-webfont.eot?#iefix') format('embedded-opentype),
         url(images/ff/fonts/ubuntu/Ubuntu-R-webfont.woff') format('woff),
         url(images/ff/fonts/ubuntu/Ubuntu-R-webfont.ttf') format('truetype),
         url(images/ff/fonts/ubuntu/Ubuntu-R-webfont.svg#UbuntuRegular') format('svg);
    font-weight: normal;
    font-style: normal;

}

Have you put this in your templates:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

Replace all the values with your set values.

For using it in templates, use something like:

<font face="Arial">Text here</font>

Does it not work by just adding the CSS into global.css? Must I use HTML tags? I don't know why but.

Apparently, no. I just tried it myself and it doesn't work. Not even if you add a separate stylesheet for @font-face. I'll bring this up to the developers to see if it can be fixed.

The best workaround I found is to add your @font-face code to the headerinclude template within style tags, like so:

<style type="text/css">
@font-face {
	font-family: 'UbuntuRegular';
	src: url('images/ff/fonts/ubuntu/Ubuntu-R-webfont.eot');
	src: url('images/ff/fonts/ubuntu/Ubuntu-R-webfont.eot?#iefix') format('embedded-opentype'),
		url('images/ff/fonts/ubuntu/Ubuntu-R-webfont.woff') format('woff'),
		url('images/ff/fonts/ubuntu/Ubuntu-R-webfont.ttf') format('truetype'),
		url('images/ff/fonts/ubuntu/Ubuntu-R-webfont.svg#UbuntuRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}
</style>

Then you can go back to global.css and use the 'UbuntuRegular' font wherever you want. And make sure to always have a fallback font, just in case the font fails loading or something. For example:

h1 {
	font-family: 'UbuntuRegular', Helvetica, Arial, sans-serif;
}

I have this working on my development board, i had to create a fonts folder in the root directory as well as a fonts.css, then use;

@import url('fonts.css');

at the top of the global.css