@ font-face no funciona

Question

No sé por qué pero no se muestra la fuente. Ayuda.

CSS (en la carpeta css): style.css:

@font-face { 
font-family: Gotham; 
src: url(../fonts/gothammedium.eot); 
src: local('Gotham-Medium'), 
url(../fonts/Gotham-Medium.ttf) format('truetype'); 
} 

a { 
font-family:Gotham,Verdana,Arial; 
} 

Answer 1

Periodo 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/fonts, el .. está bien (porque hay que volver atrás una carpeta para ir a /fonts). Es su index.html en html y sus fuentes en html/fonts, entonces debe usar solo un período.

Otro problema podría ser que su navegador podría no ser compatible con .eot font-files.

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 olvidé del archivo .ttf en su CSS.

intente lo siguiente:

@font-face { 
font-family: Gotham; 
src: url(../fonts/gothammedium.eot); 
src: url(../fonts/Gotham-Medium.ttf); 
} 

Answer 2

No

seguro exactamente cuál es su problema, pero trata de lo siguiente:

1. ¿Existen los archivos de fuentes?
2. ¿Necesita presupuestos para las URL?
3. ¿Está utilizando un CSS3-enabled browser?

Check here de ejemplos, si no funcionan para usted, entonces usted tiene otro problema

Editar:

Usted tiene un montón de declaraciones repetidas en su origen, hace este trabajo?

@font-face { font-family: Gotham; src: url('../fonts/gothammedium.eot'); } 

a { font-family:Gotham,Verdana,Arial; } 

Answer 3

Usando font-face requiere un poco de comprensión de inconsistencias de navegación y pueden requerir algunos cambios en el propio servidor web. Lo primero que debe hacer es verificar la consola para ver si se generan/qué mensajes se generan. ¿Es un problema de permisos o recurso no encontrado ...?

En segundo lugar, porque cada navegador está esperando un tipo de letra diferente, utilizaría Font Squirrel para cargar su fuente y luego generar los archivos adicionales y CSS necesarios. http://www.fontsquirrel.com/fontface/generator

Y, por último, 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 establezca Access-Control-Allow-Origin "*")

Answer 4

Tuve este problema recientemente y el problema fue que mi servidor web no estaba configurado para servir archivos woff. Para IIS 7, puede seleccionar su sitio, luego seleccionar el ícono de Tipos MIME. Si .woff no está en la lista, debe agregarlo.Los valores correctos son

File name extension: .woff 
MIME type: application/font-woff 

Answer 5

que estaba teniendo este mismo problema y pensé que me gustaría compartir mi solución, ya que no vi a nadie abordar este problema en concreto.

El problema era que no estaba usando la ruta correcta. Mi CSS 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 refiero a la fuente de mi archivo CSS, que está en mi carpeta de CSS. Necesitaba subir un nivel primero, luego en la carpeta de fuentes. Esto es lo que parece 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 esto ayude a alguien!

Answer 6

Al usar el operador .., ha duplicado la ruta de la carpeta, y obtendrá algo como esto: /wp-content/themes/wp-content/themes/twentysixteen/fonts/.

Utilice la consola en su navegador para ver si hay algún error.

Answer 7

También me enfrento a este tipo de problema. Después de probar todas las soluciones obtuve una solución final sobre este problema. Las razones para este tipo de problema son las fuentes globales definidas. Utilice ! importante palabra clave para cada línea en @ font-face es la solución para este problema.

Descripción completa y ejemplo para la solución de este problema está aquí: - http://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

Answer 8

tratar de poner a continuación HTML en la cabeza tag.It trabajó para mí.

<title>ABC</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

Answer 9

que estaba desarrollando para un cliente árabe, y tenía un tema como este, así, después de usar un generador de fuente para crear mis fuentes. Ninguna de las fuentes que estaba generando funcionaba.

Resultó que había una configuración en las "Opciones avanzadas" del generador que tenía que seleccionar, que no solo utilizaría los glifos del idioma occidental (una opción preseleccionada).

Después de eliminar este subconjunto, mis fuentes funcionaron con los caracteres árabes. Espero que esto pueda ayudar a alguien más en este puesto.

Saludos

Answer 10

Es necesario poner el archivo de fuentes nombre/ruta entre comillas.
Por ejemplo.

url("../fonts/Gotham-Medium.ttf") 

o

url('../fonts/Gotham-Medium.ttf') 

y no

url(../fonts/Gotham-Medium.ttf) 

también @FONT-FACE sólo funciona con algunos archivos de fuentes.: O (

Todos los sitios donde se puede descargar fuentes, nunca decimos las fuentes que funcionan y cuáles no lo hacen