Partage
  • Partager sur Facebook
  • Partager sur Twitter

Google Font sur hébergement OVH pour page HTML

Faire fonctionner cet exemple

    23 mai 2024 à 12:42:22

    J'essaie d'utiliser un Google Font téléchargé. J'ai mis les fichiers sur le serveur de mon hébergement OVH.
    L'exemple donné ici fonctionne : https://developer.mozilla.org/fr/docs/Web/CSS/@font-face
    Mais quand j'essaie d'utiliser le fichier ttf sur le serveur cela ne marche pas.
    Voici le code que j'utilise pour tester :
    <!doctype html>
    <html lang="en-US">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Web Font Sample</title>
        <style media="screen, print">
            @font-face {
                font-family: "Bitstream Vera Serif Bold";
                src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
            }
            @font-face {
                font-family: "Montserrat";
                src: url("https://xxformat.com/xxmaillib/fonts/Montserrat/static/Montserrat-Black.ttf");
            }
    
            h1 {
                font-family: "Bitstream Vera Serif Bold";
            }
    
            p {
                font-family: "Montserrat";
            }
        </style>
      </head>
      <body>
        <h1>This is a test (Bitstream Vera Serif Bold)</h1>
        <p>This is a test (Montserrat Bold)</p>
        This is a test (Default)
      </body>
    </html>
    Avez-vous une suggestion ?
    • Partager sur Facebook
    • Partager sur Twitter
      23 mai 2024 à 13:00:40

      Bonjour,

      déjà, une Google Font téléchargée… eh bien c'est une font tout court, une police de caractères ;)

      Dans ton exemple tu as deux polices, les deux ne fonctionnent pas, ou seule celles sur xxformat.com ? J'ai essayé ton code dans codepen.io, et sur un site en local en cours chez moi, j'ai une erreur de missing CORS sur Montserrat-Black.tff. Il faudrait que tu voies la configuration de ton serveur.

      Note supplémentaire : je conseille plutôt le format WOFF2 que le TTF, c'est compressé, donc bien moins lourd, et c'est pris en compte partout maintenant. Pour transformer tes fichiers, tu peux utiliser le générateur de FontSquirrel.

      • Partager sur Facebook
      • Partager sur Twitter

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

        23 mai 2024 à 17:10:52

        Bonjour,

        Merci pour la réponse. C'est très utile.

        Seul celui d'xxformat ne fonctionne pas. Je suis sur OVH et je n'ai aucune idée comment changer la configuration du serveur. Je viens de trouver ces informations https://help.ovhcloud.com/csm/en-public-cloud-storage-pcs-cors. J'ai l'impression que le temps de comprendre les explications, je vais y passer une semaine. 

        Je n'ai pas vu d'option pour télécharger le format WOFF2. Par défaut, google font me fournit seulement les fichiers TTF. 

        Mise à jour :

        Au lieu de prendre un fichier du répertoire static, j'ai pris un fichier du répertoire principal. Je l'ai converti en woff2 comme proposé.

        J'ai créé un compte github.com et un répertoire où j'ai copié le fichier html avec un chemin d'accès actualisé et le fichier woff2.

        C'est bon sur Opera mais pas sur Firefox.

        Mise à jour 2 :

        Je suis repassée à du ttf et cela marche aussi Firefox.

        -
        Edité par sourire_979 23 mai 2024 à 19:35:06

        • Partager sur Facebook
        • Partager sur Twitter

        Google Font sur hébergement OVH pour page HTML

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur
        • Markdown