First you have to load the font on the user's device since there is no guarantee that is is available. How are you doing this?
Google Fonts?
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:
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:
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
