Intallation de Typographie

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Intallation de Typographie

    Bonjour,

    J'aimerai utiliser une typographie un peu exotique. Ma question est:

    Est-il possible d'installer une typo sur le serveur web afin d'éviter toute modification, dans le cas ou, l'internaute n'aurai pas cette typo?

    Merci d'avance

  • #2
    Re : Intallation de Typographie

    Salut,
    avec la technique @font-face tu devrais pouvoir t'en sortir :
    un article d'alsacreations (un peu confus, tu devrais pouvoir en trouver d'autres) :

    Comment utiliser une fonte «non-standard» sur un site Web ? - Alsacreations



    Des extensions utiles :
    Find extensions for your Joomla site in the Joomla Extensions Directory, the official directory for Joomla components, modules and plugins.
    Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

    Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

    Commentaire


    • #3
      Re : Intallation de Typographie

      Bonjour,

      Merci, j'ai lu l'article d'alsacreation, il est intéressant mais m'a un peu embrouillé...néanmoins grâce à cet article je suis tombé sur cette astuce:

      Making the web more beautiful, fast, and open through great typography


      Est-ce une meilleure solution?? Est-elle fiable?

      Merci

      Commentaire


      • #4
        Re : Intallation de Typographie

        Hello!

        Voici la réponse à ma question

        N’avez-vous jamais souhaité essayer d’utiliser les polices (fonts, en anglais) utilisées par Google dans leurs services pour vos propres projets ? Maintenant vous le pouvez. Rendez-vous sur Google Web Fonts et choisissez à partir de 206 familles de polices (et même plus)… Utilisation de Google Web Fonts L’interface répertorie toutes les polices disponibles que l’on […]

        Commentaire


        • #5
          Re : Intallation de Typographie

          Perso, je ne m'appuie pas sur les google webfonts, bien que trouve que c'est une idée intéressante, des tas de gestionnaires de sites l'utilisent avec bonheur et qq templates Joomla proposent cette fonctionnalité.
          Si tu veux tester @font-face, en passant ou non par GoogleWebfonts, le template gratuit Shaper Helix te le permet, avec une relative efficacité :
          Shaper Helix - Joomla Templates Framework (il faut charger le plugin qui va avec)

          Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

          Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

          Commentaire


          • #6
            Re : Intallation de Typographie

            Bonjour,

            Je vais tester tous ça

            Merci pour l'info.

            Commentaire


            • #7
              Re : Intallation de Typographie

              quel est le template associé? sur beez20, tu as un dossier ou poser tes fichiers de fontes (ttf et eof), et apres tu les appelles via font-face dans ta feuille de style

              Commentaire


              • #8
                Re : Intallation de Typographie

                Bonsoir,

                Enfaite, j'ai créer mon propre template joomla donc je n'ai pas ce dossier...et c'est bien dommage.

                Serai-tu comment le créer?? ça serai vraiment la meilleure des solutions!

                Merci !

                Commentaire


                • #9
                  Re : Intallation de Typographie

                  tu le crées toi meme dans le dossier de ton template, tu place les fontes dedans.

                  Voila la declaration de beez20 sert toi en comme exemple:

                  @font-face {
                  font-family: 'Titillium Maps';
                  src: url("../fonts/TitilliumMaps29L002.eot");
                  src: local('Titillium Maps'), local('TitilliumMaps'),
                  url("../fonts/TitilliumMaps29L002.otf") format("opentype"),
                  url("../fonts/TitilliumMaps29L002.woff") format("woff");
                  }

                  Elle couvres les differents type de fichiers possibles (specifiques a ie(fichiers eot), et pour les autres navigateurs).
                  Tu en crées une par fonte que tu souhaites utiliser.

                  Et au niveau de tes balises tu utilise font-familly.
                  Pour appliquer la police tillium Map sur les paragraphes:
                  p {
                  font-family: Titillium Map, Helvetica, Arial, sans-serif;
                  }
                  Si tu as une autre police pour tes titres de modules, alors tu l appelles comme ca:
                  h3 { Ma famille de police, et ensuite polices par defaut}

                  Et comme ca tu peut typer chaque element.
                  Et si le visiteur n as pas la police sur son pc, alors elle seras automatiquement téléchargée

                  Commentaire


                  • #10
                    Re : Intallation de Typographie

                    Bonsoir et merci pour ta réponse.

                    Jai bien compris le principe mais que signifie: src: url("../fonts/TitilliumMaps29L002.eot");
                    src: local('Titillium Maps'), local('TitilliumMaps'),
                    url("../fonts/TitilliumMaps29L002.otf") format("opentype"),
                    url("../fonts/TitilliumMaps29L002.woff") format("woff"); ???

                    Pourquoi faut-il plusieurs url pour une seule police??

                    Merci.

                    Commentaire


                    • #11
                      Re : Intallation de Typographie

                      Tout simplement car les navigateurs ne gerent pas tous les meme fichiers de fonte. Un fichier de fontes compatible internet explorer ne seras pas forcement reconnu par firefox et vice versa.

                      Si la fonte que tu indique n existe pas et n est pas presente a l'endroit indiqué (src(....)), alors ce seras la suivante dans font-family qui seras appellée.

                      les fichers eot sont des fichiers microsoft http://en.wikipedia.org/wiki/Embedded_OpenType , otf sont des polices ayant les spécifités open source http://en.wikipedia.org/wiki/OpenType et wotf http://en.wikipedia.org/wiki/WOFF sont des fichiers otf comprèssés

                      src: local('Titillium Maps'), local('TitilliumMaps')
                      Cette ligne définit la famille de fontes. local indique qu elle est presente quelquepart sur ton site.et titiluim maps est la nom de la famille (qui est utilisé dans font-family).

                      src signifie source, et le chemin associé est le chemin relatif qui pointes vers ton fichier de fonte.

                      C est exactement le même principe que pour les images.

                      Si le sujet t interresse:




                      Attention, les polices peuvent être soumises à droit d'auteur, comme beaucoup de contenus sur internet.

                      Commentaire


                      • #12
                        Re : Intallation de Typographie

                        Salut,
                        Pourquoi faut-il plusieurs url pour une seule police??
                        ta question montre que tu n'as pas galéré avec les installations de polices mac/pc au temps où on avait encore besoin de convertisseurs. LOL.

                        Ce n'est pas une question de police mais de formats :
                        • Internet Explorer: EOT
                        • Mozilla/Gecko: OTF and TTF
                        • Safari, Opera: OTF, TTF and SVG
                        • Google Chrome: TTF and SVG
                        +iPhones : SVG

                        TTF (TrueType Font)
                        OTF (OpenType Font)
                        SVG (Scalable Vector Graphics)
                        WOFF (Web Open Font Format)
                        -->article sur WOFF :
                        Web Open Font Format for Firefox 3.6
                        Mozilla Hacks – the Web developer blog

                        This article was written by John Daggett. John is a Mozilla contributor and has been working hard with font creators and web developers to improve the state of fonts on ...


                        Generateur de kits @font-face :
                        Font Squirrel scours the internet in search of FREE, highest-quality, designer-friendly, commercial-use fonts and presents them for easy downloading. We don't have the most, but we do have the best.
                        Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                        Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                        Commentaire


                        • #13
                          Re : Intallation de Typographie

                          Merci pour les precision, avec ton post, on as fait le tour du sujet.

                          Tu sait, ceux que je vois ici n ont pas connu la prehistoire (et quelle histoire d ailleurs de bons moments... de l'informatique, comme toi ou moi....
                          Dernière édition par lefabdu51 à 31/10/2011, 16h30

                          Commentaire


                          • #14
                            Re : Intallation de Typographie

                            Bonsoir tous le monde,

                            Effectivement je n'ai pas connu cette époque...

                            Mille merci pour cette réponse clair et précise! je suis sûr que ce post en aidera bien d'autre comme moi...

                            Bonne soirée!

                            Commentaire


                            • #15
                              Re : Intallation de Typographie

                              Salut,
                              je reviens sur ce post pour apporter quelques précisions :
                              inspirées par cet article -->

                              Options for @font-face implementation | Webdesigner Depot
                              There are hundreds of free fonts available for embedding, as well as plenty of paid services that allow you to include commercial fonts in your designs.\n\nA lot of designers, it seems, are intimidated by the idea of @font-face embedding though. On the rare occasion they do step out of…


                              En reprenant le modèle dans beez_20, les fichiers nature.css et personal.css :

                              @font-face {
                              font-family: 'Titillium Maps';
                              src: url("../fonts/TitilliumMaps29L002.eot");
                              src: local('Titillium Maps'), local('TitilliumMaps'),
                              url("../fonts/TitilliumMaps29L002.otf") format("opentype"),
                              url("../fonts/TitilliumMaps29L002.woff") format("woff");
                              }
                              *
                              src: local('Titillium Maps'), local('TitilliumMaps'),
                              Cette ligne de code correspond à l'appel de fonts situées localement, dans l'ordi client. Pour éviter le chargement de fonts du même nom mais légèrement différentes (piratées, par ex.), Webdesignerdepot recommande plutôt :
                              src: local("#"),
                              ce qui permet de mieux controler ce qui charge.
                              On trouve aussi cette proposition :
                              src: local('☺')
                              * On constate l'absence de :
                              url("fonts/lafontetypographique.svg") format ("svg");
                              Le format .svg est indispensable pour l'iPhone et l'iPad (et implémente les fontes pour Safari 3.1+, Opera 9+, Chrome 0.3+)

                              * le format .eot est indispensable pour les versions de IE inférieures à 9

                              * Les fontes TrueType (.ttf) sont compatible avec tous les navigateur y compris Chrome.
                              Le format .otf n'est pas indispensable car pas compatible avec Chrome.

                              * On peut rajouter ces précisions :
                              @font-face {
                              font-family: 'Titillium Maps';
                              src: url("../fonts/TitilliumMaps29L002.eot");
                              src: local('Titillium Maps'), local('TitilliumMaps'),
                              url("../fonts/TitilliumMaps29L002.otf") format("opentype"),
                              url("../fonts/TitilliumMaps29L002.woff") format("woff");
                              ////
                              font-weight:normal;
                              font-style:normal;
                              font-variant:normal;
                              }

                              Une dernière chose, l'effet FOUT = Flash Of Unstyled Text
                              qui désigne le petit temps de latence où l'on voit apparaitre brièvement le texte non stylé.
                              Lors de tests, si vous constatez cet effet, vous pouvez toujours mettre en place un petit script JS :
                              --> http://www.extensis.com/en/WebINK/fout-b-gone/
                              Autre référence FOUT :
                              Fighting the @font-face FOUT « Paul Irish


                              Une belle chose qui est arrivée sur le web avec @fontface :
                              @fontface kit
                              Font Squirrel scours the internet in search of FREE, highest-quality, designer-friendly, commercial-use fonts and presents them for easy downloading. We don't have the most, but we do have the best.


                              @fontface generator
                              Font Squirrel scours the internet in search of FREE, highest-quality, designer-friendly, commercial-use fonts and presents them for easy downloading. We don't have the most, but we do have the best.


                              Mes fonts favorites :
                              Garamond pour la catégorie Serif
                              Avant-Garde ou Univers pour Sans-serif

                              Hope it helps.
                              Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                              Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X