Importer nouvelle font

[Plümpheit]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Plusieurs utilisateurs
Lien du forum : https://oc-test-graph-code.forumactif.com/

Description du problème

Bonjour,

comme j'ai pu le voir suite à de nombreux test et recherche la fonction de base @font ne semble pas fonctionner.

J'ai tout de même essayer d'importer une nouvelle font. J'ai hébergé un fichier en public via ma dropbox : https://www.dropbox.com/s/ptmo594gt49yx9x/MORPHEUS.TTF

et j'ai entré PLEIN de code pour essayer.

dans le overhall et la PA

Code:

<link href='https://www.dropbox.com/s/ptmo594gt49yx9x/MORPHEUS.TTF' rel='stylesheet' type='text/css'>

et dans le CSS:

Code:

@font-face {
font-family: MORPHEUS;
src: url('https://www.dropbox.com/s/ptmo594gt49yx9x/MORPHEUS.TTF'format ('.ttf');}

je sais que je suis une bille en code à la base... alors un peu d'aide serait la bienvenue

Merci d'avance !



Sans résultat
.

[pizinette]

Bonjour,

C'est peut être bête de ma part mais ce ne serait pas parce que ton ".TTF" est en majuscule qu'il ne le reconnaîtrait pas ?

En outre tu n'as peut être pas besoin d'utiliser la balise format mais simplement ce genre de codes :

Code:

@font-face {
   font-family: "Ma Super Fonte";
   src: url('MaSuperFonte-Regular.ttf');
}
@font-face {
   font-family: "Ma Super Fonte";
   font-style: italic;
   src: url('MaSuperFonte-Italic.ttf');
}
@font-face {
   font-family: "Ma Super Fonte";
   font-weight: bold;
   src: url('MaSuperFonte-Bold.ttf');
}


En espérant que ça t'aidera

[Pinguino]

Bonjour,

Mes connaissances en font sont assez limitées mais perso, je remarque que le lien n'est déjà pas un fichier CSS mais TTF. De plus, il s'agit plus d'un lien pour télécharger et installer une font sur son ordi que de l'avoir présente sur un site web.

Par exemple avec les Google Fonts, le fonctionnement n'est pas le même car on obtient bien un fichier CSS : https://fonts.google.com/ qui est la ressource attendue pour un site web.

Ou alors vous avez simplement oublié de mettre le .ttf dans code CSS : https://www.alsacreations.com/astuce/lire/630-fonte-personnalisee-site-web.html

[Plümpheit]

Bonsoir merci à vous deux pour vos réponses.

Pizinette: je ne pense pas que le format de majuscule change quelque chose. Le lien s'ouvre en l'état sur mon pc... Pour le format possiblement qu'il est inutile. je l'ai ajouter parla suite quand j'ai vu que mon code ne marchait pas.

Pinguino: En effet j'ai bien un lien TTF. Je ne sais pas comment obtenir un lien CSS alors pour joindre ma police dans mon CSS (ou autre). Quant a google font, ma police ne s'y trouve pas. (et en plus je suis une telle bille que j'arrive pas prendre un lien CSS sur ce site parce que je pige rien à l'anglais XD)
Merci pour le lien que j'ai étudier avec attention. Cependant je ne trouve pas la réponse à mon problème.

Je ne retrouve plus le tuto qui existait à une époque où une membre avait expliqué comment de la dropbox elle avait réussit a mettre sa police dans son css >0<

EDIT: j'ai encore essayer pas mal de code...
dont un qui consistait a héberger la police pour avoir le code en css:

Code:


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


que j'ai aussi modifier en ça :

Code:


@font-face {

src: url('https://www.dropbox.com/s/ptmo594gt49yx9x/MORPHEUS.TTF'format ('truetype');

    font-family: 'morpheusregular';
    src: url('morpheus-webfont.woff2') format('woff2'),
        url('morpheus-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


bref je suis pas plus avancé et plus j'essaye des truc moins ça marche :'(

[Kardo]

Bonjour,
Il se pourrait que cela vienne du fait que le lien dropbox n'est pas un lien direct, essayez en ajoutant le paramètre ?dl=1 à la fin de votre lien, comme suit :

Code:

@font-face {
  font-family: "morpheusregular";
  src: url('https://www.dropbox.com/s/ptmo594gt49yx9x/MORPHEUS.TTF?dl=1');
}

[Plümpheit]

Je viens d'essayer et non ça ne marche pas. Mais je crois que j'avais déjà essayer et vu qu'il fallait transformer le lien de .ttf


Arf :'( pourquoi ça marche pô !

[Plümpheit]

je up

[Kardo]

Le problème pourrait venir de dropbox, j'ai testé avec un autre hébergeur et ça fonctionne avec ce code :

Code:

@font-face {
  font-family: "Morpheus";
  src: url('https://srv-file10.gofile.io/download/trHaMv/MORPHEUS.TTF') format('truetype');
}

.maintitle h1{
    font-family: "Morpheus";
}

Il faut juste trouver un hébergeur avec lequel ça fonctionne et récupérer le lien de téléchargement direct.

[mSyx]

Évitez Dropbox pour les polices en CSS;
- si le lien finit comme il le devrait (/MORPHEUS.TTF), le site renvoie directement sur son système d'aperçu des fichiers
- si le lien finit par un aperçu direct mais détourné (/MORPHEUS.TTF?dl=1), il est quasi-certain que le navigateur ait du mal à reconnaître ce fichier comme étant valide (vu que son extension est suivie par autre chose)

Préférez d'autres hébergeurs du coup; pour les gratuits, ça se trouve assez facilement (Sync, pCloud, Google Storage [à confirmer niveau bug comme pour Dropbox]...)

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.