28172 sujets

CSS et mise en forme, CSS3

[résolu]Utiliser la police ubuntu

Bonjour,

J'aimerais utiliser la police ubuntu pour mon site web.

C'est possible grâce à l'api google. J'ai donc rajouté ce code dans mon fichier html :
  <link href='http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold' rel='stylesheet' type='text/css'/>


Ça marche sans problème avec chrome (avec toutes les tailles de polices) mais avec firefox c'est la police générique "sans-serif" qui est privilégiée avec certaines tailles.

Voici un exemple concret du site web de quelqu'un qui a utilisé la même procédure que moi (polices ubuntu par l'api de google) et qui a le même problème. Si vous vous rendez sur son site avec firefox, vous aurez sans doute la police "sans-serif" pour le texte, si vous augmentez la taille (ctrl+), vous allez passer un moment à la police ubuntu qui est beaucoup plus épaisse. Observez le caractère "a" par exemple qui est différent selon la police. Si vous visitez le même site avec chrome/chromium, la police ubuntu est tout le temps présente quelque soit la taille.

Comment faire pour que firefox se comporte comme chrome et afficher la police ubuntu tout le temps ?
Modifié par ppr (25 Sep 2013 - 11:05)
Salut,
C'est curieux chez moi sous firefox quelques soient la taille de la font elle fonctionne sous ubuntu.
Ca ne serait pas ton ordi qui est capricieux ?

Tu peux montrer comment tu as intégré ce bout de code (même si je pense que le pb ne vient pas de là mais bon..)
C'est peut-être un problème avec ma version de firefox (iceweasel 24) sous debian.

Voici comment j'ai integré le bout de code :

    <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>titre</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" /><link href='http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold' rel='stylesheet' type='text/css'/>
    <link rel="icon" type="image/jpg" href="img/favicon.png" />
  </head>....


Pour bien montrer le problème, j'ai fait des captures d'écran :

La première image montre une phrase avec la taille de police par défaut (quand on visite le site). La deuxième montre la même phrase après avoir agrandi la police une fois (ctrl+ une seule fois). On voit bien (dites moi si je rêve) que la police a changé (en particulier le caractère "a").

upload/49993-taille1.png
upload/49993-taille2.png

J'ai créé un rapport de bug pour firefox. À noter que j'ai le même problème lorsque je n'utilise pas l'api google pour la police mais que je la mets (fichier .ttf) sur le serveur et l'insère directement (comme je le décris dans le bug).

Mais bon, il s'agit d'un problème mineur et je ne pense pas avoir de réponse/fix des développeurs mozilla rapidement.
Modifié par ppr (24 Sep 2013 - 00:44)
Pour moi, c'est la même police sur ta capture Smiley langue
Mais oui en effet elle perd son gras en la réduisant.

Une sans-serif ressemble pas du tout à ça
Le problème, c'est que son chromium (ou chrome ou midori ou un autre navigateur que firefox) la police est épaisse quelque soit ça taille :

sous chromium (pour les mêmes tailles)

upload/49993-1.png
upload/49993-2.png

Et dans mon précédent post, si on regarde attentivement les "a", "e" on voit que les caractères sont légèrement différents. Donc soit le travail a été vraiment mal fait, soit la police est différente.
Modifié par ppr (24 Sep 2013 - 21:31)
Je viens de faire le test avec un autre ordinateur et firefox (même version) et je n'ai pas le problème.

Donc on dirai qu'il s'agit d'un bug d'une certaine version de firefox dans des conditions spécifiques. Bref, je le considère comme réglé (car il n'y a rien à faire à part poster le rapport de bug comme je l'ai fait).
Sujet clos
Aller à