Polices personnelles

[ndubau]

Bonsoir,
Le site que je monte grâce à vos conseils est celui d'une association qui s'est donné une charte graphique. Bien entendu celle-ci inclut des polices (Komika, Bahamas...)
J'ai vu qu'il existait des plugins mais je ne sais s'ils concernent toutes polices ou seules celles appelées google-fonts..
Merci de vos conseils
Noël

[toffffe]

Re : Polices personnelles

Salut
Certain plusgin sont juste pour google font, tout dépend de l'extension. Tu peux aussi charger toi même ta police http://www.stylitek.com/tutoriel-joo...site-html.html

[ndubau]

Re : Polices personnelles

Bonjour,
J'avais vu sur le forum citation de cette possibilité d'inclure des fontes mais moins complète ; cependant j'ai besoin de compléments !

1. Création d'un dossier les recevant sur le serveur OK
2. l'inclusion de @font-face {....} doit-elle se faire dans quel fichier (css du template, ailleurs...) ?
3. même interrogation pour le code (dans lequel ce "orange" m'est mystérieux itou)

h1{
font-style: normal;
font-weight: bold;
font-family: "orange", Helvetica, Arial, sans-serif;
font-size:18px;
}

Merci de tes éclaircissements !
Noël

[toffffe]

Re : Polices personnelles

Je t'ai répondu dans les commentaires que tu as posté sous l'article

[ndubau]

Re : Polices personnelles

En attendant que cette réponse soit validée et donc consultable, j'ai mené de pair la piste de plugin et en particulier de PhocaFonts qui semblait apte à toutes polices.
J'ai réussi à installer deux polices de cette charte (Komika et Bahamas).
Tu comprendras facilement mon problème maintenant en regardant cette copie d'écran :
Ce dont j'ai besoin, est de n'avoir que le titre de l'article "bienvenue sur le site de de l'AD-PEP83" (pareil pour d'autres pages) dans Komika et le reste de la page en Bahamas (il est maintenant en Arial). Et je ne comprends pas l'erreur que j'ai commise pour que de temps en temps j'ai du Komika et d'autres fois de l'Arial
Et je ne trouve pas comment faire ! Vais poser la question chez Phoca mais si quelqu'un a la solution !
Merci
Noël
le site en réel est ici

[toffffe]

Re : Polices personnelles

Si j'en crois ton code, tu as mis ta police dans le html juste sur le "B" avec <span style="font-size: 12pt; font-family: Cambria;">

[ndubau]

Re : Polices personnelles

Deux points :

• Je réalise que 4f ne sont pas de trop pour deux sites et un Christophe et donc j'ai vu la réponse !
• En fait il faut que je me tienne aux formats prédéfinis dans Joomla, pour peu que je trouve la description de ce qu'ils sont réellement (paragraphe, div, Titre 1...et consorts) et à quoi ils correspondent body, H... Je me mets en quête !

Cordialement
Noël

[ndubau]

Re : Polices personnelles

J'ai poursuivi avec cette extension Phoca Font et je jubilais car aynat chargé mes fontes au format truetype (suffixées ttf) cela foctionnait parfaitement sur Mac mais bernique sur PC.
J'ai vu qu'il fallait (au moins pour IE) des fontes de type opentype suffixés eot ; j'ai chargé ces dernières qui m'ont écrasé au passage les ttf mais ne me donnent pas le rendu espéré sur PC !
Et sur Mac comme PC c'est toujours correct mais uniquement dans Chrome !
Je ne sais plus vers quelle solution me tourner manquant dans toutes de compétence !
Noël
Y aurait-il sur le forum un utilisateur de Phoca satisfait sur tous environnements ?

[c-line]

Re : Polices personnelles

Bonsoir, as-tu essayé http://www.fontsquirrel.com/tools/webfont-generator ? Ce générateur te permet de récupérer tout ce qu'il faut pour intégrer proprement une police personnalisée.
Tu uploade ton ou tes fichiers de polices puis tu récupères un zip contenant ta police convertie dans plusieurs formats (pour toutes les plateformes) ainsi qu'un exemple de css. Bien sûr il te reste ensuite à appliquer correctement la police dans le code de ton template ensuite

[ndubau]

Re : Polices personnelles

Bonjour,
C'est bien de ce générateur que j'avais fait usage. C'est ensuite cette intégration de code dans le css de Protostar qui m'est un domaine trop étranger avec ces @font-face et autres, qui m'avaient conduit à utiliser ces extensions (Cufon ou Phoca) pensant qu'elles automatiseraient !
Je réessaierai mais ce n'est pas gagné !
Merci
Noël

[c-line]

Re : Polices personnelles

Ok.
Le principe est simple.
Le plus facile est de déposer les fichiers de police dans le même dossier que la feuille de style qui les appellera.

On copie-colle toute la partie @font-face en tête d'un de fichier css du template, template.css par exemple :

@font-face {
    [B]font-family: 'nom_de_mapolice';[/B]
    src: url('nomde_mapolice.eot');
    src: url('nomdemapolice.eot?#iefix') format('embedded-opentype'),
         url('nomdemapolice.woff2') format('woff2'),
         url('nomdemapolice.woff') format('woff'),
         url('nomdemapolice.ttf') format('truetype'),
         url('nomdemapolice.svg#brady_bunch_remasteredregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

En suite tu utilises le code font-family: 'nom_de_mapolice';

A chaque fois que tu en as besoin.

Dans Protostar l'avantage c'est qu'il n'y a qu'un fichier CSS. Il faut rechercher toutes les instances de "font-familly".
Avec un éditeur de texte et la fonction "rechercher" ça devrait aller ;-)

Il faut alors distinguer ce que fait chaque classe CSS :

body {	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}

Celui ci va gérer le texte par défaut

h1,h2,h3,h4,h5,h6 {font-family: inherit;}

là, ce sont les titres
etc...

si on ne connait pas bien le CSS et le HTML, on teste, on envoie et si ça ne marche pas on revient en arrière.

Rajoute le font-familly sur les classes qui n'en comportent pas et que tu veux customiser, remplace les autres.

Dans Protostar, évite par contre de remplacer les font-family: 'IcoMoon';

[ndubau]

Re : Polices personnelles

Bonjour
Déjà merci du suivi !
Cela me semble plus précis pour un "nul" ; m'emploierai ce soir à le mettre en oeuvre et reviendrai pour les résultats sans doute.
Cordialement
Noël

[ndubau]

Re : Polices personnelles

Re,
Profitant d'un retard de rv j'ai procédé aux travaux pratiques
Travaillant en local, j'ai placé les polices dans le dossier css de protostar et modifié le fichier template.css selon (pensé-je) vos prescriptions... et chou blanc !
Je joins ce fichier template pour le soumettre à la correction (pas la fessée)
Merci et à ce soir
Noël
template.css.zip

[c-line]

Re : Polices personnelles

J'essaierai de regarder ce soir

[c-line]

Re : Polices personnelles

Précisions : quand tu dis que ça marche pas, rien ne se produit du tout ?

Déjà, il me semble (à vérifier) qu'il faut que @font-face soit au-dessus des règles. Là tu as une règle au-dessus.
Ensuite, tu as bien "Bahamas" qui est utilisée dans le body (donc à priori pour le texte courant) mais Komika nulle-part ailleurs donc celle-là il est logique de ne pas la voir.

Je viens de vérifier sur ton site.
En affichant template.css depuis ce dernier on voit bien bahamas dans la balise Body mais pas le @font-face. Renvoie ton fichier en ligne.