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

    http://www.alsacreations.com/astuce/...-site-web.html

    Des extensions utiles :
    http://extensions.joomla.org/search?q=font-face
    “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

    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:

      http://www.google.com/webfonts#ChoosePlace:select

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

      Merci

      Commentaire


      • #4
        Re : Intallation de Typographie

        Hello!

        Voici la réponse à ma question

        http://www.blog-nouvelles-technologi...otre-site-web/

        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)

          http://www.joomshaper.com/joomla/fre...elix-framework
          “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

          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
              Mon site de documentation sur Joomla et le CCK K2 : http://documentation.informaticien51.fr
              Une notice pour le CCK K2 ( mise à jour le 01/06/2015) :
              http://documentation.informaticien51...couverte-de-k2

              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
                  Mon site de documentation sur Joomla et le CCK K2 : http://documentation.informaticien51.fr
                  Une notice pour le CCK K2 ( mise à jour le 01/06/2015) :
                  http://documentation.informaticien51...couverte-de-k2

                  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:
                      http://police.planete-typographie.com/
                      http://www.dafont.com/fr/
                      http://creation-site-internet.pixali...e-ecriture.php

                      Attention, les polices peuvent être soumises à droit d'auteur, comme beaucoup de contenus sur internet.
                      Mon site de documentation sur Joomla et le CCK K2 : http://documentation.informaticien51.fr
                      Une notice pour le CCK K2 ( mise à jour le 01/06/2015) :
                      http://documentation.informaticien51...couverte-de-k2

                      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

                        http://hacks.mozilla.org/2009/10/woff/

                        Generateur de kits @font-face :
                        http://www.fontsquirrel.com/fontface
                        “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

                        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, 15h30
                          Mon site de documentation sur Joomla et le CCK K2 : http://documentation.informaticien51.fr
                          Une notice pour le CCK K2 ( mise à jour le 01/06/2015) :
                          http://documentation.informaticien51...couverte-de-k2

                          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
                              http://www.webdesignerdepot.com/2011...mplementation/

                              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
                              http://paulirish.com/2009/fighting-t...ut/#update2011

                              Une belle chose qui est arrivée sur le web avec @fontface :
                              @fontface kit
                              http://www.fontsquirrel.com/fontface

                              @fontface generator
                              http://www.fontsquirrel.com/fontface/generator

                              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 le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

                              Commentaire

                              Annonce

                              Réduire
                              1 sur 2 < >

                              C'est [Réglé] et on n'en parle plus ?

                              A quoi ça sert ?
                              La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                              Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                              Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                              Comment ajouter la mention [Réglé] à votre discussion ?
                              1 - Aller sur votre discussion et éditer votre premier message :


                              2 - Cliquer sur la liste déroulante Préfixe.

                              3 - Choisir le préfixe [Réglé].


                              4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                              2 sur 2 < >

                              Assistance au forum - Outil de publication d'infos de votre site

                              Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                              Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                              Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                              UTILISER À VOS PROPRES RISQUES :
                              L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                              Problèmes connus :
                              FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                              Installation :

                              1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                              Archive zip : https://github.com/AFUJ/FPA/zipball/master

                              2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                              3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                              4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                              5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                              6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                              et remplacer www. votresite .com par votre nom de domaine


                              Exemples:
                              Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/
                              Pour executer le script: http://www..com/fpa-fr.php

                              Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/cms/
                              Pour executer le script: http://www..com/cms/fpa-fr.php

                              En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                              Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                              Voir plus
                              Voir moins
                              Travaille ...
                              X