El uso de la porpiedad @font-face es muy sencilla de usar, como podrás ver en el siguiente código el uso es el siguiente:

@font-face {
font-family: "Museo";
src: url(URL DEL ARCHIVO FUENTE/museo.otf);
}

En este caso la extensión del archivo fuente es “.otf”, pero hay otros tipos de extensiones como “.ttf” que es True Type Font, pero yo personalmente me gusta mas usar las tipo OpenTypeFont o “.otf” por que nos ofrecen más calidad de bordes en las letras. Una vez ya hemos llamado la fuente a su dirección específica, podemos darle uso en el mismo CSS de esta forma:

p {
font-family: "Museo";
}

Debes tener en cuenta que cuando la aplicamos (en este caso a los párrafos solamente), deben coinsidir el nombre que le colocamos al momento de llamarla, en este caso “Museo”. Ya con este podrás observar la fuente que hallas utilizado, es algo que CSS nos ofrece para mejorar nuestros sitios, personalizarlos y darles estilo, la intención del CSS.

Los chicos de Think Vitamin, exactamente Jenna Smith, publicó un post con este funcional tutorial. Ella explica explícitamente lo que debes hacer para obtener el correcto funcionamiento de la lightbox. Debes tener en cuenta que el tutorial es en inglés, usa Google Translate si no tienes conocimientos sobre el idioma, aun así el tutorial es intuitivo.

Enlace | How to Create a Valid Non-Javascript Lightbox
Demo | Link

La idea es solucionar el problema que sucede con un div cuando se le asigna la propiedad float a uno de elementos dentro de ese div, el problema es que cuando se le asigna dicha propiedad, el div contenedor se encoje, esto es debido a que al momento de asignarle un valor a la propiedad float a un elemento, este se “sale” del fluido normal del lenguaje HTML haciendo que el div contenedor parezca no tener contenido.

Para solucionar esto se le agrega un div al final del div contenedor, así:

<div>
<p>Contenido del div</p>
<div></div>
</div>

Suponiendo que el contenido está flotado a la izquierda así:

div p {
width: 100px;
float: left;
}

El CSS para el div de ayuda:

.float {
height: 0;
clear: both;
}

Tambien hay otra forma de hacerlo y tiene una ventaja, pero tambien desventaja, ya que no es mostrado debidamente por Internet Explorer, pero es solucionable agregando una propiedad mas al div contenedor en el archivo css , se trata de la propiedad overflow, que hace que el div contenedor se extienda hasta abarcar todo el contenido. La ventaja es que no ensucia el código HTML así que es la solución más practica. Así va el CSS:

div {
width: 100%;
overflow: hidden;
}

Una vez realizado esto, este es el resultado, tambien pueden ver a la izquierda como se comporta el div contenedor sin el div de ayuda: Para mí es mejor la pimera opción ya que nos garantiza la segura presentación de lo que queremos, aunque nos ensucie un poco el código HTML.