Re : Intallation de Typographie
ta remarque sur le fichier svg est bonne, mais tu as oublié que beez20 est un template voulu pour etre simple, et n est pas orienté vers les mobiles.
Il faudrais voir pour signaler ca et demander à ce qu il l'integre directement .
C est une petite modif toute simple.
Personnelemnt je n ais jamais compris microsoft...windows utilise des fontes ttf depuis longtemps mais pas ie, sauf depuis I9.
J était pas au courant qu ils avaient évoluer à ce niveau.
Intallation de Typographie
Réduire
X
-
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'),
src: local("#"),
On trouve aussi cette proposition :
src: local('☺')
url("fonts/lafontetypographique.svg") format ("svg");
* 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.
Laisser un commentaire:
-
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!
Laisser un commentaire:
-
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
Laisser un commentaire:
-
Re : Intallation de Typographie
Salut,
Pourquoi faut-il plusieurs url pour une seule police??
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 :
Laisser un commentaire:
-
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.
Laisser un commentaire:
-
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.
Laisser un commentaire:
-
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
Laisser un commentaire:
-
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 !
Laisser un commentaire:
-
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
Laisser un commentaire:
-
Re : Intallation de Typographie
Bonjour,
Je vais tester tous ça
Merci pour l'info.
Laisser un commentaire:
-
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)
Laisser un commentaire:
-
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 […]
Laisser un commentaire:
-
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:
Est-ce une meilleure solution?? Est-elle fiable?
Merci
Laisser un commentaire:
-
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 :
Laisser un commentaire:
Annonce
Réduire
Aucune annonce pour le moment.
Laisser un commentaire: