Version imprimable du sujet

Écrit par : claire04 28 Mar 2019, 10:11

Bonjour, j'ai bidouillé pour faire mon site dans Dreamweaver (oui je sais c'est de l'antiquité !) à partir d'un free template responsive. Depuis que je l'ai passé en https, tous les textes sont passés en gras. Lorsque j'ouvre mon fichier en interne dans Firefox, les font-weight sont comme je voulais, pas en gras.
Est-ce que le fait d'avoir rajouté le fichier .htaccess bouleverse la graisse de la police ? Car avant de mettre ce fichier htaccess, la graisse de mon site en ligne était normale.
Le problème vient-il d'ailleurs ? Du navigateur ?
J'ai cherché dans les CSS mais je suis pas assez calée pour trouver le problème.

Écrit par : scoch 30 Mar 2019, 19:00

Bonjour,

quelles fontes utilises-tu ? Des fontes au format webfont (woff2, woff) hébergées sur ton serveur distant ? Un service de webfonts (Typekit, Google Fonts, etc) ? Ces polices de caractères sont bien chargées et appliquées ?

Impossible de savoir si le .htaccess a une incidence sans en connaître le contenu.

Écrit par : claire04 7 Apr 2019, 10:58

Voici les fonts que j'ai utilisées et que j'ai mis dans un dossier Font : mfglabsiconset-webfont.eot, mfglabsiconset-webfont.svg, mfglabsiconset-webfont.ttf, mfglabsiconset-webfont.woff, Simple-Line-Icons.eot, Simple-Line-Icons.svg, Simple-Line-Icons.ttf, Simple-Line-Icons.woff
Oui elles sont hébergées chez l'hébergeur dans un dossier Font à la racine.
Dans le head j'ai mis : http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'
Qu'est ce qui fait que quand j'ouvre le fichier index en interne sur Firefox, la graisse des polices est normale ??
Voici le contenu du fichier .htaccess :
<IfModule mod_rewrite.c>
# Active l'exécution du moteur de réécriture
RewriteEngine On
# Vérifie la présence des www.
RewriteCond %{HTTP_HOST} !^www. [NC,OR]
# Vérifie le protocol https
RewriteCond %{HTTPS} off
RewriteCond %{HTTP:X-Proto} !https [NC]
# Redirige en https://www.
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [L,R=301]
</IfModule>
Le site c'est www.gite-ardechois.com
Merci pour vos solutions

Écrit par : baron 7 Apr 2019, 20:08

Le site, vu avec Firefox 48 (SnowLeopard), ne me semble pas être en gras…

Et voici ce qu'en dit FontFinder :


P.S. J'ai vérifié que c'était bien la version https dont il s'agissait.

As-tu bien vidé les caches de ton navigateur ? Essayé avec un autre ?

Écrit par : scoch 7 Apr 2019, 21:14

Le problème vient du fait que tu charges les Google Fonts Open Sans en http alors que ton site est en https. Firefox opère un « blocage de contenu mixte ». Pour afficher les messages d’erreurs : click droit > Examiner > Onglet console.
Une fois modifié le lien de chargement des fontes en https, Open Sans charge bien et le navigateur peut appliquer la graisse que tu souhaites.
En effet, tu as défini en CSS une famille de polices : "Open Sans", Arial, sans-serif. Open Sans ne pouvant être chargée c’est la suivante qui est essayée et puis la suivante encore si besoin. Or Arial et sans-serif ne disposent que de deux graisses : normal (400) et bold (700) tandis qu’Open Sans en a d’autres (de 300 à 800). Quand tu appliques une graisse de 300 au titre (h1) d’un article cela ne peut pas fonctionner avec une police qui ne dispose pas de cette graisse.
Je joins deux captures d’écran : chargement des fontes en http et en https.

Écrit par : claire04 10 Apr 2019, 12:10

Ok problème résolu, il manquait juste le s à http://fonts.googleapis.com/. Merci beaucoup

Écrit par : claire04 10 Apr 2019, 12:26

Autre petit problème, je n'arrive pas à la page Contact à mettre le picto téléphone en face du tél avec la police Simple-Line-Icons, j'ai réussi à changer l'icone pour le mail mais pas pour le téléphone. Je voudrais mettre l'icone qui s'appelle "icon-call-end" et lorsque je mets <i class="icon-call-end icon"></i> il ne se passe rien, le rond noir reste noir et ca me décale la ligne.
https://pagellapolitica.it/static/plugins/line-icons/

Écrit par : scoch 11 Apr 2019, 10:54

Il n'y a pas de classe icon-call-end dans la feuille de style des icônes (https://www.gite-ardechois.com/css/icons.css). Par contre, il y a icon-sli-call-end.