Fuentes CSS personalizadas

Hola, estoy haciendo un blog bastante complejo, y obviamente quiere hacerlo con mis fuentes personalizadas. No consigo hacerlo... He hecho pruebas subiendo la pagina web, y en cuanto salgo de mi PC (donde se supone que esta la fuente) se pone la básica "Arial". Lo he intentado copiando el archivo .otf a la carpeta de la pagina web, y aún así no funciona. Ayudaaa!

Respuestas

Para utilizar una fuente personalizada, no basta con añadirla a tu web o hacer referencia a ella en tus estilos CSS. Además, tienes que activarla en tu web. Imagina que tu fuente se llama MiFuentePersonal.otf y la guardas en la carpeta /web/fuentes/ de tu sitio web. Entonces, en tu CSS tienes que añadir lo siguiente:

@font-face {
    font-family: MiFuentePersonal;
    src: url("/web/fuentes/MiFuentePersonal.otf") format("opentype");
}

Ahora ya puedes utilizar MiFuentePersonal en cualquiera de tus estilos CSS:

body {
    font-family: MiFuentePersonal, Helvetica, sans-serif;
}

Si además de la fuente normal tienes variantes como negrita y cursiva, entonces tienes que añadir una declaración por cada estilo. Por ejemplo, para la negrita:

@font-face {
    font-family: MiFuentePersonal;
    font-weight: bold;
    src: url("/web/fuentes/MiFuentePersonal.otf") format("opentype");
}

Por último, quereía añadir dos comentarios rápidos:

.otf es un formato correcto para las fuentes de escritorio, pero ocupa muchísimo en la web. Por eso el formato que más se utiliza en la web se llama .woff (y .woff2 en el futuro).
Aunque no tengan exactamente la fuente que quieres, quizás puedes plantearte utilizar el servicio gratuito fonts.google.com/ que ofrece cientos de fuentes web listas para usar. Las ventajas son que añadir fuentes web es más fácil para tí y que la velocidad de carga no se resiente porque se sirven directamente desde los servidores de Google.

@javiereguiluz

26 marzo 2017, 10:48