Problème avec @font-face

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème avec @font-face

Message par Kiyomizu le Ven 20 Nov 2015 - 0:25

Détails techniques


Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://sweet-swirl-test.forumactif.org/

Description du problème


Hello guys Very Happy

En ce moment je prépare un petit thème, pour me changer les idées.. mais j'ai un problème. J'utilise la typo MixLean, j'aimerais le mettre dans la "PA" mais elle affice une simple typo horrible.. Sad

Donc j'e ai conclus que la typo n'était tout simplement pas "installé". Je l'ai donc mise via un @font-face, mais cela n'a pas marché..

Comment cela ce fait-il ?

Code:
/* FONT */
@font-face {
    font-family: MixLean;
    src: url('http://www.aht.li/2743583/MixLean.ttf');
}

Bonne soirée Very Happy


Dernière édition par Kiyomizu le Dim 22 Nov 2015 - 12:11, édité 1 fois

Kiyomizu
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 18/10/2015

http://www.sweet-swirl.org/
Kiyomizu a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème avec @font-face

Message par no_way le Ven 20 Nov 2015 - 0:38

Bonsoir, je vous invite à lire ce sujet pour plus d'informations.

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec @font-face

Message par Kiyomizu le Ven 20 Nov 2015 - 10:33

Bonjour,

Je ne suis pas sur FireFox mais sur Google Chrome, dois-je le faire quand même ? Et le fichier .htaccess doit-il être dans la racine du "serveur" avec le fichier .css ?

Kiyomizu
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 18/10/2015

http://www.sweet-swirl.org/
Kiyomizu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec @font-face

Message par no_way le Ven 20 Nov 2015 - 11:47

Il n'y a pas que Firefox qui dispose de ce comportement, Chrome et d'autres le font aussi, de toute façon vous ne devriez pas mettre une fonte disponible que pour une partie de vos visiteurs Wink

Non, faites un dossier dans lequel vous verserez vos fontes et le fichier .htaccess, ainsi en cas d'erreur dans le fichier .htaccess votre serveur ne sera pas paralysé et vous pourrez contrôler plus finement les fontes qui peuvent être accessibles à tous.

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec @font-face

Message par Kiyomizu le Sam 21 Nov 2015 - 0:33

D'accord, merci pour votre réponse, j'ai bien essayé dans un dossier "Typo" avec un fichier .htaccess, mais ça ne fonctionne toujours pas..

Est-ce normal ? Le lien en question.
Et le css :
Code:
@font-face {
    font-family: MixLean;
    src: url('http://cremechoco.hebergratuit.net/Typo/MixLean.ttf');
}

Kiyomizu
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 18/10/2015

http://www.sweet-swirl.org/
Kiyomizu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec @font-face

Message par no_way le Sam 21 Nov 2015 - 0:42

Tous les navigateurs ne prennent pas en charge ttf mais sinon la configuration de votre serveur est bonne, je reçois bien:
Access-Control-Allow-Origin: *

Vous pouvez passer par font Squirrel si votre fonte peut légalement être partagée afin de générer les autres formats.

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec @font-face

Message par Kiyomizu le Sam 21 Nov 2015 - 1:35

J'espère avoir bien suivi les étapes, mais cela ne marche pas.. Sad

Kiyomizu
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 18/10/2015

http://www.sweet-swirl.org/
Kiyomizu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec @font-face

Message par no_way le Sam 21 Nov 2015 - 2:00

Puis-je avoir le code CSS utilisé ?

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec @font-face

Message par Kiyomizu le Sam 21 Nov 2015 - 2:04

Bien sûr, désolé, le voici :
Code:
@font-face {
    font-family: 'MixLean';
    src: url('http://cremechoco.hebergratuit.net/Typo/mixlean-webfont.eot');
    src: url('http://cremechoco.hebergratuit.net/Typo/mixlean-webfont.eot?#iefix') format('embedded-opentype'),
        url('http://cremechoco.hebergratuit.net/Typo/mixlean-webfont.woff2') format('woff2'),
        url('http://cremechoco.hebergratuit.net/Typo/mixlean-webfont.woff') format('woff'),
        url('http://cremechoco.hebergratuit.net/Typo/MixLean.ttf') format('truetype'),
        url('http://cremechoco.hebergratuit.net/Typo/mixlean-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;

}

Kiyomizu
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 18/10/2015

http://www.sweet-swirl.org/
Kiyomizu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec @font-face

Message par no_way le Sam 21 Nov 2015 - 2:23

Hélas il semblerait que votre serveur ne permette pas l'usage du fichier .htaccess ou la définition des entêtes en fait, j'ai sans doute crié victoire trop tôt tout à l'heure ou alors vous avez supprimé le fichier .htaccess par inadvertance.

Dans pareil cas il n'y a pas de solution à moins de passer par une solution PHP, j'avais fait un script pour pallier à ce souci mais je ne l'ai pas sous la main et il me faudra sans doute le mettre un peu à jour mais si vous n'êtes pas pressé (1 semaine), je peux m'y attaquer.

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec @font-face

Message par Kiyomizu le Sam 21 Nov 2015 - 11:26

Pourtant sur l'offre d'hébergement, il y a bien marché .htaccess :/
Après je n'ai pas téléchargé de client FTP je le fais via Windows, c'est peut être à cause de ça. J'essaie ^^

Sur l'éditeur de Google Chrome j'ai une erreur qui se produit "Font from origin 'http://cremechoco.hebergratuit.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://sweet-swirl-test.forumactif.org' is therefore not allowed access."

Est-ce du à ça ?

Kiyomizu
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 18/10/2015

http://www.sweet-swirl.org/
Kiyomizu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec @font-face

Message par no_way le Sam 21 Nov 2015 - 13:04

Alors ce n'est pas le souci, mais je pense que le module pour la manipulation des entêtes (mod_headers) n'a pas été compilé sur votre serveur ou qu'il n'est pas chargé ce qui rend l'envoi de l'entête Access-Control-Allow-Origin impossible.

Remplacez le contenu de votre .htaccess par:
Code:
Header set test-ac "test"

une fois chargé sur votre serveur dans le dossier des fontes, tentez d'y accéder, si vous faites face à une page d'erreur (Internal server error, code 500), c'est que votre hébergeur ne propose pas la manipulation des entêtes.

En pareil cas, la dernière solution devrait être PHP.

Et oui, c'est bien l'absence de cette entête qui vous empêche d'utiliser votre fonte.

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec @font-face

Message par Kiyomizu le Sam 21 Nov 2015 - 19:23

J'ai bien remplacé le contenu de mon .htaccess, je n'ai pas d'erreur 500 mais une erreur 403 access denied. Donc ça doit marché ou non ?

Le PHP ? Ca marcherait sur FA ?

Kiyomizu
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 18/10/2015

http://www.sweet-swirl.org/
Kiyomizu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec @font-face

Message par no_way le Sam 21 Nov 2015 - 19:38

Alors ce n'est pas logique que vous ayez une erreur 403, remettez le .htaccess avec le code que je vous ai fourni, j'aimerais constater par moi même ce code.

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec @font-face

Message par Kiyomizu le Dim 22 Nov 2015 - 3:41

C'est bon j'ai remis le code que vous m'aviez donné ^^

Kiyomizu
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 18/10/2015

http://www.sweet-swirl.org/
Kiyomizu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec @font-face

Message par [Nihil] le Dim 22 Nov 2015 - 10:37

Hello Smile

Une technique qui marche bien pour l'avoir utilisée plusieurs fois, tu crées une feuilles CSS que tu héberges au même endroit que les fonts. Dedans tu mets juste le code du font-face. Il faut peut-être aussi mettre les liens en relatifs dans cette feuille CSS et non as en absolu (comme actuellement).

Par exemple au lieu de :
Code:
url('http://cremechoco.hebergratuit.net/Typo/mixlean-webfont.eot')

Mettre ceci (si on est dans le même dossier) :
Code:
url('mixlean-webfont.eot')

Spoiler:
Ensuite, via ton template overall_header il faut rajouter le lien vers ce CSS là, comme ça par exemple (si on appelle le fichier typo.css) :
Code:
<link rel="stylesheet" type="text/css" href="http://cremechoco.hebergratuit.net/Typo/typo.css">

Panneau d’administration ► Affichage ► Templates ► Général ► overall_header et ensuite on le place entre les balises head
Exactement comme on installerait une Google Font par exemple

Sinon, tu peux essayer un autre hébergeur gratuit, avec alwaysdata cette technique a toujours fonctionné pour ma part Smile

J'espère que cela pourra t'aider ! Smile

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec @font-face

Message par Kiyomizu le Dim 22 Nov 2015 - 12:11

Oh mon dieu ça marche merci à vous deux ! ok

Kiyomizu
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 18/10/2015

http://www.sweet-swirl.org/
Kiyomizu a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum