28172 sujets

CSS et mise en forme, CSS3

[Résolu] Installation de font

Pages :
Bonjour,
Je n'arrive pas à rajouter une font.
pourtant, il me semble que tout est bon :
les CSS :
@font-face {
    font-family: 'lato-light';
    src: url('.../webfonts/lato-light-webfont.woff2') format('woff2'),
         url('.../webfonts/lato-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.section_cv h2{
    padding-top: 30px;
    width:100%;
    text-align: center;
	font: 15vw 'lato-light', sans-serif;
}

et mes fonts bien placées (image)
Merci pour votre aide,
ED upload/1652066224-48192-capturedaeacran2022-05-09aa05.png
Le chemin n'est pas bon (comme d'hab' pour cette question, on y passe tous) : il y a trois petits points en début des chemins. Déjà, là, c'est faux quel que soit le contexte.

Ensuite, vu que la font est au même niveau que le style, il suffit de mettre le nom du fichier.
Bonjour Olivier C Smiley smile
a écrit :
Ensuite, vu que la font est au même niveau que le style, il suffit de mettre le nom du fichier.

Que veux-tu dire ??
C'est bien ça ?
@font-face {
    font-family: 'lato-light';
    src: url('webfonts/lato-light-webfont.woff2') format('woff2'),
         url('webfonts/lato-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Ça ne change rien Smiley confus
Bonne journée,
ED
Modérateur
Salut,

Non tu es déjà dans le dossier webfonts pas besoin de le repréciser

Olivier C a écrit :
il suffit de mettre le nom du fichier.
a écrit :
la font est au même niveau que le style.
???
Désolé Smiley decu 
@font-face {
    font-family: 'lato-light';
    src: url('lato-light-webfont.woff2') format('woff2'),
         url('webfonts/lato-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

??
Toutes mes fonts commencent par fonts/ ou webfonts / Smiley confus
C'est pas correct ? Smiley sweatdrop
Mais toujours pas de lato Smiley bawling 
@font-face {
    font-family: 'lato-light';
    src: url('lato-light-webfont.woff2') format('woff2'),
         url('lato-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
el_debutanti a écrit :
@font-face {
    font-family: 'lato-light';
    src: url('lato-light-webfont.woff2') format('woff2'),
         url('lato-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


Ton @font-face il est bien dans le stylesheet.css que l'on voit sur la capture d'écran ?
Salut kerlutinoec,
Je l'ai mis comme tous mes font-faces... dans mon fichier CSS.
J'aurais pas du ?
Modérateur
el_debutanti a écrit :
Je l'ai mis comme tous mes font-faces... dans mon fichier CSS.
J'aurais pas du ?

Si si c'est bon, il voulait juste s'assurer que ces lignes de CSS n'étaient pas ailleurs je pense.

[EDIT] Mais pk ton fichier CSS est dans el dossier webfonts ? Smiley murf

En fait quand tu mets webfonts/ ca va chercher dans un dossier webfonts or ton stylesheet.css est déjà dans le dossier webfonts donc avec une chemin relatif (= a partir de ton stylesheet.css) les font sont juste a coté donc il faut juste mettre le nom du fichier comme tu l'as fait oui.

@font-face {
    font-family: 'lato-light';
    src: url('lato-light-webfont.woff2') format('woff2'),
         url('lato-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Modifié par _laurent (09 May 2022 - 14:49)
Modérateur
Juste en passant, le fichier stylesheet.css semble daté du 18/02/22 et les fichier font sont de hier , Ne serais tu pas en train d'éditer un autre fichier que celui que l'on voit sur ton screenshot ?

Le fichier est-il aussi bien chargé dans ta page ?

En tapant la touche f12, il y a généralement un onglet développeur qui s'ouvre dans ton navigateur . Tu devrais y trouver toute sortes d'information concernant les ressources demandées par ta page, entre autres infos.

Cdt,
Modifié par gcyrillus (09 May 2022 - 15:01)
Bonjour gcyrillus,
Un oubli quand j'ai fait le ménage Smiley ohwell
Le fichier stylesheet.css n'est pas lié à ma page. J'ai oublié de le jeter.
Je vais tenter f12, mais l'inspecteur et moi Smiley hum
Bon après-midi,
ED
Modérateur
el_debutanti a écrit :
Bonjour gcyrillus,
Un oubli quand j'ai fait le ménage Smiley ohwell
Le fichier stylesheet.css n'est pas lié à ma page. J'ai oublié de le jeter.
Je vais tenter f12, mais l'inspecteur et moi Smiley hum
Bon après-midi,
ED


Ah bah voilâ , tu induit tout le monde en erreur. Il se trouve où exactement ton fichier de style par rapport au dossier webfonts ? dans un dossier css , autre ?
gcyrillus a écrit :


Ah bah voilâ , tu induit tout le monde en erreur. Il se trouve où exactement ton fichier de style par rapport au dossier webfonts ? dans un dossier css , autre ?


Ah ah ! J'ai bien fait de poser la question ! Smiley biggol
Bonsoir tout le monde Smiley smile
Le fichier CSS se trouve dans un sous dossier CSS.
La font se trouve dans le sous dossier Webfont.
Ces 2 sous dossiers se trouvent dans mon dossier "monSite"
Fans le dossier "monSite" On trouve l'index, les sous-dossiers cités plus haut ainsi que celui du JS etc... ^^
Bonne soirée... et MERCI !
ED
Modérateur
Bonsoir,

tu avais ta réponse dés le début. un point en trop !

Olivier C a écrit :
Le chemin n'est pas bon (comme d'hab' pour cette question, on y passe tous) : il y a trois petits points en début des chemins. Déjà, là, c'est faux quel que soit le contexte.

Mais ensuite, comme tu n'avais pas préciser où se trouvé ton fichier CSS et que tu avais fourni un screenshot , un quiproquo s'est installé ... avec un point omis Smiley smile
Olivier C a écrit :

Ensuite, vu que la font est au même niveau que le style, il suffit de mettre le nom du fichier.


Cdt
Modifié par gcyrillus (10 May 2022 - 23:52)
upload/1652229086-48192-capturedaeacran2022-05-11aa02.png ^^
Oui, mais ça ne fonctionne pas.
Par contre, virer le.../ m'a permis "d'activer" une autre font (avec webfont/mafont).
Mais pas celle dont je parle Smiley murf
Modérateur
Hello,

Quand je vois les captures écrans, ça manque de réflexion sur l'architecture des fichiers.
D'un point de vue web, qu'est-ce qu'une police typographique ? C'est ni plus, ni moins la mise en forme du contenu de ta page HTML. Donc, ça doit se situer dans le dossier css.
Les gros avantages :
- tu peux garder ton chemin en relatif sans te soucier du double point
- l'architecture de tous tes dossiers est beaucoup plus concise. Ça évite le gros bordel par la suite. Certains projets sont tellement énorme que tu t'y perds vite.

Ce que je t'invite à faire :
- tu te crées un dossier dans ton repertoire css et tu le nommes "fonts"
- tu ajoutes un seul jeu de typo (une police bien grasse afin de vérifier le résultat facilement à l'écran

https://zupimages.net/viewer.php?id=22/19/83th.png
Si tu as besoin que je t'envoie par mail le zip, tu peux me l'indiquer en mp (afin d'éviter que tu édites ton adresse mail dans le forum)
Modifié par niuxe (11 May 2022 - 13:53)
Modérateur
Bonjour ,
el_debutanti a écrit :
Bonjour,
Je n'arrive pas à rajouter une font.
pourtant, il me semble que tout est bon :
les CSS :
@font-face {
    font-family: 'lato-light';
    src: url('.../webfonts/lato-light-webfont.woff2') format('woff2'),
         url('.../webfonts/lato-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


eleve donc ce point en trop si ton fichier CSS est "MON FICHIER CSS.css" que l'on voit sur ton dernier screenshot. Car depuis le début, tu n'as toujours pas clairement indiqué quel était ton fichier CSS et où il était . 
@font-face {
    font-family: 'lato-light';
    src: url('../webfonts/lato-light-webfont.woff2') format('woff2'),
         url('../webfonts/lato-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


Pour infos
./ part du répertoire courant
../ remonte dans le répertoire parent
/ remonte à la racine
dossier ou fichier.fichier , cible le dossier ou fichier situé dans le répertoire courant .

Il n'y a pas de .../

Lorsque tu as un soucis, indique clairement la situation , nous n'avons pas de boule de cristal, juste de l'empathie et un peu d’expérience.

Lorsque l'on te répond, prend le temps de lire et comprendre les réponses, si quelqu'un te demande d’éclaircir un point ou un autre pour mieux t'aider, prend aussi le temps de comprendre ce qu'il te demande et d'y répondre clairement autant que tu peut. Par exemple indiqué clairement ou se trouve ton fichier CSS et si sur un screenshot, l'identifier aussi clairement. , si la réponse te semble inadéquate, reformule ta question avec les détails les plus pertinents possibles. Tu obtiendras plus rapidement de l'aide et des réponses
Modifié par gcyrillus (11 May 2022 - 13:50)
Meilleure solution
Pages :
Sujet clos
Aller à