 Merci beaucoup, j'espère que vous m'entendez bien, j'ai pas l'habitude d'avoir un micro comme ça, généralement un croche au visage, ça fait très très bizarre. Et du coup effectivement, je viens de parler de performance et de web typographie, de mots qui en général ne vont pas forcément l'un avec l'autre, en tout cas ça accorde assez mal. Alors rapidement, du coup pour me présenter, je m'appelle Damien Singer, on vient très bien de le dire, je suis designer et intégrateur au développeur web, ça dépend des jours et ça dépend des gens, je suis passionné par la typographie et j'ai monté mon petit studio perso, Iwelo en parallèle de mon activité salarie et j'adore débattre, je peux être un gros troll, donc n'hésitez pas, j'aime bien et je suis passionné, taré, omnubilé, obsédé, tout ce que vous voulez par la typographie, par la typographie, par WordPress, par plein de choses, mais principalement par ça et c'est ce qui m'amène à vous en parler aujourd'hui. Du coup, pourquoi parler de typographie dans un Worldcamp ? Parce que même si la base, on a repressé du texte, souvent on oublie que la typographie est très, très, très impactante aujourd'hui dans nos projets web. C'est un truc qu'on laisse un peu de côté en général, on en parle au début du projet, il y a un designer qui va bosser sur une maquette et on ne va plus en parler jusqu'au jour en faire le fond de face et puis voilà on m'attend production, sauf que en fait c'est pas suffisant. Déjà parce que la typographie c'est pas qu'une histoire de designer, c'est quelque chose de complexe, de compliqué, qui faut aborder sur tous les angles. Depuis toujours la typographie ça a toujours été à la fois quelque chose de très créatif, on a des très très beaux ensembles de lettres, le travail typographique sur les journaux a par exemple été magnifique mais il a toujours été une contrainte technique, c'est à dire que pendant très longtemps quand on devait monter une maquette de journal, on montait des caractères les uns à côté des autres. Du coup au commencement était le plomb et le plomb ça pèse, ça pèse même très lourd et du coup on attend à l'avoir un peu oublié avec le numérique, sur nos ordinateurs aujourd'hui avec des fichiers de fond qui sont disponibles immédiatement, mais ça a un poids et ce poids on commence à s'en rappeler sur les devices mobiles, quand on commence à essayer de charger des sites, des sites de presse, des sites à fortes valeurs visuelles sur des appareils mobiles, que ce soit tablette, que ce soit même nos ordinateurs sur un réseau 3G, on commence à souvenir que mine de rien, les typographies ça pèse, alors toute seule ça pèse pas forcément grand chose, c'est le cas de source 100, qui est quand même un petit peu qu'on utilise énormément aujourd'hui dans nos projets web, qui pour une variante, genre régulare, qui est la plus longue des variantes, 150 kiloctés c'est pas grand chose, en fait dit comme ça, c'est à dire qu'une image souvent peut peser beaucoup beaucoup beaucoup plus lourd pour un truc qui va être utilisé sur l'ensemble des sites, donc 150 kiloctés pas forcément grand chose, sauf que sur un site vous n'avez pas une variante d'une fonte, en général vous avez une famille pas complète mais assez développée, donc avec par exemple du régulare pour l'appeler ce qu'on utilise de base, de l'italique, du bold et si tout va bien du bold italique, sauf que d'un coup on commence déjà à grandement augmenter le poids qu'on va mettre sur chaque page et vu qu'en général la perte typographique et l'optimisation c'est pas le mot qui revient le plus à la mode, on arrive à ça sur un site, 1,5 méga octés, pourquoi ? Parce que les personnes ont tout coché, parce qu'un jour il y aura peut-être du fine et puis un jour il y aura peut-être du hairstyle et puis un jour il y aura peut-être du très très gras puis du black et puis voilà et donc on arrive à 1500 kiloctés pour du source 100 et là on est que sur une fonte, en général vous allez avoir une fonte de titrage, une fonte de labeur et parfois des fonds pour les annotations et ces choses là donc en desktop avec nos magnifiques connexions ADSL ça passe sans aucun problème, ça passe crème par contre quand on est sur mobile c'est beaucoup plus compliqué et souvent ça casse pas forcément pour des questions de vitesse mais déjà pour des questions de ping on met beaucoup plus de temps à s'accrocher sur un réseau quand on est sur du mobile donc le temps de réponse des serveurs est beaucoup plus long, ajouter à cela une vitesse qui est quand même largement réduite, télécharger les 1,5 mega octets faut y aller et c'est un problème que beaucoup de sites de presse ont et donc l'exemple que j'allais prendre c'est le Guardian qui a fait une refonte magnifique contre CNN et quand même un site de presse extrêmement consulteur aux Etats-Unis quand on lance les deux navigations il y en a un qui va arriver tout de suite on va avoir accès à l'information très rapidement on va pouvoir avoir les titres les sous titres etc alors que sur CNN on a commencé par savoir que c'était Clinton contre Sanders puis après on a commencé à avoir des titres et c'est un peu au petit bonheur la chance c'est quel type va être cherché en premier qu'est ce que navigateur va choisir du coup on va avoir un rendu sur le Guardian qui va arriver en moins d'une seconde le rendu textuel pas un rendu définitif pas un rendu optimal mais le rendu textuel en moins d'une seconde sur de la 3g là on sera à plus de 4 secondes sur un bon réseau 3g pour CNN imaginez-vous maintenant dans le métro notamment à paris cette ville que j'adore tellement qui me fait tellement tellement enfin qui me rend tellement heureux à chaque fois que je sors de la gare de l'est imaginez-vous dans le métro avec votre connexion dans la station et puis d'un coup la connexion qui s'aménuise qui s'aménuise qui s'aménuise et qui disparaît et qui réapparaît à la station suivante et qui s'aménuise qui s'aménuise qui disparaît pour réapparaître les 4 secondes ça devient trois minutes vous attendez trois minutes pour les réunis de page web personnellement moi pas et ces deux logiques là les deux logiques qu'on a pu voir sur la vidéo c'est deux logiques fondamentalement différentes de chargement de texte de conception qui s'affrontent qui s'affrontent en permanence où il y a vraiment deux philosophies les designers en général n'aiment pas forcément celle qui est la plus intéressante au niveau de l'accès à l'information mais personne n'est d'accord même pas les navigateurs d'un côté vous allez avoir le le foite donc le flash of in the ball texte en in the ball texte c'est si anane tant qu'on n'a pas la fonte on n'affiche rien on affiche du blanc alors là je l'ai fait sur un réseau 3g et d'un peu plus mauvaise qualité donc quelque chose qu'on pourrait avoir typiquement dans le métro ou dans le rr encore au moins il y a du réseau au moins et là on est à 15 secondes là ici le la fenêtre blanche avec juste des sous titres dont on s'en fiche complètement c'est 15 secondes on arrive à un rendu où on commence à de l'information à 17,5 secondes là où dans les mêmes conditions sur le guardian on est à 5 secondes lecture de l'information à 2,5 secondes sur un réseau 3g de mauvaise qualité 5 secondes on a l'image qui commence à s'afficher c'est un monde entre les deux et donc ça c'est le foot c'est le principe de on va afficher une fonte on va afficher le texte même si ce n'est pas la police choisie initialement pour être la police optimale pour le site mais on va l'afficher l'idée c'est donc de privilégier un accès rapide efficace à l'information parce que ce qu'on vient chercher au-delà du design notamment sur le mobile c'est l'information quand vous allez sur le guardian la typographie du guardian est très importante c'est un élément de la marque mais au final sur mobile vous voulez dire ce qui s'est passé il y a deux minutes pas forcément revoir la magnifique typographie alors que j'adore la typographie du guardian et le souci il y a ça c'est que chaque navigateur fait ce qu'il veut et chaque navigateur respecte le W3C en fait la norme sur le chargement typographique est tellement vague qu'en fait tout ce que demande le W3C c'est que navigateur charge la typographie donc quand on a une norme pareil forcément on a différentes conceptions qui vont s'affronter d'un côté un Chrome qui va essayer de charger le plus rapidement possible et donc afficher quelque chose de très mauvaise qualité de l'autre côté Firefox qui lui a à faire le mauvais choix pour moi malheureusement même si j'adore mon sac Firefox de d'afficher du blanc jusqu'à ce que la typo soit chargée et il y a eu un espoir pendant très longtemps dans dans la perfo web et dans la perfo typographique c'est fond de display une propriété css qui a été proposé justement par google pour pouvoir choisir quand tu n'as navigateur qu'est ce qu'on veut est ce qu'on est sur un site avec une forte expérience en mode site pour une marque de luxe qui veut donc avoir sa typographie forcément qui est prête à attendre pour l'afficher parce que de toute façon quand on va voir le site d'une crème de luxe d'un parfum ou quoi que ce soit on est prêt à attendre trois minutes qu'on est un loader enfin trois minutes peut-être pas mais qu'on est un loader qui s'affiche ou qu'on est une page blanche parce qu'on veut l'expérience quand on doit accéder à de l'information c'est pas forcément la même situation et cet espoir malheureusement il est 20 parce que ça a été proposé par deux développeurs chez google un peu dans leur coin ils ont fait le formatage norme mais c'est pas suivi parce que aucun navigateur n'a envie de changer son chrome et son corps pour pouvoir justement réinventer le chargement typographique surtout laisser le choix du chargement typographique donc malheureusement désolé pour ce petit singe mais ça ne se fera pas donc qu'est ce qu'on peut faire aujourd'hui en chargement typographique comment optimiser comment éviter les 15 secondes de chargement sur de mobile voire sur des des stops suivant la manière dont on se connecte et donc face à ça en fait il ya une solution c'est réfléchir on a l'habitude de foncer tête baisser dans le code de commencer à faire nos intégrations mais nos blocs on va juste on va réfléchir comme dans la compte précédente à qu'est ce qui va être quoi comme type de contenu on va pas réfléchir à techniquement qu'est ce qu'on va afficher qu'est ce qu'on doit afficher ikea avec sa page produit avant toutes les informations sont importantes mais quand la page se charge pendant les quelques premières secondes est ce que tout est réellement important donc c'est la question à se poser et ça commence par réfléchir mais c'est pas tout c'est réfléchir et quelque chose n'a jamais pas laissé l'espace blanc en général comme ça sous meslène qui a forcément autre chose et c'est optimisé une fois qu'on a réfléchi une fois qu'on a fait sa hiérarchie d'information une fois ce qu'on sait qu'est ce qui est important et à quel moment on optimise et donc la réflexion ça commence tout à début du projet ça commence avec un vrai fonds de stack adapté les designers dans cette salle arrêter de faire des maquettes à typo unique ce n'est pas possible d'ailleurs qu'un développeur a besoin d'avoir un fonds de stack un développeur n'est pas graphiste n'est pas designer un développeur vous lui montrer on revient à faire plaît à play faire pardon à play faire et un optima il va pas voir la différence donc il va vous mettre une typo avec empatement qui est la typo choisi et un fallback sans empatement et ça va pas déranger parce qu'il verra pas forcément la différence parce qu'en fait il s'en fiche l'important c'est que ce soit plus léger donc choisissons un vrai fonds de stack discuter la discussion et impérative quand on propose sur une maquette cette version différente de cette variante de fonte il y a moyen d'être du le coré mais faut pas être du le coré battement en mode il y en a ça de cet eau non faut juste réfléchir par exemple on a refait d'anamant le site notamment le site de l'agence avec notamment un effort sur la performance mobile du coup ça c'est avant le chargement de la typo partique fin de la typo personnalisé ça c'est après alors moi je vois la différence elle me saute aux yeux et j'avoue que celle de gauche me fait très mal aux yeux mais en vrai sur mobile quand ça charge la première variante va très bien donc du coup l'idée de la discussion d'un fonds de stack c'est trouver ce qui fait qu'à part le bouton là où c'est vraiment flagrant on va trouver une police assez proche on va l'utiliser pour ne pas détériorer l'expérience utilisateur entre le moment on aura la première fonte le fallback et la fonte personnalisée donc sur mobile ça veut dire notamment sur mobile dix mille nombre de police mais intelligemment si vous avez une police de caractère pour du titrage et une police de caractère pour du labeur commencez pas par virer le titrage commencez par travailler sur le labeur donc sur le corps de texte sur les caractères utilisés dans le texte au plein milieu donc ce qu'on voyait avant parce que finalement les ce sera plus compliqué déjà de trouver une police de titres un fallback qui soit adapté et qui ressemble normalement c'est des police avec des marqueurs visuels beaucoup plus forts mais surtout les l'élément qui va approfondant qui va ancrer votre remarque visuellement ça va être les titres donc commencez peut-être par enlever de l'italique commencez peut-être par enlever du gras voire comment se comporte le faubold donc l'italique et l'eau enfin le faubold donc le gras créé par navigateur et l'italique créé par navigateur pour le fausse italique refusé tester fait le mot clé c'est tester enlever des fonds d'enfants face pour le mobile enlevez certains fonds certains déclarations et voyez ce que ça fait le reste pas catastrophique revient derrière mais pas forcément donc tester et priorisé même dans vos titres au final sur mobile sur des stops on veut quelque chose de parfait sur mobile on peut se poser la question de en ce qu'un titre normal et un sous-titre si on a des variantes différentes de graisse est ce qu'on peut pas sur mobile uniformisé quand on utilise de la lato sur mobile pour du corps de texte est ce qu'au final mettre un lv tk c'est très très grave alors c'est à définir projet par projet mais donc ça demande de prioriser quels seront les contenus à fort de valeur ajouté pour votre marque qui ne faut pas auquel il ne faut pas toucher graphiquement mais juste revenir là dessus ça signifie encore une fois une discussion permanente même dans les phases de développement entre les designers les développeurs donc avoir des développeurs d'un côté d'un bâtiment et des designers de l'autre côté d'un bâtiment c'est un petit peu compliqué désolé pour le pour les bruits avec le avec mon écharpe mais c'est très mal à la gorge du coup ça nécessite aussi de devenir actif on peut plus aujourd'hui à l'heure actuelle aller sur google fontes télécharger un fichier et le mettre sur un site web c'est plus adapté c'est à dire que soit vous aurez des fichiers qui pour les plus petites polices les manconnus sont pas forcément complets on est en france on aime beaucoup nos accents on se bat visiblement d'un allemand pour l'accent circonflexe donc il paraît qu'on les aime bien donc et prenez des typos qui légère et sur les très grosses typos on parlait sur ce sens sur ce sens ça veut dire que vous avez tous les caractères du monde entier la pire c'est droïde vous avez vraiment tous les caractères du monde entier donc prendre simplement un fichier sans travailler sur un subset incorrect donc sur une division des caractères qu'on va choisir quelle caractère on va choisir pour justement les affichiers à l'écran c'est important et pour ça on a des outils merveilleux et gratuits le premier c'est fontes curels alors j'ai pas toujours été d'accord avec fontes cura dans certains éléments de leur politique mais cet outil est merveilleux c'est le web font générator que vous allez trouver dans le menu de fontes cura et vous allez pouvoir mettre un mode expert là tout en haut en fait et vous allez pouvoir choisir plein de choses et il ya plein de prêts réglages qui sont prêts définis genre vous allez pouvoir choisir france et vous allez avoir les accents vous allez avoir les devises vous allez avoir tout ce qu'il faut pour écrire entièrement le français avec les accents circonflexes mais je rappelle l'accent circonflexe n'est pas supprimé du français vous avez le choix encore de l'utiliser mais vous allez pouvoir justement choisir plein de choses si vous avez un site multilingue aussi choisir d'autres langues savoir selon votre public si vous allez plutôt activer langues enfin les les caractères du russe ou pas vous avez activé des caractères grec ou pas etc etc l'autre nécessité pour devenir actif c'est de connaître les capacités de ces plateformes les fontes web safe sont pas les mêmes sur tout les plateformes sur android il ya trois polices de caractère installé vous allez avoir les deux verres de droïdes et du robotot ça limite un peu les web safe quand même dire que si vous mettez pas de si vous mettez alvética vous n'aurez jamais du alvética sur android vous aurez du robotot donc ça nécessite de connaître ces plateformes et pour ça il ya un outil c'est un tableau qui était fait par un taré de typographie qui s'appelle tini type le tableau dans le cas vous allez avoir donc plateforme par plateforme plateforme mobile les fontes qui existent dessus et vous allez pouvoir réfléchir par rapport à votre public est ce que vous allez si vous avez beaucoup d'aïe us privilégié une fonte que vous n'avez pas besoin de mettre de manière distante pour aïe us donc vous économise un temps de chargement et à la limite c'est android et minoritaire sur votre site vous pouvez leur mettre la web fontes personnalisées mais réfléchissez voyez sur nos vos analytics quels sont les plateformes qui consulteront plus votre site adaptés et ne faites surtout pas chargé des fontes personnalisées à des gens qui les ont déjà on peut dans un font face mettre un local un attribut local pour dire récupère celle qui est présente sur le système donc ce que navigateur ne fait pas forcément automatiquement donc pensez-y vérifier les plateformes et les capacités des plateformes et forcer les faubes actes typographiques chaque navigateur fait ce qu'il veut donc forcez le forcez le à justement aller afficher le fall back et après mettre la typo personnalisée je vais accélérer un peu c'est ce qu'a fait le guardian donc avec justement un script alors je vous ai pas mis le script mais globalement l'idée où il va regarder si on a navigateur moderne ou pas si on supporte ou pas des formats moderne et si oui il va charger de manière à synchrone et afficher la police si jamais c'est pas supporté tant pis on affichait un fall back c'est que la personne un navigateur vieux tant pis pour elle particulièrement les personnes restent sur eu 8 et c'est tant pis pour eux donc voilà et pareil une fois que le chargement est terminé si la personne n'avait pas déjà dans son dans son local storage la fonte à ce moment là la charge c'est le principe de la synchrone et si c'est la première visite vous avez le choix ou pas de l'afficher si c'est un site sur lequel on sait qu'on va revenir régulièrement la limite pour la première fois vous l'afficher pas vous restez en fall back et toutes les pages suivantes vous l'afficher il y a des bibliothèques pour faire ça de manière très simple une qui est fait par google et tape kit bien que j'ai horreur de google et tape kit et une par par bramstein donc c'est deux bibliothèques j'ai est ce que vous pouvez prendre l'état et les mettre sur votre site ça va rajouter des classes en fait ça fait ça ça rajoute dans vos scripts des classes comme ça vous pouvez définir pour vos pour vos fonds de face enfin pour vos fonds stack pardon elle vética machin billochouette pour du achat et quand c'est chargé vous rajoutez font le dit enfin vous faites une déclaration css avec font le dit voilà c'est assez simple à mettre en place vu qu'on a besoin de toucher au gs le gs s'en occupe pour nous et penser aux icônes on oublie ça très souvent mais les icônes aussi souvent c'est des fonds de face et donc ça se optimise il ya plein de moyens d'optimiser déjà les fall back et les ligatures alors au-delà des questions d'accessibilité j'ai créé un excellent article que je vous conseille de lire il y a ça au-delà des questions d'accessibilité il ya des méthodes qui permettent d'éviter d'avoir des caractères bizarres vous savez des caractères bizarres quand ça se charge pas se carré avec des lettres dedans ou des choses qui s'affichent de manière assez désiraceuse on peut l'éviter et par exemple icône ou d'un outil justement qui permet de faire ça quand on sélectionne ces icônes qu'on a importé en svg ou pas qu'on veut générer la fonte on peut activer tout en haut l'unicode enfin le code unicode choisi et la ligature donc on peut mettre par exemple que pour home on veut que dès qu'on écrive home avec la font face icône ça le remplace par l'icône et pareil pour l'octocat dès qu'on écrit octocat ça le rempassera par le symbole github et vous avez un petit système vous voyez le smiley qui est juste à droite où vous pouvez choisir un fallback maintenant tous les tous les systèmes d'exploitation ont des fallback qui existent donc des polices des polices d'icônes que vous pouvez utiliser chaque c'est une exploitation aura une forme différente mais ça veut dire que vous avez un moyen de pouvoir dire que si la fonte ne se charge pas vous choisissez ce qui ressemble à une enveloppe donc elle est juste là voilà vous cliquez sur l'enveloppe et donc chaque cette exploitation si la fonte n'existe pas l'affichera et donc je finis juste encore une minute j'arrive à la fin puis c'est parfait les ligatures sont sensibles à la casse donc si vous mettez github avec un g majuscule dans votre fonte comme ligature et que vous écrivez github en minuscule ça ne marchera pas et il faut compresser compresser vos fonte donc faite du waf waf 2 c'est pas si porté par edge mais si vous pouvez faire le mais sinon vous se suportez partout à partir de 19 plus et franchement tout ce qui est en dessous de dieu enfin de 19 donc il y a 8 et moins on s'en fiche il ya plus de personnes en situation de handicap sur internet que de personnes qui utilisent 8 et sinon ça bon je vais passer c'est le flash of vortex c'est l'idée de charger d'abord du régular de faire du fobald et après on a 5 rondes de charger du bold et google c'est mal tape kit c'est mal parce que vous ne pouvez pas jouer avec vos fichiers il faut que vous puissiez avoir vos fichiers sur votre serveur que vous puissiez jouer avec pour essayer les compresser que vous puissiez les modifier pour pouvoir avoir des choses adaptées donc acheter dans des petites fendries indépendantes et sinon prenez des fonds très utilisés mais ayez vos propres fichiers voilà merci de votre attention merci beaucoup merci d'amien vous avez des questions est ce qu'il y a des questions pour d'amien pas avoir peur je suis un troll mais en règle bonjour Cyril merci pour la clarté de la présentation est ce que je peux poser une question idiote il n'y a pas de question idiote alors c'est quoi une ligature c'est quoi un fonds stack il n'y a pas de soucis la ligature c'est c'est ce que vous voyez juste si je retrouve la slide là derrière c'est ça la ligature c'est quand on a deux caractères qui quand ils sont ensemble à la côté de l'autre ne forme plus qu'un dans les romans vous pouvez lire c'est par exemple fi qui très souvent la barre du f va se continuer dans le haut du i et donc c'est l'idée que ça en fait pour l'ordinateur ça ne devient qu'un seul caractère et donc ce qu'on peut faire c'est que vous voyez c'est une forme différente des 2f c'est pas un trait qui s'allonge une forme différente donc du coup le principe de ligature pour les icônes c'est quand on écrit github ben en fait on remplace github par un octocat voilà c'est ça l'idée de la ligature c'est de remplacer deux caractères ensemble ou trois ou quatre ou plus par un seul caractère affiché à l'écran que soit un icône ou un autre et le infonstack c'est c'est fonds de famille de point lvtk slash ariel slash sans serif etc donc c'est un css ce qu'on va déclarer pour dire si tu n'as pas lvtk sur ton ordinateur tu télécharges ariel et si tu n'as pas ariel tu télécharges un autre truc jusqu'à arriver à une polygénérique donc sans serif serif cursive ou monospace selon la situation ça répond à la question bonjour merci pour ta conférence très bien je voulais savoir par rapport à moi tu viens de dire ton article est-ce que est-ce que moi il y a un lien ou quelque chose tu peux nous partager ouais il est sur medium et je peux vous valer je le mettrai avec les slides si vous voulez d'accord merci c'est sur l'accessibilité vraiment des des fontes icônes justement d'accord merci allez faut marcher jusqu'au fond maintenant et en plus vraiment au fond du fond du fond là c'est je ne vois même pas la tête d'ici bonjour petite question pour les webkit fontes mousse anti-alazine ou non chaque navigateur fait ce qu'il veut c'est bien le problème et donc double oui plein de doublons quand on veut avoir justement des quand on veut avoir un affichage qui soit justement smooth sur webkit pc en globalement une catastrophe et un pause plein de doublons parce que webkit font son suite mais aussi texte rendering pour avoir un truc un peu plus amélioré plus encore fin tous en fait malheureusement pour l'instant donc plein de doublons merci et attends faut revenir devant dans ton css ouais dans ton très grand souci d'optimisation comment est-ce que tu décides ou est-ce que tu places le chargement de la fonte dans ton css est ce que tu pousses la précision jusqu'à se pliter ça en différents endroits ouais après moi je fais du less personnellement donc je de façon tout expliqué tout est modulaire j'ai pas un seul fichier laisse j'en ai 40 par projet parce que un poulet formulaire un pour machin etc et du coup la fonte je vais dans l'extrême qui est de faire que c'est pas c'est pas dans mon css c'est un fichier css à part et vu que le fait par chargement en synchrone en fait j'envoie ce fichier css de toute façon après le chargement donc mes fonds face les traites vraiment de manière totalement découpée par rapport au reste du css pour pouvoir les optimiser mais par exemple la fonte régulière utilisée à 90% et l'italique ou le bold utilisé à 10% tu les j'ai un fichier enfin j'ai je fais tous mes fonds face à la suite de toute façon en fait les fonds face vous pouvez les passer n'importe où en css la fonte ne va pas être chargé au moment où le css va être lui elle va être chargée à la première utilisation du caractère donc si au fait un fonds face avec une variante ultra bold sur votre site si à aucun moment un caractère ultra bold est demandé il n'y a pas de fonds chargé alors sur les vieux navigateurs oui mais sur tous les navigateurs modernes e9 plus il n'y a pas de il y a si il n'y a pas de caractère qui appelle la fonte la fonte n'est jamais chargé donc dans ce sens qu'on veut vraiment le mettre on va comme les médias curieux tu as répondu à la question bonjour merci pour la conf c'est pas vraiment une question il paraît que t'aimes bien les trolls donc je passe un peu la question tu dis que tu es tu adore la typo mais tu as parlé de faux bold et de faux italique généré par les navigateurs donc je pense que tu privilégié plutôt en parler de performance donc tu dois privilégié plutôt la performance mais qu'est-ce que tu penses de ça du coup oui donc pour ceux qui savent pas les navigateurs peuvent générer des faux bold et des faux italiques qui peuvent graisser en fait le régular merci pour ce pour ce troll qui est un peu du tout mon débat préféré en fait de typographie j'avais une sade avec marquement réfléchir en fait c'est là qu'il faut réfléchir dire que la réponse à ça c'est oui j'adore un petit peu graphie ça me fait mal aux yeux quand certaines fontes sont très mal affichés par du faux bold mais celle-là où faut réfléchir j'ai sur des stops perso avec une connaissance d'ASL tu fous toutes les fontes quand tu les envoies mais sur mobile perso je préfère que la personne saigne des yeux plutôt qu'elle est pas accès à l'information voilà après c'est c'est pas un débat tranché c'est pour ça que le mot réfléchir est très important il n'y a pas de méthode bête et méchant à appliquer ces projets par projet il faut réfléchir et ton bold ça va dépendre ta fonte je j'ai une amie à moi qui est donc designer qui a son site à une faux bold même sur des stops parce que sur faux bold même sur windows elle s'est allée plus jolie que la vraie bold de la fonte donc tester en fait le seul moyen c'est de tester faite du faux bold tester sur un window sur tester sur un firefox windows le pire rendu typographique typographique possible firefox pc tester dessus s'il faux bold de passe ça passera partout voilà mais oui c'est c'est il n'y a pas de réponse à ce débat là je voulais savoir si le changement de fontes pouvait avoir un impact sur le référencement du site alors oui non un changement de fontes non mais il y a un truc que google et bien que ça s'appelle le speed index qui réfléchit donc à quelle vitesse on a accès à l'information et pas sur le changement hanté de la page mais sur ce concept absurde de la ligne de flotaison sur qu'est ce qui va s'afficher directement à l'écran et du coup oui travailler sa performance et s'assurer qu'on est un fallback qui s'affiche de début ça améliore le speed index juste là dessus avec en forçant un fallback sans travailler méfiché ni rien on peut faire passer des speed index de 1500 à 400 juste parce qu'on a un fallback dès le début qui s'affiche donc oui ça peut avoir un impact sur le référencement oui excuse moi tu tu sépare vachement la l'optimisation mobile du desktop mais tu ne trouve pas qu'il ya aussi une problématique dans la dsl des petites connexions par exemple un méga débit est ce que finalement c'est pas moins bien qu'une connexion 3g ça dépend de ton taux de pigue en fait le problème de ça c'est que je suis d'accord sur le fait qu'il y a des vrais problématiques de vitesse mais en typo enfin vu le poids des des des fichiers typographique le soucis c'est pas la vitesse à laquelle tu vas télécharger c'est ton taux de ping alors oui si tu es dans la creuse avec une connexion satellite urbain tu désactives les fonds ton navigateur tout court pour avoir que des fallbacks systématiques mais mais oui je suis d'accord après c'est là où ça rejoint la logique du java script ou considère qu'il faut pas travailler sur un mobile et des sapes en tant que tel c'est plus simple de l'expliquer comme ça mais c'est bossé en termes de débit et de fonctionnalité d'affichage et de qu'est ce que tu veux ou pas mettre en avant voilà et dernier truc c'est dans ta déclaration de fonds face tu tu charges du waf mais est ce que tu prévois aussi maintenant encore des formes alternatives encore une fois je considère que waf c'est 9 plus 100 encore une fois les gens qui sont sur il y a 8 encore une fois je me soucerai je me soucierai de 8 le jour où on soucera des aveugles des déficients cognitifs et des déficients moteurs sur internet et c'est pas de main la veille donc donc non waf partout après si je veux vraiment suroptimiser c'est waf eot et waf 2 eot parce que c'est supporté par internet explorer et que c'est beaucoup plus compressé que waf je sais pas pourquoi on a pris waf parce que ot était vraiment meilleur mais waf 2 est super compétitif et c'est le meilleur le meilleur algorithme de compression de typo qui soit le problème c'est que il y a et edge ne supporte pas waf 2 donc tu veux vraiment suroptimiser waf 2 puis eot puis waf et si tu veux pas te poser de questions waf partout parce que y'en a plus et que tout le monde le gère et que ça évite de faire des déclarations en rallonge et de maintenir 40 fichiers bon appétit et merci d'être