web-dev-qa-db-fra.com

@ font-face ne fonctionne pas sur chrome

J'utilise la dernière version de Google Chrome et elle ne rendra pas la police. 

J'utilise Debian Linux et tous les autres navigateurs, y compris Chromium, affichent correctement les polices incluses. 

La déclaration de visage de police que j'utilise est: 

@font-face {
    font-family: Dejaweb;
    src: url('DejaWeb.ttf');
}

@font-face {
    font-weight: bold;
    font-family: Dejaweb;
    src: url('DejaWeb-Bold.ttf');
}
cssgoogle-chromecss3font-face
13
Bojan Savic

Chaque fois que @ font-face ne fonctionne pas, pour moi, dans les navigateurs supposément compatibles, je laisse ceci dans mon fichier .htaccess. Soi-disant, certains navigateurs ne chargent pas les polices hébergées sur d'autres domaines, et ce morceau de code résout ce problème, mais c'est parfois le seul moyen de forcer le chargement des polices hébergées sur le même domaine. Généralement, c’est plus un problème avec Firefox que avec Chrome, mais je viens de l’utiliser pour forcer les polices dans Chrome alors que Firefox fonctionnait correctement. Allez comprendre.

<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Une autre chose inexplicablement étrange que j'ai eue avec la syntaxe @ font-face est que les fichiers de polices ne seraient pas chargés correctement avec des majuscules dans le nom. C’était un problème unique une fois, et après avoir heurté à maintes reprises ma tête contre le bureau, nous avons modifié en dernier recours tous les fichiers de polices et le nom de la famille de polices en caractères minuscules, et tout a bien fonctionné ( Je pense que c’était un problème dans IE, qui ne manque jamais de ruse, et je n’étais qu’un seul site Web; la syntaxe exacte sur un autre site Web fonctionnait parfaitement avec les majuscules et les minuscules). 

9
thelindsaybutler

Si vous placez vos fichiers de polices dans un dossier nommé "polices" et vos fichiers CSS dans le dossier "style", vous devez écrire l'URL comme ceci

@font-face {
 font-weight: bold;
 font-family: Dejaweb;
 src: url('../fonts/DejaWeb-Bold.ttf'); }

Je viens de corriger la même erreur comme celle-ci.

6
Lenville

Essaye ça

   src:url('DejaWeb-Bold.ttf') format('truetype'),

De plus, si les polices sont disponibles dans un autre format différent de l'endroit où vous les avez obtenues, je suggère d'écrire tous les navigateurs croisés de manière compatible, de la manière suivante

    @font-face {
     font-family: "Dejaweb";
     src: url("DejaWeb-Bol.eot") format('embedded-opentype'), /* EDIT correction on this line */
     url('DejaWeb-Bol.woff') format('woff'), /* Modern Browsers */
     url('DejaWeb-Bol.ttf') format('truetype'), /* Safari, Android, iOS */
     url('DejaWeb-Bol.svg#Dejaweb') format('svg'); /* Legacy iOS; correction on this line */
     font-weight:bold;
    font-style:normal;
  }
5
jmishra
@font-face {    
font-family: 'FONT-NAME';
src: url('RELATIVE-FONT-URL') format('FONT-FORMAT');
}

div {
    font-family: 'FONT-NAME';
    font-weight: normal;
    font-style: normal;
}

Ajouter les polices style et police avec une valeur normale a fonctionné pour moi.

0
Mayank Gupta