4904 sujets

Sémantique web et HTML

Bonjour
Je viens vers vous car j'ai un problème avec l'import de ma typo sur CSS et Wordpress.

Alors voilà j'ai voulu intégrer une typo en @font-face sur Dreamweaver mais j'ai pas réussi donc j'ai fait Fichier> Propriétés pages et j'ai modifié la typo de mon fichier via AspectsCSS, Liens CSS et Titres CSS.
Ca fonctionne niquel sur la prévisualisation google chrome où ma typo est bien présente grâce au code :
@import url("FuturaStd_Heavy/stylesheet.css");
Mais maintenant que je passe sur wordpress, la typo n'est pas prise en compte et je me retrouve avec la typo "bateau" de wordpress. J'ai quand même essayé de faire ça :
@font-face {
font-family: 'FuturaStd Heavy';
src: url('../../../../../../Library/Fonts/FuturaStd-Heavy.eot');
src: url('../../../../../../Library/Fonts/FuturaStd-Heavy.eot?#iefix') format('embedded-opentype'),
url('../../../../../../Library/Fonts/FuturaStd-Heavy.woff') format('woff'),
url('../../../../../../Library/Fonts/FuturaStd-Heavy.ttf') format('truetype'),
url('../../../../../../Library/Fonts/FuturaStd-Heavy.svg') format('svg');
}
et aussi ça :
@font-face {
font-family: 'FuturaStd Heavy';
src: url('FuturaStd-Heavy.eot');
src: url('FuturaStd-Heavy.eot?#iefix') format('embedded-opentype'),
url('FuturaStd-Heavy.woff') format('woff'),
url('FuturaStd-Heavy.ttf') format('truetype'),
url('FuturaStd-Heavy.svg') format('svg');
}
Mais ça n'a pas fonctionné.
J'ai placé mon dossier font dans bibliothèque>fonts> et j'avais également essayé un autre emplacement avec beaucoup de sous dossiers.

Voili, voilou ! Si quelqu'un est apte à m'aider il peut se manifester, je serais hyper reconnaissante !

Merci beaucoup !
Bonjour,

A priori il y a un problème de chemin. En effet, descendre autant dans les fichiers pour une font sous WordPress ça me paraît louche. Essayez de mettre les chemins en absolu pour tester.
Bonjour Olivier,
merci de ta réponse,
la font de base n'est pas sous wordpress, c'est une personnelle de mon ordinateur que j'ai justement voulu exporter sur le site wordpress via l'appel @font-family. Qu'est ce qu'un chemin en absolu et comment procède-t-on ?
Également , la font doit-elle être placée à un endroit spécial dans l'ordinateur pour l'exporter sous dreamweaver en @font-face ?

Merci !
Je n'utilise pas Dreamweaver mais en tous cas, étant donné que la font est utilisée par le theme, je mettrais la police dans le dossier du thème. C'est plus cohérent.

Pour les liens en absolu ou relatif vous trouverez facilement un tuto explicatif sur Google. Ça vaut le coup de se documenter sur ce point.
Alors j'ai regardé et j'ai essayé les deux options, aucune ne marche..

J'ai réussi à remodifié mon CSS en utilisant uniquement @font-face et plus @import donc ça fonctionne tjrs en prévisualisation Google Chrome mais tjrs pas quand je passe sur WordPress. J'ai également déplacé les fonts dans mon thème.

Une idée du problème ?
De toute façon il y a toutes les chances pour que cela reste un problème de chemin. En admettant que vous avez placer la police dans un dossier "font" du thème le chemin devrait correspondre à quelque chose comme ceci :
"https://leSite.fr/wp-content/themes/leTheme/fonts/laFont.woff"

... que l'on peut convertir par un lien relatif tel que celui-ci (WordPress ne pointe pas la racine du site, c'est peut-être là la source de votre incompréhension) :
"../../fonts/laFont.woff"


PS : bien que je le fasse encore moi-même - car je n'ai pas encore fait le ménage de mes codes sur ce point - la déclaration de font en .svg n'est plus utile, de même pour .eot.
Modifié par Olivier C (06 Dec 2018 - 08:21)