Installation Font extérieure impossible.

par Reeza Lun 9 Mar 2020 - 11:27

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à tous !

Je viens de nouveau vers vous avec une nouvelle question.
Voilà, depuis un certain temps je cherche à installer des fonts non disponibles sur GoogleFont, sur mon forum.

J'ai suivi le tutoriel disponible ici > Comment ajouter des polices en respectant, à la lettre, les informations données. Mais cela reste un échec sur mon forum.

Pour l'explication :

Je souhaite installer la Police "Tomato Soup" que j'ai hébergé moi même (lien ici > Tomat-soup-Regular.ttf).
J'ai suivi les informations en créant un CSS comme ceci :

Code:: @font-face { font-family: 'tomato'; src:url(https://www.aht.li/3479208/TomatoSoup-Regular.ttf) format('truetype'), font-weight: normal; font-style: normal; }

J'ai hébergé ce fichier CSS sur mon espace et j'ai ajouté ce lien dans le template overall_header (comme je le fais pour les fonts de Google, qui fonctionnent parfaitement) :

Code:: <link href="https://www.aht.li/3479209/evetest1.css" rel="stylesheet" type="text/css">

J'ai ensuite créé une div, tout à fait banale, pour voir si mon installation fonctionnait et...non.

Je n'arrive pas à voir d'où vient mon erreur. J'ai suivi à la lettre les informations données sur le premier sujet. J'ai même fouillé ce tutoriel >
Tutoriel Font Face mais... je n'y arrive pas !

Pouvez-vous m'aider ?

Merci beaucoup !

par Neptunia Lun 9 Mar 2020 - 11:47

Bonjour ^^

La ligne 3 du css devrait se terminer par un point-virgule.

Edité :

Placer l'url entre guillemets "..." peut aussi aider.

par Reeza Lun 9 Mar 2020 - 12:02

Bonjour Neptunia ! Merci pour ta réponse rapide I love you

(comme toujours)

Je viens de modifier le CSS en enlevant la virgule et en la remplaçant par un point-virgule. J'ai également ajouté les guillemets autour de l'url mais...rien à faire. Cela ne fonctionne pas.

Voici le CSS que j'ai hébergé suite à tes conseils :

Code:: @font-face { font-family: 'tomato'; src:url("https://www.aht.li/3479208/TomatoSoup-Regular.ttf") format('truetype'); font-weight: normal; font-style: normal; }

Il est correctement installé dans mon template.

Voici les informations de ma div, si cela peut aider.

Code:: .eve {font-family:'tomato'; color:#a16459; font-size: 30px; text-align: center; line-height:20px; width:450px;}

Je ne comprends vraiment pas d'où vient le problème scratch

par Neptunia Lun 9 Mar 2020 - 12:24

Est ce que cela fonctionne mieux avec cette balise dans le overall_header ?

Code:: <link href="https://www.badwholf.uk/rsc/fonts/thecrescentcity_forumactif_com.css" rel="stylesheet" type="text/css">

par Reeza Lun 9 Mar 2020 - 12:38

Je viens d'essayer et malheureusement non, aucun changement. pale

Installation Font extérieure impossible. Hz58UFy

L'aperçu de ma boite de dialogue :

Installation Font extérieure impossible. WDlZ0LS

Code:: .eve {font-family:'Tomato'; color:#a16459; font-size: 30px; text-align: center; line-height:20px; width:450px;}

Le lien est bien placé dans le template puisque les autres fonts, issues de GoogleFonts, fonctionnent parfaitement. Non !

Aperçu du Template :

Installation Font extérieure impossible. XRNIadk

Je l'ai placé plus haut, pensant que peut-être cela marcherait mieux ? J'ai testé dans les lignes avec les autres et, tout en haut, sans succès.

par Neptunia Lun 9 Mar 2020 - 13:01

Je passe la main !
Pas d'autre idées en vue Sad

par *Splash* Lun 9 Mar 2020 - 13:38

Hi,
Le mieux est de placer les balises dans le template, la CSS ne sert que pour appeler la police

par Neptunia Lun 9 Mar 2020 - 13:40

Moi je suis passée par Général > Promotion du fofo > Moteurs de recherche > Balises meta supplémentaires

Et je n'obtiens rien de mieux ...

par Reeza Lun 9 Mar 2020 - 13:41

Merci beaucoup pour ton aide Neptunia ! I love you

Splash : Hello !

Alors, je suis désolée je dois être un peu nulle mais, je ne comprends pas quelles balises je dois mettre dans le template ?

par *Splash* Lun 9 Mar 2020 - 13:43

Celle-ci : https://forum.forumactif.com/t402487-installation-font-exterieure-impossible#3358007

À placer juste après la balise d'ouverture

Code:: <head>

Regarde ce tuto : https://forum.forumactif.com/t343855-utiliser-des-polices-personnalisees-avec-google-web-fonts#2939722

par Reeza Lun 9 Mar 2020 - 13:47

Ah ! D'accord. C'est exactement ce que j'ai installé lorsque Neptunia m'a donné cette balise !

Pour visualiser :
Installation Font extérieure impossible. XRNIadk

La balise se trouve juste après head à la ligne 4.

Mais lorsque je tente de mettre en forme un message, un titre, quoi que ce soit, le texte s'affiche sans la Font. Confused

par *Splash* Lun 9 Mar 2020 - 13:49

Ton template est bien publié ?

par Reeza Lun 9 Mar 2020 - 13:50

Ce n'est pas mon CSS. C'est mon template overall_header. comme l'indique le titre juste au dessus. Je sais où sont les templates et où mon CSS. La capture d'écran est le template, désolée d'insister.

par *Splash* Lun 9 Mar 2020 - 13:50

Oui, j'ai édité mon dernier message

par Reeza Lun 9 Mar 2020 - 13:52

Oui, il est bien publié. J'ai vérifié deux fois et, cela reste sans effet malheureusement.

par *Splash* Lun 9 Mar 2020 - 13:55

C'est une police Google Font ?

par Reeza Lun 9 Mar 2020 - 13:57

Non, justement. Comme expliqué dans mon premier message, je cherche à installer des polices ne venant pas de GoogleFonts.

J'ai déjà plusieurs Fonts provenant de Google, elles fonctionnent parfaitement. J'ai expliqué au dessus avoir suivi les tutoriels disponibles sur ForumActif pour installer des polices extérieures. Mais mon problème demeure.

par *Splash* Lun 9 Mar 2020 - 14:08

Peut-être à creuser du coté de l'hébergement du fichier

par Reeza Lun 9 Mar 2020 - 14:10

C'est ce que j'étais en train de me demander. Je crois avoir déjà vu ce genre de fichier fonctionner mais à l'aide de dropbox. Je vais essayer, voir si cela change quelque chose.

Merci pour votre aide, en tout cas. Je ne met pas encore le sujet comme "Résolu" mais je n'oublierai pas de le faire si le problème vient effectivement de l'hébergeur.

par *Splash* Lun 9 Mar 2020 - 14:11

Sinon essaie de remplacer ta div par ceci

Code:: [font=Eve]Test[/font]

par **Kardo** Lun 9 Mar 2020 - 14:15

Bonjour,
J'apporte ma petite pierre à l'édifice, 'tomato' semble être détecté comme la couleur suivante : #ff6347
Quand je remplace le css par ceci :

Code:: @font-face { font-family: 'tomatofont'; src:url("https://www.aht.li/3479208/TomatoSoup-Regular.ttf") format('truetype'); font-weight: normal; font-style: normal; } #site-title h1 { font-family: 'tomatofont'; }

J'ai l'appel à la police qui est correct, mais l'hébergeur de votre fichier semble bloquer les accès au fichier (à cause d'un header manquant) :
"Access to font at 'https://www.aht.li/3479208/TomatoSoup-Regular.ttf' from origin 'https://exemple.forumactif.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

par Reeza Lun 9 Mar 2020 - 15:00

Merci à tous pour votre aide ! J'ai finalement trouvé la solution !

Effectivement, l'hébergeur que j'utilisais bloquait l'accès. Je suis donc passée par dropbox. Et à l'aide d'un tutoriel, j'ai pu modifier l'url afin que cela fonctionne.

Merci à tous pour le temps que vous avez passé pour m'aider ! I love you

par Neptunia Lun 9 Mar 2020 - 15:15

C'est pour cette raison que j'avais essayé de stocker les fichiers chez moi.

Malheureusement moi aussi je bloque par défaut les CORS sans savoir comment les débloquer Sad

Le seul truc que je pense avoir compris est que je dois passer par le fichier .htaccess ...

par Reeza Lun 9 Mar 2020 - 15:31

Je pense que si il s'agit, comme pour moi, d'un hébergeur gratuit, cela n'est pas modifiable. Ou alors, je ne sais pas du tout où ça se trouve lol ! En tout cas, sur celui où j'étais, il n'y avait rien dans les paramètres qui permettait de débloquer quelque chose de ce genre.

J'ai fouillé internet en tapant le message d'erreur donné par Kardo, je n'ai rien trouvé de concluant. Du coup j'ai testé par Dropbox et tout fonctionne parfaitement en découpant l'url pour placer "https://dl.dropboxusercontent.com/s/(le reste des lettres et chiffres du lien de partage). Et là ça fonctionne parfaitement ! Du coup je vais pouvoir le faire avec tout plein de fonts non google que je cherche à utiliser depuis longtemps ! I love you

par Neptunia Lun 9 Mar 2020 - 17:05

Je suis chez Archive-Host mais en version hébergement de sites. Donc j'ai accès à peu près à tout.

Faudra que je m'y penche sérieusement un de ces quatre.

Installation Font extérieure impossible.