How to use @font-face on SMF

by Mick in Tutorials on 07 Apr 2013

@font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn't got that font installed. This means that web designers will no longer have to adhere to a particular set of "web safe" fonts that the user has pre-installed on their computer.

The basics are pretty simple to implement the @font-face rule, but it is possible to add lots of options to extend its features.

Initially you define the rule, "font-family" is what you want to call the font, "src" is where it can be found, include a "font-weight" (not needed for normal, but required by everything else, bold, thin etc).

-Create a folder called "fonts" in your theme of choice.
-Lets go here to choose our font set. Handpicked free fonts for graphic designers with commercial-use licenses. | Font Squirrel
-Pick your font and download the webfont kit.
-Upload everything to the "fonts" folder you just created.

In index.css file add...
@font-face {
    font-family: DeliciousRoman;
    src: url('../fonts/delicious/Delicious-Roman.otf');

font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;

Replace with:
font: 78%/130% DeliciousRoman, Helvetica, Arial, sans-serif;

Easy as pie.
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.

Get more stuff like this

Subscribe to our mailing list and get interesting content and updates.