MyBB Community Forums
Want a custom font? Learn how! - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Extensions (https://community.mybb.com/forum-201.html)
+--- Forum: Themes (https://community.mybb.com/forum-103.html)
+---- Forum: Theme Development (https://community.mybb.com/forum-105.html)
+---- Thread: Want a custom font? Learn how! (/thread-89157.html)

Pages: 1 2 3 4


Want a custom font? Learn how! - Wes the Bes - 2011-02-25

Hey guys.

I find that having a standard Times New Roman, Arial, Sans-Serif fonts are boring.

You can change the font face, however all users have to have that font install which, evidently is inconvient.

With this, the users should see a custom font that they might not download.

I'll list them in steps to make them easier.

1. Go to your FTP file manager
2. Go to the main directory of your forums (the ones with the folders admin, cache, images, inc, etc.)
3. Make a new folder and name it fonts.
4. Upload your font's file, it should be a TTF file or an OTF, for others are not formatted for other computers
5. Go to the theme you want a the font in
6. Go to global.css
7. Insert this code at the bottom of global.css:

@font-face {
	font-family: $1;
	src: url(fonts/$2);
}
(below the next code will tell you want $1 and $2 means)

and in body where it says font-face: replace the text following it with $1, it should look like this:
body {
	background: #B8E2FF;
	color: #000;
	font-family: $1;
	font-size: 13px;
	text-align: center;
}
$1 = The name of the font
$2 = The file name of the font with extension (you must have capitals if the file name has capitals)
Please keep in mind, that you do not need to have anything around it the same, this was a snippet from theme.


Also, this will do most of the fonts, but some areas don't change. This is because they have a font-family definition. Just enter $1 whenever you come across the font-family and you want to change the font face.


Hoped I helped!


RE: Want a custom font? Learn how! - Andrew B. - 2011-02-26

Thanks for posting this. I'm confused, though. Wherever you are putting $1, am I supposed to put myfontname.ttf?




RE: Want a custom font? Learn how! - WbDev - 2011-02-26

no just put the font name not the font file!


RE: Want a custom font? Learn how! - Wes the Bes - 2011-02-26

Just put in the font name, however, you may put in something else, but referring to the font name instead of a nickname is less confusing. Your ttf file should go where it says $2
So if your font was Jokerman, you would enter the TTF in $2 and you would put Jokerman where it says $1and yu continue on with the steps


RE: Want a custom font? Learn how! - Andrew B. - 2011-02-26

So if my file is jokerman.ttf, it would be:

@font-face {
    font-family: jokerman;
    src: url(fonts/jokerman.ttf);
}

and

body {
    background: #B8E2FF;
    color: #000;
    font-family: jokerman;
    font-size: 13px;
    text-align: center;
}



RE: Want a custom font? Learn how! - Solidus - 2011-02-26

I will install Terminus, it's the best font in existence.


RE: Want a custom font? Learn how! - brad-t - 2011-02-26

(2011-02-26, 01:34 AM)Solidus Wrote: I will install Terminus, it's the best font in existence.

i really hope this is a joke



RE: Want a custom font? Learn how! - Solidus - 2011-02-26

I wont be surprised if you Google'd that and found the awful font also named Terminus. I'm talking about the Terminus only found on Linux.
This one,
[Image: term.png]


RE: Want a custom font? Learn how! - brad-t - 2011-02-26

Oh that's not so bad.

I still wouldn't use a non-basic font site-wide though.


RE: Want a custom font? Learn how! - Solidus - 2011-02-26

It's for me only, I wouldn't force it on the users.