Esta sección ha sido probado por nuestros expertos así garantizamos la exactitud de nuestro tutorial.
Solución:
Punto doble (..) significa que sube una carpeta y luego busca la carpeta detrás de la barra inclinada. Por ejemplo:
Si su index.html está en la carpeta html/files y las fuentes están en html/fontsel .. está bien (porque tienes que retroceder una carpeta para ir a /fonts). ¿Está su index.html en html y sus fuentes en html/fontsentonces debe usar solo un punto.
Otro problema podría ser que su navegador no admita archivos de fuentes .eot.
Sin ver más de su código (y tal vez un enlace a una versión en vivo de su sitio web), realmente no puedo ayudarlo más.
Editar: Olvídese de la parte .eot, me perdí el archivo .ttf en su css.
Prueba lo siguiente:
@font-face
font-family: Gotham;
src: url(../fonts/gothammedium.eot);
src: url(../fonts/Gotham-Medium.ttf);
Estaba teniendo el mismo problema y pensé en compartir mi solución ya que no vi a nadie abordar este problema específicamente.
El problema era que no estaba usando la ruta correcta. Mi CSS se veía así:
@font-face {
font-family: 'sonhoregular';
src: url('fonts/vtkssonho-webfont.eot');
src: url('fonts/vtkssonho-webfont.eot?') format('embedded-opentype'),
url('fonts/vtkssonho-webfont.woff2') format('woff2'),
url('fonts/vtkssonho-webfont.woff') format('woff'),
url('fonts/vtkssonho-webfont.ttf') format('truetype'),
url('fonts/vtkssonho-webfont.svg#vtks_sonhoregular') format('svg');
font-weight: normal;
font-style: normal;
El problema con la ruta es que me estoy refiriendo a la fuente de mi archivo CSS, que está en mi carpeta CSS. Necesitaba subir un nivel primero, luego a la carpeta de fuentes.
Así es como se ve ahora, y funciona muy bien.
@font-face {
font-family: 'sonhoregular';
src: url('../fonts/vtkssonho-webfont.eot');
src: url('../fonts/vtkssonho-webfont.eot?') format('embedded-opentype'),
url('../fonts/vtkssonho-webfont.woff2') format('woff2'),
url('../fonts/vtkssonho-webfont.woff') format('woff'),
url('../fonts/vtkssonho-webfont.ttf') format('truetype'),
url('../fonts/vtkssonho-webfont.svg#vtks_sonhoregular') format('svg');
font-weight: normal;
font-style: normal;
¡Espero que ésto ayude a alguien!
El uso de font-face requiere un poco de comprensión de las inconsistencias del navegador y puede requerir algunos cambios en el propio servidor web. Lo primero que debe hacer es verificar la consola para ver si se están generando mensajes o qué mensajes. ¿Es un problema de permisos o no se encontró el recurso….?
En segundo lugar, debido a que cada navegador espera un tipo de fuente diferente, usaría Font Squirrel para cargar su fuente y luego generar los archivos adicionales y CSS necesarios. http://www.fontsquirrel.com/fontface/generador
Y finalmente, las versiones de FireFox e IE no permitirán que las fuentes se carguen entre dominios. Es posible que deba modificar su configuración de Apache o .htaccess (Encabezado establecido Access-Control-Allow-Origin “*”)
Comentarios y calificaciones
Si para ti ha sido de ayuda nuestro artículo, agradeceríamos que lo compartas con el resto entusiastas de la programación de este modo contrubuyes a extender nuestra información.