Problème avec la fonte Infinity

**ghazal** · 23/12/2013, 19h08

Re : Problème avec la fonte Infinity

Salut,
il ya des erreurs dans ton appel à la font et il manque des formats.
* il faut un seul encadrement de {}, à la différence des mediaqueries
* il te faut aussi les formats .eot, .woff, .svg

Un modèle d'appel :

@font-face {
font-family: 'Infinity';
src: url('font/Infinity.eot');
src: url('font/Infinityt.eot?#iefix') format('embedded-opentype'),
url('font/Infinity.woff') format('woff'),
url('font/Infinity.ttf') format('truetype'),
url('font/Infinity.svg#CartoGothicStdBook') format('svg');
font-weight: normal;
font-style: normal;
}

quand cette série de fichiers est localisée dans un dossier nommé "font".

Si tu n'as que .ttf, tu peux aller sur un générateur de formats:

Create Your Own @font-face Kits » Font Squirrel

http://www.fontsquirrel.com/tools/webfont-generator

Create Your Own @font-face Kits by uploading the fonts you want to use.

Sélectionne Expert, puis rajoute svg dans la sélection.

**erkki** · 23/12/2013, 21h53

Re : Problème avec la fonte Infinity

Bonsoir Ghazal !

Merci pour cette réponse qui me redonne un peu d'espoir dans ce mic-mac

Je te tiens au courant pour la suite si tu veux bien ...

**ghazal** · 24/12/2013, 09h59

Re : Problème avec la fonte Infinity

Une autre solution est d'utiliser les google fonts.

1 - Modèle d'appel standard via une feuille CSS (A PLACER IMPERATIVEMENT en haut de la feuille) avec 2 possibilités de "graisse" (gras ou moins gras, 400/300)

@import url(http://fonts.googleapis.com/css?family=Muli:400,300)

h2{ font-weight: 400;}
p {
font-size: 19px;
line-height: 27px;
color: rgba(51, 51, 51, 0.80);
margin-bottom: 27px;
font-family: "Muli";
font-weight: 300;
font-style: normal;
}

2 - Modèle d'appel standard via un lien dans la head de index.php (si ton template le permet) :

Un prévisualiseur des fonts dispos sur Google:
Google Fonts - Preview, Style & Use Top Google Fonts

404 Not Found

http://www.webtutorialplus.com/web-fonts/

**erkki** · 24/12/2013, 16h30

Re : Problème avec la fonte Infinity

J'ai fait quelques tests sans grand succés .... snifff !!!

Voici mes 2 petits fichiers qui me servent aux tests sur cette fonte ...

fichier index.php :
<?php
defined('_JEXEC') or die;
?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>Time</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Coming-soon" />
<meta name="keywords" content="Coming-soon" />
<meta name="author" content="Erkki" />
<link rel="stylesheet" type="text/css" href="css/style.css" charset="utf-8" />
</head>
<body>
<div class="count-subscribe">
<div class="container-narrow">
<div class="com-text"><h1> A venir</h1><p> Notre site internet est presque prêt pour vous </p></div>
</div>
</div>
</body>
</html>

fichier style.css :
/* Font
-------------------------------------------------- */

@import url(http://fonts.googleapis.com/css?fami...rl+Next+Door);
@import url(http://fonts.googleapis.com/css?family=Oxygen:400,300);
@font-face {
font-family: 'fonts/infinityregular';
src: url('fonts/infinity-webfont.eot');
src: url('fonts/infinity-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/infinity-webfont.woff') format('woff'),
url('fonts/infinity-webfont.ttf') format('truetype'),
url('fonts/infinity-webfont.svg#infinityregular') format('svg');
font-weight: normal;
font-style: normal;
}

body {
position: relative;
padding-top: 40px;
background: #fff;
}

h1,h2,p,body {
font-family: 'infinityregular';
color: #d4d3d3;
font-size:15px;
font-weight: normal;
}

.container-narrow {
margin: 0 auto;
max-width: 850px;
}

/* count-subscribe -------------------------------------------------- */

.count-subscribe{
margin: auto;
padding: 10px 0 10px 0;
}
.com-text{
padding-right: 10px;
}

.com-text h1 {
text-align:right;
font-size: 60px;
font-weight: 200;
line-height: 1;
letter-spacing: -1px;
color: #000;
font-family: 'infinityregular', sans-serif;
}
.com-text p {
text-align:right;
font-size: 15px;
font-weight: 200;
line-height: 2;
letter-spacing: -1px;
font-family: 'The Girl Next Door', cursive;
}

je ne comprends pas où est le problème ... pourquoi cette foutue fonte ne s'affiche pas du tout ...
Avec la démo de fontsquirrel concernant cette fonte lors de sa création (eot, ttf, svg) cela marche bien mais chez moi ... nada !!

Si quelqu'un pouvait prendre 2 petites minutes pour élucider cette barrière ce serait cool !
(je débutes dans joomla ... donc en dehors si j'ai commis des erreurs dites le moi ...)

**erkki** · 25/12/2013, 19h13

Re : Problème avec la fonte Infinity

J'ai trouvé ma solution à ce petit problème ....
Il s'agissait juste d'un problème de dossier

Je m'explique :
Si je laisses le fichier style.css avec les fontes dans le même dossier "css" ... cela marche très bien !
Si par contre je décides de mettre les fontes dans un dossier indépendant à l'intérieur du dossier "css" ou à l'extérieur ... cela ne marche pas !

pourtant je penses que mon path est bon au niveau écriture ... quelqu'un aurait-il un petit indice à me fournir ? j'ai peut-être fait une erreur quelque part sur mes chemins ? ... je suis un peu dans le doute !

**ghazal** · 25/12/2013, 21h09

Re : Problème avec la fonte Infinity

Ta démarche est un peu ... bizarre.
Tu peux faire tes tests sur les fonts hors joomla avec un format .html, pas de souci.
Mais dans joomla, il faut tenir compte :
* du template
* de la feuille CSS de ce template
La structure vers les CSS est généralement :
racine du site /templates/tontemplate/css/tafeuille.css

Avec les fonts dans le dossier CSS :
racine du site /templates/tontemplate/css/fonts/font.eot, etc ...

Imaginons un autre scénario :
les fonts dans un dossier "fonts" à la racine du template, chaque font dans son dossier à son nom:
Le path vers les fonts dans tafeuille.css, A PLACER EN HAUT :
@font-face {
font-family: 'MavenProRegular';
src: url('../fonts/maven_pro/maven_pro_regular-webfont.eot');
src: url('../fonts/maven_pro/maven_pro_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/maven_pro/maven_pro_regular-webfont.woff') format('woff'),
url('../fonts/maven_pro/maven_pro_regular-webfont.ttf') format('truetype'),
url('../fonts/maven_pro/maven_pro_regular-webfont.svg#MavenProRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Le template "master" de yootheme a un peu cette structure.

**jisse03** · 25/12/2013, 21h37

Re : Problème avec la fonte Infinity

Bonjour,

@ghazal
c'est aussi la structure @fontface des templates basés sur YJSG

**erkki** · 26/12/2013, 06h45

Re : Problème avec la fonte Infinity

@Ghazal: Merci pour ton aide !

Venant du monde de MorphOS/AmigaOS, les chemins sont gérés différemment ... mais bon, ça va le faire quand même

Je ferme ce thread car pour moi j'ai trouvé ma solution mais aussi l'endroit de mon code à surveiller pour que tout roule !

Bonne fête à vous tous et un bon réveillon !!

Problème avec la fonte Infinity

[RÉGLÉ] Problème avec la fonte Infinity

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association