Simple tutorial on adding custom fonts in MyBB

Adding custom fonts in MyBB is one of the requirements for every forum administrator to give their forum a different look and style. I will cover two ways on adding custom fonts i.e. using google fonts and using ttf file inside FTP directly. It is very simple, and I will break this tutorial down in simple steps so you can easily add custom fonts.

Adding Custom Fonts
Adding custom fonts in MyBB is simple and it is a three step process.
1. First upload the font in your FTP ie public_html> images > yourfont.ttf. Make sure permission is set to 777 or 755 of yourfont.ttf
2. Now go to your global.css present inside admin panel i.e. Admin CP> Templates and Styles > Theme Stylesheet > Global.css > Edit Advance Mode
Add the below code on top of your global.css

3. Now you can go to any class you want to add custom font and add this code,
[code]font-family: yourfont, sans-serif;[/code] Note: I added sans-serif just in case my file is deleted or not loading as a fallback.

This way you will be able to add custom fonts in your theme in MyBB

Adding Google Fonts
Adding google font is really easy, google has added a small document which you can read for it. Here is a link to it.
To add google fonts in MyBB, first select the font from Google Fonts.
For this example we are selecting, Open Sans.
1. When you select this font, you will get a link like this
Custom font using link in mybb

Add this in your headerinclude template(just above stylesheets) present inside admin panel i.e. Admin CP> Templates and Styles > Templates > Your Theme Templates > Miscellaneous Templates > headerinclude
2. Now go to your global.css and wherever you want to use the google font, add below code in that class
font-family: 'Open Sans', sans-serif;

I hope this tutorial helped you adding custom fonts and google fonts in MyBB.
For more tutorials follow me on twitter @WallBB

Comment (1)

Ginnie

Amazing tutorial, thanks a lot.

1 year ago

Leave a Reply

Your email address will not be published. Required fields are marked *

@