How to change the default font in vbulletin 5

[Wonder Woman]

The best method for Google Fonts is to add the <link> code they provide to your header_include template. Once that is done, then edit your Style Variables and add the font family name to the beginning of the list for the global_header_font and global_text_font style variables.

If it is not available on Google Fonts then you need to make the WOFF file available to vBulletin. Following these steps;

1. These should be uploaded to their own subdirectory in /fonts/ on your server.

2. Once this is done, then you need to go into your AdminCP then Styles -> Style Manager. Select "Add New Template" from the dropdown. Give this template a name like "css_font_droidarabickufi.css" and add this code:

<vb:if condition="!empty($use_regular) OR !empty($use_all)">
@font-face {
  font-family: 'droidarabickufi';
  src: url('fonts/droidarabickufi/droid-arabic-kufi.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
</vb:if>

3. Save this.

4. Then in css_fonts.css add this code:

{vb:template css_font_droidarabickufi.css,
    use_all=1,
}

5. Finally, go back to the Style Manager and choose "Style Variable Editor" for your style. In the global_header_text style variable add droidarabickufi followed by a comma that the beginning of the font family list. Do the same for global_text_font

Now to add a specific font, which is not easily available like Droid Arabic Kufi

You can add this into your theme's additional_css

/* Change font to Droid Arabic Kufi (Arabic) http://www.google.com/fonts/earlyaccess -START*/

@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot);
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff) format('woff'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 700;
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot);
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff) format('woff'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.ttf) format('truetype');

}
.forum-list-container .forum-item .cell-forum .forum-title {
  font: bold 15pt 'Droid Arabic Kufi';
}
.forum-list-container .forum-desc {
  font: bold 10pt 'Droid Arabic Kufi';
}
.forum-list-container .lastpost-title {
  font: bold 12pt 'Droid Arabic Kufi';
}
.forum-list-container .lastpost-by {
  font: bold 12pt 'Droid Arabic Kufi';
}
body.l-small {
  font: bold 9pt 'Droid Arabic Kufi',Majalla2;
}
.l-small .forum-list-container .category-header .category {
  font: bold 9pt 'Droid Arabic Kufi';
}
.forum-title.l-small {
  font: bold 9pt 'Droid Arabic Kufi';
}

.b-post__content {
    font: normal normal 18px 'Droid Arabic Kufi' !important;
}