@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-weight:400;
}Find:
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;Replace with:
font: 78%/130% DeliciousRoman, Helvetica, Arial, sans-serif;Easy as pie.