css | Tutoriales en la Web

Tipografia personalizado con CSS utilizando Dreamweaver

Posteado el 25. May, 2010 por Webi in CSS, Desarrollo Web, HTML y CSS, Recursos

Puedes ver en este link lo que haremos en CSS

PASO 1

Crear un documento HTML en Dreamweaver.

Tipografia CSS

PASO 2

Con el comando Ctrl + S salvamos nuestro documento con el nombre de fuentes.html

Tipografia CSS

PASO 3

Vamos al menú Modify – Page Properties y en la opción Background color seleccionar un color gris claro (#CCCCCC).

Tipografia CSS

PASO 4

Ahora vamos a la pestaña Common – botón Insert Div Tag.

Tipografia CSS

PASO 5

En la ventana de Insert Div Tag en la opción Class colocamos el nombre fuente lo mismo para la opción ID y damos click en el botón New CSS Style.

Tipografia CSS

PASO 6

Marcamos las opciones igual como se muestra en la imagen en la ventana New CSS Rule y damos click en el botón Ok.

Tipografia CSS

PASO 7

Nos aparecerá la ventana de Save Style y guardamos nuestro css en la misma carpeta donde guardamos nuestro archivo HTML con el nombre de fuentes.css

Tipografia CSS

PASO 8

Ahora nos aparecerá la ventana CSS Rule y vamos a la opción Box y le colocamos los valores que se ven en la imagen y damos click en OK.

Tipografia CSS

PASO 9

Una vez que le demos Ok nos aparecerá por ultimo la ventana Insert Div Tag a la cual solo le damos Ok y listo ya tenemos un nuevo Div creado en nuestro HTML.

Tipografia CSS

PASO 10

En la carpeta que tiene todos nuestros archivos creamos una carpeta nueva a la cual le colocamos el nombre de fuente.

Tipografia CSS

PASO 11

Dentro de la carpeta copiamos el archivo blackout.ttf el cual adjunto en este tutorial.

PASO 12

Vamos a nuestro archivo CSS y vamos a agregarle el siguiente código:

Code block

@font-face {
 
font-family: Blackout;
 
src: url("fuente/blackout.ttf") format("truetype");
 
}
 
h1 { font-family: Blackout, Impact, Helvetica, Sans-Serif; }