Problème avec @font-face

[Kiyomizu]

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

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..

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

[no_way]

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

[Kiyomizu]

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 ?

[no_way]

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

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.

[Kiyomizu]

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');
}

[no_way]

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.

[Kiyomizu]

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

[no_way]

Puis-je avoir le code CSS utilisé ?

[Kiyomizu]

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;

}

[no_way]

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.

[Kiyomizu]

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 ?

[no_way]

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.

[Kiyomizu]

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 ?

[no_way]

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.

[Kiyomizu]

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

[[Nihil]]

Hello

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:

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

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

[Kiyomizu]

Oh mon dieu ça marche merci à vous deux !