After you purchase/download your webfont, open the folder and copy the font files ( EOT, SVG,True-Type and WOFF ).
In RSD, go to Resources (top menu bar) and create a new folder called fonts. Paste the font files into it.
Also within the Resources pane, you can add files. So create a custom-styles.css file for your font and any other custom styles you might add (type it in notepad and copy it).
Paste the font code into it (example):
@font-face {
font-family: 'exotc350_dmbd_btdemi-bold';
src: url('../fonts/webfontkit1/exotic_350_demi-bold_bt-webfont.eot');
src: url('../fonts/webfontkit1/exotic_350_demi-bold_bt-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/webfontkit1/exotic_350_demi-bold_bt-webfont.woff') format('woff'),
url('../fonts/webfontkit1/exotic_350_demi-bold_bt-webfont.ttf') format('truetype'),
url('../fonts/webfontkit1/exotic_350_demi-bold_bt-webfont.svg#exotc350_dmbd_btdemi-bold') format('svg');
font-weight: normal;
font-style: normal;
}
Then (under the above code), include the elements that will use that font. For example, if you only want it used by headings and sub-heads, you could specify the font for some <h> tags.
h1, h2, h3, {
font family: greyhound, another-font, sans-serif;
font-size: <Your font properties;
color: <Your font properties;
etc....
}
You may need to change this "src: url('../fonts/...." depending on where the fonts folder is, maybe just "src: url('/fonts/....".
*Be sure to include a link to your CSS within the site's head ( click the gear icon for Settings and paste or type your link in the Head box).
<link rel="stylesheet" href="css/custom-styles.css" media="all">
I think that's everything...