28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Auriez-vous une solution pour que ma police s'affiche sur IE8 ? Elle s'affiche correctement sur FF, Chrome, Safari ainsi que sur IE11, IE10, IE9.

Voici le code en Less :

@font-path: "../fonts/";

@font-face(@family: 'Marianina', @filename: 'MarianinaFY', @weight: @regular-weight, @svgID:'Marianina FY'){
    font-family: @family;
    src:url('@{font-path}@{filename}.eot');
    src:url('@{font-path}@{filename}.eot?#iefix') format('embedded-opentype'),
        url('@{font-path}@{filename}.woff') format('woff'),
        url('@{font-path}@{filename}.ttf') format('truetype'),
        url('@{font-path}@{filename}.svg#@{svgID}') format('svg');
    font-weight: @weight;
}

@font-face {.loadFont('Marianina';'MarianinaFY-Light';@light-weight;'Marianina FY Light')}
@font-face {.loadFont('Marianina';'MarianinaFY-Regular';@regular-weight;'Marianina FY Regular')}
@font-face {.loadFont('Marianina';'MarianinaFY-Bold';@bold-weight;'Marianina FY Bold')}

Modifié par CamilleS (17 Jun 2015 - 16:23)
@font-face {
  font-family: 'Marianina';
  src: url('../fonts/MarianinaFY-Thin.eot');
  src: url('../fonts/MarianinaFY-Thin.svg#Marianina FY') format('svg'), url('../fonts/MarianinaFY-Thin.eot?#iefix') format('embedded-opentype'), url('../fonts/MarianinaFY-Thin.woff') format('woff'), url('../fonts/MarianinaFY-Thin.ttf') format('truetype');
  font-weight: 250;
}
Tu as une version testable en ligne ? Certains pourront peut-être t'apporter une réponse (je n'ai pas d'IE8 sous le coude).
Comment appelles-tu ta font lorsque tu en as besoin dans ton css ? (on sait jamais Smiley lol )

edit : peut-être que cet article résoudra ton problème.
Modifié par Raphi (17 Jun 2015 - 18:01)
Je ne peux malheureusement pas fournir le lien car le site est en préprod accessible via un lien sécurisé. La font est appelée comme ceci :

body {
  font-family: 'Marianina', Arial, sans-serif;
  font-weight: 300;
}


Merci pour le lien, je l'avais déjà lu et cela ne résout pas mon problème car la police est lisible sur les autres navigateurs ainsi que sur les versions plus récentes d'IE.
Modifié par CamilleS (18 Jun 2015 - 09:40)
Bonjour,

J'avoue que je n'ai plus trop d'idées.

Après tu as une piste à étudier :
Tu prends ta font tu la régénères avec un outil du style Webfont Generator (à moins que cela ne fonctionne pas pour cette font).
Ensuite tu testes l'index.html qui est fourni pour voir si cela fonctionne correctement sur IE8.
Si ça fonctionne, tu essayes ensuite de tester dans ton site qu'est-ce qui coince. La façon dont tu écris ton font-face, les fonts générées, un fichier css qui interfère (je vois pas trop comment mais bon), du js qui interfère, etc ?
Bonjour Raphi,

Merci pour ton aide, j'ai réussi à faire apparaître ma font, voici les différentes modifications que j'ai faite, je ne sais pas laquelle a fonctionné du coup je les écrits toutes au cas où quelqu'un rencontrerait ce problème :
- Placer en haut de page l'appel des fonts dans les fichiers CSS
- Ajouter local('?'), après la font .eot
- Re-télécharger la police en ttf et la re-générer sur l'un des deux sites ci-dessous :
https://www.kirsle.net/wizards/ttf2eot.cgi
http://www.fontsquirrel.com/tools/webfont-generator

Voilà, merci IE8 Smiley fache
Ah nickel. Smiley smile
Par contre je ne voudrais pas être rabat-joie mais, tu n'as pas installé la font sur ton ordi ?
Auquel cas, ça peux fonctionner alors que ça ne devrais pas, et le vrai problème n'est pas résolu.

Ça parait bête mais ça m'est déjà arrivé... Smiley lol