Bonjour à tous!

J'ai été intéressé par la possibilité de faire télécharger une police au navigateur pour l'employer sur mon site, dans le tutoriel de Mathieu Nebra que j'ai lu on nous dis qu'on peut "télécharger un pack près à l'emploi pour CSS3" en cliquant sur "@font-face Kit" hors, je ne trouve pas ce bouton, quelqu'un pourrais me renseigner sur comment télécharger lesdits packs près à l'emploi ?

Merci à tous ceux qui ceux qui m’aideront.

Excusez moi, j'oubliais de préciser que je parle ici du site fontsquirrel.com , d'où on devrait pouvoir télécharger un pack près à l'emploi pour CSS3...

Merci d'avance.

Salut,

Rends-toi sur cette page, et uploade simplement le ou les fichiers de typographie que tu souhaites utiliser.

je crois que ça me demande de donner une police et pas de la télécharger...

Tu peut me décrire comment procéder...

Tu peux télécharger une police sur le même site ; il te suffit ensuite de donner ladite police à cet outil :)

@warpShadow : Je crois qu'il veut simplement télécharger une police depuis le site, pas générer un kit à partir de la sienne

@Baptiste02 : Lorsque tu cliques sur une police (sur l'image d'exemple), tu vas tomber sur la page détaillée de cette police. Dans le bandeau violet sous le nom de la police, clique sur "webfont kit". Tu trouveras normalement dans cet section un bouton bleu "Download @font-face Kit".

Si ce bouton n'est pas disponible, alors tu devras télécharger le fichier à ta disposition via le gros bouton bleu un peu plus haut, décompresser l'archive et l'envoyer grâce au lien que t'a donné warpShadow,pour pouvoir télécharger ton kit.

Attention cependant à toujours respecter les règles de licence propres à chaque police!

Merci de votre aide...

N'ayant pas réussi a obtenir de résultat j’avais laissé le sujet de côté...

Mais j'ai enfin compris pourquoi ça ne marchait pas !

Je tiens à  signaler à tous ceux qui feraient l'erreur que sur le site fontsquirrel toutes les polices présentées ne sont pas toujours fournies avec le pack pour les sites web ("@font-face kit"), ce qui explique que pour certaines polices vous n'ayez pas la possibilité de télécharger ce pack... Vous devrez alors vous rabattre sur une police ressemblante...

Voilà... Mieux vaut tard que jamais...

Merci encore pour votre aide !

Pour info, FontSquirrel n'a pas l'autorisation d'héberger les font-face kits de certaines polices, mais il suffit de télécharger la version ttf ou otf qu'ils fournissent, et de passer ensuite par leur moulinette de kit generator Nul besoin de chercher une autre police.

Bonjour,

j’interviens pour donner ma solution, on téléchargeant  le pack @font-face kit j'ai découvert qu'il contient que les fichiers "LearningCurve_OT.otf"

et "LearningCurveDashed_OT.otf". D'après le cours sur OpenClassroom ".otf: OpenType Font. Ne fonctionne pas sur Internet Explorer" .

Dans mon cas, ne fonctionne non plus sur "googleChrome". Cependant la solution est d'intégrer le fichier qui porte une extension standard comme ".ttf" ou ".woff ". 

Par la suite j'ai télécharger le .ttf  " AguafinaScript-Regular.ttf "  via ce lien: https://www.fontsquirrel.com/fonts/list/classification/script

Ensuite il suffit de bien placer e fichier dans votre dossier de travail et d'ajouter le non de fichier dans le fichier .css (code au dessous)

Bon continuation à tous ;-)

@font-face {
    font-family: 'LearningCurveProRegular';
    src: url('LearningCurve_OT-webfont.eot');
    src: url('LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'),
         url('LearningCurve_OT-webfont.woff') format('woff'),
         url('AguafinaScript-Regular.ttf') format('truetype'),/*ici      <------------------------------*/

         url('LearningCurve_OT-webfont.svg#LearningCurveProRegular') format('svg');

}
h1
{
	font-family: 'LearningCurveProRegular', Arial, serif;
}

Lamecarlate a écrit:

Pour info, FontSquirrel n'a pas l'autorisation d'héberger les font-face kits de certaines polices, mais il suffit de télécharger la version ttf ou otf qu'ils fournissent, et de passer ensuite par leur moulinette de kit generator Nul besoin de chercher une autre police.

Merci, je bloque là dessus depuis des jours! Tout à coup je me sens moins stupide...espérons que ce ne soit pas qu'une impression

Bonjour,

merci d'éviter de remonter de vieux sujets juste pour dire merci : c'est gentil :), mais ça ne fait pas avancer…

Bonjour, comme Baptiste02 j'ai mis un certain temps à comprendre que la police Learning Curve Pro n'est pas dispo en @font face kit contrairement à ce qui est indiqué dans le cours : 

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/formatage-du-texte#/id/r-1610263

Si vous trouvez le temps, il serait judicieux de mettre à jour cette partie du cours svp.

Merci pour tout le reste évidemment.

Bonjour,

Si je peut apporter plus de précisions.

vous allez ici:

http://www.fontsquirrel.com/fonts/Learning-Curve-Pro

vous cliquez sur download OTF (OFFSITE)

et tout en bas de la page vous cliquez sur DOWNLOAD .

dans le fichier zip vous selectionnez par exemple la version learning_curve_regular_ot_ps.otf  que vous allez ensuite uploader ici:

https://www.fontsquirrel.com/tools/webfont-generator

pensez a selectionner le mode expert et dans Font Formats vous cochez tous les formats.

Cochez ensuite agreement et vous pourrez enfin telecharger le kit.

ensuite vous copier/coller tous les elements du kit dans votre dossier (celui qui contient le index.html et style.css du cours)

vous ouvrez le nouveau fichier .css (stylesheet.css) avec Sublime Text 3 et enfin vous pouvez au choix copier le code présent dans votre style.css, renommer le stylesheet.css en style.css ou directement travailler le cours sur ce nouveau fichier mais en prenant soin de changer le <link href"style.css"> de votre fichier html en <link href="stylesheet.css">.

Voila j'ai peut etre tout faux mais j'espère que ca aidera.

+++

-
Edité par FredericFournes 25 avril 2017 à 13:29:03

je viens de suivre les étapes de la dernière solution , cependant la police ne fonction pas, j'ai essayer en ouvrant avec firefox , microsoft edge mais c'est pareil

je ne comprend pas où le problème se trouve ? j'ai essayé avec d'autre kit de typo mais rien 

Merci pour l'aide par avance 

Bonjour,

il faut également penser à changer le nom de la police (LearningCurveProRegular dans le cours / learning_curveregular dans le fichier stylesheet.css récupéré)

tu dois avoir quelque chose comme cela :

@font-face {

    font-family: 'romantiquesregular';

    src: url('fonts/romantiques/romantiques-webfont.eot');

    src: url('fonts/romantiques/romantiques-webfont.eot?#iefix') format('embedded-opentype'),

         url('fonts/romantiques/romantiques-webfont.woff2') format('woff2'),

         url('fonts/romantiques/romantiques-webfont.woff') format('woff'),

         url('fonts/romantiques/romantiques-webfont.ttf') format('truetype'),

         url('fonts/romantiques/romantiques-webfont.svg#romantiquesregular') format('svg');

    font-weight: normal;

    font-style: normal;

}

Salut,

Je viens mettre un petit post parce que je suis un gros néophyte et je viens enfin de comprendre cette partie du cours !

C'est peut-être pas votre cas mais après avoir suivi la méthode de FredericFournes, j'étais toujours bloqué. En fait, une fois la police importer dans le fichier CSS il faut l'assigner à un élément pour que la police se mette en place sur la page !

Du genre:

h1

{

   font-family: 'learning_curveregular';

}

Je me suis juste senti super con pendant 2 secondes mais ça a fini par marcher !