@Font-face: vincular Fuentes con css

Para vincular fuentes personalizadas en tu sitio web debes utilizar @font-face. Con esta regla se puede mejorar la apariencia de nuestros sitios web.

Los formatos que se utilizan son los siguientes:

WOFF (Web Open Font Format) .woff
TrueType .ttf
OpenType .otf
Embedded OpenType .eot
SVG Font .svg

Para convertir una fuente ttf en woof,otf,eot o svg entre aquí.

El código que se coloca en el archivo css es el siguiente:

@font-face{
font-family: 'MyWebFont';
src: url('WebFont.eot');
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
url('WebFont.woff') format('woff'),
url('WebFont.ttf') format('truetype'),
url('WebFont.svg#webfont') format('svg');
}

Recuerda copiar las fuentes en tu carpeta general para que se carguen correctamente y aplicar la fuente en los estilos que desea que aparezcan:

h1 {
font-family:’WebFont.eot’, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
}