[RÉGLÉ] Intallation de Typographie

[Kadesing]

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

[ghazal]

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/lire/630-fonte-personnalisee-site-web.html

Des extensions utiles :

http://extensions.joomla.org/search?q=font-face

[Kadesing]

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

[Kadesing]

Re : Intallation de Typographie

Hello!

Voici la réponse à ma question

http://www.blog-nouvelles-technologies.fr/archives/5223/utiliser-google-web-fonts-sur-votre-ordinateur-ou-votre-site-web/

[ghazal]

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/free-templates/helix-framework

[Kadesing]

Re : Intallation de Typographie

Bonjour,

Je vais tester tous ça

Merci pour l'info.

[lefabdu51]

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

[Kadesing]

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 !

[lefabdu51]

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

[Kadesing]

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.

[lefabdu51]

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.pixalione.com/creation-site-internet,creation/perception-site-internet,police-ecriture.php

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

[ghazal]

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

[lefabdu51]

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....

[Kadesing]

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!

[ghazal]

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/11/options-for-font-face-implementation/

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-the-font-face-fout/#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.