Для загрузки на сайт нестандартных шрифтов, используйте следующий css сниппет:

@font-face {
font-family: 'MyFont';
src: url('webfont.eot'); /* IE9 */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Современные браузеры */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Для непосредственного использования:

.you_class {
font-family: 'MyFont', sans-serif;
}

Media

Определяет устройство, для которого следует применять стилевое оформление. Это позволяет сделать разный стиль для отображения документа на экране монитора и при его печати. Допускается писать несколько значений через запятую.

Пример использования:

<link rel="stylesheet" type="text/css" href="print.css" media="print">

Тип	Описание
all	Все типы. Это значение используется по умолчанию.
aural	Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
braille	Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheld	Наладонные компьютеры и аналогичные им аппараты.
print	Печатающие устройства вроде принтера.
projection	Проектор.
screen	Экран монитора.
speech	Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.
tv	Телевизор.
tty	Телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана. Для них не должны использоваться пикселы в качестве единиц измерения.

Иногда необходимо сделать блок “прошитый” нитками. Это можно реализовать на css:

.you_class {
padding: 20px;
margin: 10px;
background: #ff0030;
color: #fff;
font-size: 21px;
font-weight: bold;
line-height: 1.3em;
border: 2px dashed #fff;
border-radius: 10px;
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-shadow: -1px -1px #aa3030;
font-weight: normal;
}

Используйте свой class в html:

<div class="you_class">Тут пример текста</div>

Будет выглядеть вот так:

Можно посмотреть в действии здесь.

Для поддержки прозрачности используйте следующий css код:

.you_class {

/*для  IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/*для IE 5-7 */
filter: alpha(opacity=50);

/* для Netscape и FF */
-moz-opacity: 0.5;

/* для Safari 1.x */
-khtml-opacity: 0.5;

/* для современных браузеров */
opacity: 0.5;
}

Внимание! Данный css сниппет не валидный!

Выберите семейство шрифта для себя, разделенные на группы (типы шрифтов). Из группы т.н. “Универсальных семейств шрифтов”:

• sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
  
• serif — шрифты с засечками (антиквенные), типа Times;
• monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).
• cursive — курсивные шрифты;
• fantasy — декоративные шрифты;

Sans-Serif

Arial, sans-serif;

Helvetica, sans-serif;

Gill Sans, sans-serif;

Lucida, sans-serif;

Helvetica Narrow, sans-serif;

Georgia, sans-serif;

sans-serif;

Serif

Times, serif;

Times New Roman, serif;

Palatino, serif;

Bookman, serif;

New Century Schoolbook, serif;

serif;

Monospace

Andale Mono, monospace;

Courier New, monospace;

Courier, monospace;

Lucidatypewriter, monospace;

Fixed, monospace;

monospace;

Cursive

Comic Sans, Comic Sans MS, cursive;

Zapf Chancery, cursive;

Coronetscript, cursive;

Florence, cursive;

Parkavenue, cursive;

cursive;

Fantasy

Impact, fantasy;

Arnoldboecklin, fantasy;

Oldtown, fantasy;

Blippo, fantasy;

Brushstroke, fantasy;

fantasy;