Problème d'accents avec police importées

La police s'applique correctement SAUF pour les accents

Sujet résolu

12 décembre 2019 à 7:24:34

Bonjour à tous,

comme le dit le titre ma police s'applique correctement sauf pour les accents, cette erreur apparaît sur Chrome (PC) et IE.

ci-dessous un exemple screenshot :

Pour la 1ère ligne j'utilise é,è,à etc
Pour la 2nde ligne j'utilise &eacute, &egrave, &acirc etc

En revanche je remarque que les accents sont correctement pris en charge sur Chrome (android) et Edge, ci-dessous un screenhot :

Infos importantes :

Voici les 1ères vérifications que j'ai pu faire grâce aux autres forums sur le même sujet

J'ai bien coché "français" dans les subsets avant de télécharger mes fichiers eot, woff, ttf et svg
La langue est bien spécifiée en français dans mon html:
```
<html lang="fr" dir="ltr">
```

J'utilise bien un codage utf-8 dans mon html :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Cette police (Myanmar Sangam MN) prend en charge les accents (ils apparaissent dans le fichier ttf et sur certains navigateurs)
En inspectant les sources j'ai l'impression que les navigateurs qui ont des problèmes d'accents ne chargent pas la totalité des fichiers fonts.
J'ai vidé mon cache pour Chrome
Le problème apparaît sur d'autres PC que le mien

Merci d'avance à ceux qui prendront la peine de m'aider

et bon courage à ceux qui viennent ici chercher une solution au même problème que moi

Mon code :

Pour ceux qui verront ce message prochainement vous pouvez consulter et inspecter un exemple sur cette page.

Pour les autres voici un copié-collé de mes fichiers html et css :

fichier HTML

<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="index.css" rel="stylesheet" type="text/css">
  <title>Landing Page</title>
</head>
<body>

  <div id="main">
    <div class="title">D&eacuteguis&eacute po&egraveme d&eacuteg&acirct o&ugrave gn&ocircle
    </div>
    <div class="title">Déguisé poème dégât où gnôle
    </div>
  </div>
  <!-- close main -->
</div>

</body>
</html>

fichier CSS :

@font-face {
      font-family: 'myanmar_sangam_mnregular';
      src: url('myanmarsangammn-01-webfont.eot');
      src: url('myanmarsangammn-01-webfont.eot?#iefix') format('embedded-opentype'),
           url('myanmarsangammn-01-webfont.woff') format('woff'),
           url('myanmarsangammn-01-webfont.ttf') format('truetype'),
           url('myanmarsangammn-01-webfont.svg#myanmar_sangam_mnregular') format('svg');
      font-weight: normal;
      font-style: normal;
}

.title{
  font-family: myanmar_sangam_mnregular;
}

-
Edité par MehdiAOURA 12 décembre 2019 à 7:28:40

Mewen_bzh

12 décembre 2019 à 9:22:17

Salut,

Pour commencer, pourquoi utiliser la balise :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

En HTML5, la balise correcte est :

<meta charset="utf-8">

La balise que tu utilises date du HTML 4 et XHTML 1.x. Elle peut encore s'avérer utile dans certains cas, notamment quand le serveur web est mal configuré et n'envoie pas les bonnes informations sur l'encodage des caractères. Est-ce ton cas ?

Je ne réponds pas aux messages privés.

MehdiAOURA

12 décembre 2019 à 23:55:23

Salut Mewen_bzh,

initialement j'avais la bonne balise puis en fouillant les forums j'ai rencontré le cas de quelqu'un qui a résolu un problème similaire de cette façon. En désespoir de cause j'ai tenté ma chance sans succès. Ensuite j'ai tout simplement oublié de remettre la bonne balise.

Je vais corriger ça de suite sur mon serveur.

Merci pour ce 1er élément.

Ivaalo

13 décembre 2019 à 9:39:39

Hello !

Je viens de vérifier le TTF, et cette police ne gère pas les accents. Du coup, la police par défaut est appliquée pour les accents.

Le secret du SEO. Merci !

MehdiAOURA

13 décembre 2019 à 19:25:25

Bonjour Ivaalo,

Je te confirme que si l'on scrute les sources de Chrome (PC) et que l'on regarde le TTF on voit un fichier qui ne gère pas les accents. C'est pour cela que je dis dans mon poste initial "En inspectant les sources j'ai l'impression que les navigateurs qui ont des problèmes d'accents ne chargent pas la totalité des fichiers fonts." (j'admet que j'aurais pu être plus clair).

Cependant mon fichier TTF prend bien en compte les accents puisqu'ils apparaissent correctement sur Edge et sur Chrome (android). De plus si j'ouvre directement mon fichier TTF original je vois bien les caractères avec accents, screenshot ci-dessous :

Lamecarlate

13 décembre 2019 à 20:49:52

Bonjour,

les accents ne sont pas (correctement) pris en compte dans cette police. Regarde dans ta dernière capture : les "ë", "œ" et "é" sont clairement plus gros et gras que le reste.

-
Edité par Lamecarlate 13 décembre 2019 à 20:50:06

Pas d'aide concernant le code par MP, le forum est là pour ça :)

MehdiAOURA

13 décembre 2019 à 21:40:52

Bonjour Lamecarlate,

J'avais remarqué que ces caractères étaient clairement plus gros et gras mais je pensais qu'il s'agissait simplement d'une excentricité de designer. Je n'avais pas compris que cela signifiait qu'il n'était pas pris en compte. Maintenant que tu me l'as fait remarqué, je remarque en zoomant sur les caractères utilisés par Edge et Chrome PC, qu'ils sont différents les uns-des-autres.

Je pensais que ces navigateurs fonctionnaient correctement mais en réalité c'est juste la chance qui a fait que leur police par défaut respective passait inaperçue au milieu des autres caractères.

Je vais chercher une police alternative qui se mariera bien avec la mienne.

Merci beaucoup à vous 3 pour votre aide.

(Et désolé Ivaalo si je n'ai pas compris du 1er coup que tu avais raison ^_^)