MyBB Community Forums

Is there a way to change the main font of the forum?

Yes, go into templates & style>>yourtheme>>global.css and where it says "font family" put in the font you want, if you want the same font for the whole forum, you'll need to do it for the container, thead, tcat, e.c.t.

Another question... How do I change the font in the reply box?

The CSS would be something like this:

#message textarea{
font-family: somefont;
}

Still does not work...

I tried it using chrome developer tools and it worked, make sure your adding it to the bottom of global.css and that you have that theme activated.

I did it and can you help me check if this is correct. :p thanks!

body {
	background: #000 url(../../../images/midnight/bg.png);
	color: #000;
	text-align: center;
	line-height: 1.4;
	margin-top: 0;
	margin-bottom: 25px;
	font-family: Segoe UI;
	font-size: 12px;
}


}		

a:link {
	color: #023659;
	text-decoration: none;
}

a:visited {
	color: #023659;
	text-decoration: none;
}

a:hover, a:active {
	color: #000;
	text-decoration: underline;
}

#container {
	background: #fff;
	width: 92%;
	color: #000000;
	border: 1px solid #000;
	border-top: 0;
	margin: auto auto;
	text-align: left;
}

.logo {
	background: url(../../../images/midnight/logo_bg.png) top left repeat-x;
	border-bottom: 1px solid #000;
	min-height: 100px;
}

#content {
	width: auto !important;
	padding: 20px;
}

.menu ul {
	color: #000000;
	font-weight: bold;
	text-align: right;
	padding: 4px;
}

.menu ul a:link {
	color: #000000;
	text-decoration: none;
}

.menu ul a:visited {
	color: #000000;
	text-decoration: none;
}

.menu ul a:hover, .menu ul a:active {
	color: #4874a3;
	text-decoration: none;
}

#panel {
	background: #efefef;
	color: #000000;
	font-size: 11px;
	border: 1px solid #D4D4D4;
	padding: 8px;
}

.upper_panel {
	background: #1B1C1B url(../../../images/midnight/tcat_bg.png) top left repeat-x;
	color: #fff;
	border-bottom: 1px solid #000;
	padding: 7px;
}

.upper_panel a {
	color: #fff;
	padding-left: 20px;
	margin-right: 15px;
	
	font-weight: bold;
}

.upper_panel a.search {
	background: url(../../../images/midnight/icons/search.gif) no-repeat;
}

.upper_panel a.memberlist {
	background: url(../../../images/midnight/icons/memberlist.gif) no-repeat;
}

.upper_panel a.calendar {
	background: url(../../../images/midnight/icons/calendar.gif) no-repeat;
}

.upper_panel a.help {
	background: url(../../../images/midnight/icons/help.gif) no-repeat;
	margin-right: 0;
}

.upper_panel a.login {
	background: url(../../../images/midnight/icons/login.gif) no-repeat;
	margin-left: 10px;
}

.upper_panel a.register {
	background: url(../../../images/midnight/icons/register.gif) no-repeat;
}

.upper_panel a.logout {
	background: url(../../../images/midnight/icons/logout.gif) no-repeat right;
	padding-right: 20px;
	margin-left: 10px;
	padding-left: 0;
	margin-right: 0;
}

.lower_panel a.admincp {
	background: url(../../../images/midnight/icons/admincp.gif) no-repeat;
	padding-left: 20px;
}

.lower_panel a.modcp {
	background: url(../../../images/midnight/icons/modcp.gif) no-repeat;
	padding-left: 20px;
}

.lower_panel a.usercp {
	background: url(../../../images/midnight/icons/usercp.gif) no-repeat;
	padding-left: 20px;
}

.lower_panel {
	background: #efefef;
	color: #888888;
	border-bottom: 1px solid #ccc;
	padding: 6px;
}

.lower_panel a {
	color: #626262;
	margin-right: 15px;
}

.lower_panel a:hover,
.lower_panel a:active {
	text-decoration: none;
	color: #000;
}

table {
	color: #000000;
	font-family: Segoe UI
	font-size: 13px;
}

.tborder {
	background: #fff;
	width: 100%;
	margin: auto auto;
	border: 1px solid #000;
}

.thead {
	background: #02253E url(../../../images/midnight/thead_bg.png) top left repeat-x;
	color: #fff;
	border-bottom: 1px solid #00101b;
}

.thead a:link {
	color: #fff;
	text-decoration: none;
}

.thead a:visited {
	color: #fff;
	text-decoration: none;
}

.thead a:hover, .thead a:active {
	color: #fff;
	text-decoration: underline;
}

.tcat {
	background: #1B1C1B url(../../../images/midnight/tcat_bg.png) top left repeat-x;
	color: #fff;
	border-bottom: 1px solid #000;
}

.tcat a:link {
	color: #fff;
}

.tcat a:visited {
	color: #fff;
}

.tcat a:hover, .tcat a:active {
	color: #fff;
}

.trow1 {
	background: #f5f5f5;
	border-bottom: 1px solid #e6e6e6;
}

.trow2 {
	background: #EFEFEF;
	border-bottom: 1px solid #e0e0e0;
}

.trow_shaded {
	background: #ffdde0;
}

.trow_selected td {
	background: #FFFBD9;
	border-bottom: 1px solid #F7E86A;
	color: #000;
}

.trow_selected td a,
.trow_selected td a:link,
.trow_selected td a:visited,
.trow_selected td a:hover,
.trow_selected td a:active {
	color: #000;
}

.trow_sep {
	background: #e5e5e5;
	color: #000;
	font-size: 12px;
	font-weight: bold;
}

.tfoot {
	background: #094772;
	color: #ffffff;
	border-top: 1px solid #000d15;
}

.tfoot a:link {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:visited {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:hover, .tfoot a:active {
	color: #ffffff;
	text-decoration: underline;
}

.bottommenu {
	background: #1B1C1B url(../../../images/midnight/tcat_bg.png) top left repeat-x;
	color: #fff;
	border-top: 1px solid #000;
	padding: 6px;
}

.bottommenu div span.smalltext a {
	color: #fff;
	margin-right: 15px;
}

.navigation {
	color: #000000;
	font-size: 11px;
	font-weight: bold;
}

.navigation a:link {
	color: #035084;
	text-decoration: none;
}

.navigation a:visited {
	color: #035084;
	text-decoration: none;
}

.navigation a:hover, .navigation a:active {
	color: #000;
	text-decoration: none;
}

.navigation .active {
	color: #000000;
	font-size: small;
	font-weight: bold;
}

.smalltext {
	font-size: 11px;
}

.largetext {
	font-size: 16px;
	font-weight: bold;
}

input.textbox {
	background: #ffffff;
	color: #000000;
	border: 1px solid #888888;
	padding: 3px;
	
	font-family: Segoe UI
}

textarea {
	background: #ffffff;
	color: #000000;
	border: 1px solid #888888;
	padding: 2px;
	line-height: 1.4;
	
	font-family: Segoe UI
	font-size: 13px;
}

select {
	background: #ffffff;
	border: 1px solid #888888;
	padding: 2px;
	font-family: Segoe UI
}

input.textbox:focus,
textarea:focus,
select:focus {
	border: 1px solid #000;
}

input[type=submit] {
	font-family: Segoe UI
	font-weight: bold;
}

.editor {
	background: #f1f1f1;
	border: 1px solid #ccc;
}

.editor_control_bar {
	background: #fff;
	border: 1px solid #0f5c8e;
}

.autocomplete {
	background: #fff;
	border: 1px solid #000;
	color: black;
}

.autocomplete_selected {
	background: #034877;
	color: #fff;
}

.popup_menu {
	background: #fff;
	border: 1px solid #000;
}

.popup_menu .popup_item {
	background: #efefef;
	color: #000;
}

.popup_menu .popup_item:hover {
	background: #034877;
	color: #fff;
}

.trow_reputation_positive {
	background: #ccffcc;
}

.trow_reputation_negative {
	background: #ffcccc;
}

.reputation_positive {
	color: green;
}

.reputation_neutral {
	color: #444;
}

.reputation_negative {
	color: red;
}

.invalid_field {
	border: 1px solid #f30;
	color: #f30;
}

.valid_field {
	border: 1px solid #0c0;
}

.validation_error {
	background: url(../../../images/midnight/invalid.gif) no-repeat center left;
	color: #f30;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_success {
	background: url(../../../images/midnight/valid.gif) no-repeat center left;
	color: #00b200;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_loading {
	background: url(../../../images/midnight/spinner.gif) no-repeat center left;
	color: #555;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

/* Additional CSS (Master) */
img {
	border: none;
}

.clear {
	clear: both;
}

.hidden {
	display: none;
	float: none;
	width: 1%;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.menu ul {
	list-style: none;
	margin: 0;
}

.menu li {
	display: inline;
	padding-left: 5px;
}

.menu img {
	padding-right: 5px;
	vertical-align: top;
}

#panel .links {
	margin: 0;
	float: right;
}

.expcolimage {
	width: auto;
	float: right;
	vertical-align: middle;
	margin-top: 2px;
}

img.attachment {
	border: 1px solid #E9E5D7;
	padding: 2px;
}

hr {
	background-color: #000000;
	color: #000000;
	height: 1px;
	border: 0px;
}

#copyright {
	background: #02253E url(../../../images/midnight/thead_bg.png) top left repeat-x;
	color: #fff;
	margin: 0;
	padding: 6px;
	border-top: 1px solid #00101b;
}

#copyright a {
	color: #fff;
}

#debug {
	float: right;
	text-align: right;
	margin-top: 0;
}

blockquote {
	border: 1px solid #ccc;
	margin: 0;
	background: #fff;
	padding: 4px;
}

blockquote cite {
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	font-style: normal;
	display: block;
	margin: 4px 0;
}

blockquote cite span {
	float: right;
	font-weight: normal;
}

.codeblock {
	background: #fff;
	border: 1px solid #ccc;
	padding: 4px;
}

.codeblock .title {
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	margin: 4px 0;
}

.codeblock code {
	overflow: auto;
	height: auto;
	max-height: 200px;
	display: block;
	font-family: Segoe UI
	font-size: 13px;
}

.subforumicon {
	border: 0;
	vertical-align: middle;
}

.separator {
	margin: 5px;
	padding: 0;
	height: 0px;
	font-size: 1px;
	list-style-type: none;
}

form {
	margin: 0;
	padding: 0;
}

.popup_menu .popup_item_container {
	margin: 1px;
	text-align: left;
}

.popup_menu .popup_item {
	display: block;
	padding: 3px;
	text-decoration: none;
	white-space: nowrap;
}

.popup_menu a.popup_item:hover {
	text-decoration: none;
}

.autocomplete {
	text-align: left;
}

.subject_new {
	font-weight: bold;
}

.highlight {
	background: #FFFFCC;
	padding: 3px;
}

.pm_alert {
	background: #FFF6BF;
	border: 1px solid #FFD324;
	text-align: center;
	padding: 5px 20px;
	font-size: 11px;
}

.red_alert {
	background: #FBE3E4;
	border: 1px solid #A5161A;
	color: #A5161A;
	text-align: center;
	padding: 5px 20px;
	font-size: 11px;
}

.high_warning {
	color: #CC0000;
}

.moderate_warning {
	color: #F3611B;
}

.low_warning {
	color: #AE5700;
}

div.error {
	padding: 5px 10px;
	border-top: 2px solid #FFD324;
	border-bottom: 2px solid #FFD324;
	background: #FFF6BF;
	font-size: 12px;
}

div.error p {
	margin: 0;
	color: #000;
	font-weight: normal;
}

div.error p em {
	font-style: normal;
	font-weight: bold;
	padding-left: 24px;
	display: block;
	color: #C00;
	background: url(../../../images/midnight/error.gif) no-repeat 0;
}

div.error.ul {
	margin-left: 24px;
}

.online {
	color: #15A018;
}

.offline {
	color: #C7C7C7;
}

.pagination {
	font-size: 11px;
	padding-top: 10px;
	margin-bottom: 5px;
}

.tfoot .pagination, .tcat .pagination {
	padding-top: 0;
}

.pagination .pages {
	font-weight: bold;
}

.pagination .pagination_current, .pagination a {
	padding: 2px 6px;
	margin-bottom: 3px;
}

.pagination a {
	background: #efefef;
	border: 1px solid #ccc;
}

.pagination .pagination_current {
	background: #efefef;
	border: 1px solid #ccc;
	
	font-weight: bold;
}

.pagination a:hover {
	background: #034877;
	color: #fff;
	border: 1px solid #023253;
	text-decoration: none;
}

.thread_legend, .thread_legend dd {
	margin: 0;
	padding: 0;
}

.thread_legend dd {
	padding-bottom: 4px;
	margin-right: 15px;
}

.thread_legend img {
	margin-right: 4px;
	vertical-align: bottom;
}

.forum_legend, .forum_legend dt, .forum_legend dd {
	margin: 0;
	padding: 0;
}

.forum_legend dd {
	float: left;
	margin-right: 10px;
}

.forum_legend dt {
	margin-right: 10px;
	float: left;
}

.success_message {
	color: #00b200;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.error_message {
	color: #C00;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.post_body {
	padding: 5px;
}

.post_content {
	padding: 5px 10px;
}

.quick_jump {
	background: url(../../../images/jump.gif) no-repeat 0;
	width: 13px;
	height: 13px;
	padding-left: 13px; /* amount of padding needed for image to fully show */
	vertical-align: middle;
	border: none;
}

fieldset,
fieldset.trow1,
fieldset.trow2 {
	background: #ededed;
	border: 1px solid #ccc;
}

#message textarea {
	font-family: Segoe UI;

If you don't mind it applying to all the text areas in your design just change the whole textarea tag in this code:

Quote:textarea {
background: #ffffff;
color: #000000;
border: 1px solid #0f5c8e;
padding: 2px;
font-family: Verdana, Arial, Sans-Serif;
line-height: 1.4;
font-size: 13px;
}

Its located about half way down global.css