MyBB Community Forums

I am not sure is it the right Board to post this topic. If not, FORGIVE me.

I am using mybb with Bengali Translation, But i'm not happy with the default font. Is it possible to change the whole font family?

You can embed external font file(s) to your website using the following CSS:

@font-face {
	font-family: 'MyFont';
/* IE9 Compat Modes */
	src: url('myfont.eot');
/* IE6-IE8 */
	src: url('myfont.eot?#iefix') format('embedded-opentype'),
/* Super Modern Browsers */
	url('myfont.woff2') format('woff2'),
/* Pretty Modern Browsers */
	url('myfont.woff') format('woff'),
/* Safari, Android, iOS */
	url('myfont.ttf') format('truetype'),
/* Legacy iOS */
	url('myfont.svg#svgFontName') format('svg');
}

(There is no need to cover all obsolete definitions or legacy browsers)

Then use this font as usual:
Inline: <... style="font-family: MyFont">
CSS: .my_font { font-family: MyFont; }

[ETS]

That seems involved. Unless I'm misunderstanding, you should be able to just go to Themes - [Your Theme] - global.css

body {
	background: #fff;
	color: #333;
	text-align: center;
	line-height: 1.4;
	margin: 0;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;  <-- Change this
	font-size: 13px;
	overflow-y: scroll;
}

Do CTRL+F to find other instances of 'font-family' in the global.css and make changes to them, too.

You can also use google-font, if you want.

Eg, google Font CSS would look similar to this:

font-family: 'Lavishly Yours', cursive;
font-family: 'My Soul', cursive;
font-family: 'Passions Conflict', cursive;

You will need to add the embed to the templates/[Your Theme]/Ungrouped Templates/headerinclide - for the example fonts above, they would look like this:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lavishly+Yours&family=My+Soul&family=Passions+Conflict&display=swap" rel="stylesheet">

This calls forth the font if you don't use "default" style fonts like verdana or arial etc.

Google provides the CSS and <link> code once you've selected your chosen google font(s) as seen in the attached image.




ETA: this is the link to Google Font's Bengali selection: Link

Thanks! It's Working.