Forcer l'intégration d'une police sur un site Internet

Résolu/Fermé
Messages postés
9
Date d'inscription
samedi 19 octobre 2013
Statut
Membre
Dernière intervention
18 octobre 2014
-
Messages postés
9
Date d'inscription
samedi 19 octobre 2013
Statut
Membre
Dernière intervention
18 octobre 2014
-
Bonjour à tous,

Je souhaite utiliser la police Roboto dans un site Internet mais celle-ci n'est pas prise en compte par un ordinateur classique, hormis si l'on possède la police sur son propre poste.

Comment faire pour forcer l'utilisation de cette police, comme le fait le site de surf de l'ASP World Tour par exemple ?

Merci d'avance,

4 réponses

Messages postés
2708
Date d'inscription
lundi 22 janvier 2007
Statut
Membre
Dernière intervention
20 avril 2016
969
Salut,

Facile, tu met la police en question sur ton FTP, puis tu déclare le chemin avec la fonction @font-face, exemple :

@font-face {
font-family: 'Roboto';
src: url('(racine_de_ton_ftp)/police/Roboto.tff');
}

Puis après au niveau du CSS ça se déclare normalement, exemple :

#roboto{
font-family: 'Roboto', sans-serif;
}
Messages postés
9
Date d'inscription
samedi 19 octobre 2013
Statut
Membre
Dernière intervention
18 octobre 2014

Voici le code source de ma page : view-source:http://www.usmeilleraiefoot.fr/

J'ai essayé une intégration via la font Google mais ça n'a pas l'air concluant...
Messages postés
1811
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
266
Bonjour,

ça fonctionne, tu es bien en Roboto.
Par contre ton code est trop lourd. Tu n'as pas besoin d'appeller font-family dans chaque règle css, juste dans l'élément parent.
Tu as des règles CSS dupliqué (surement entre code du head et feuille externe)

Ecrit et assumé par Inspiring - copyright 2009-2014
Messages postés
9
Date d'inscription
samedi 19 octobre 2013
Statut
Membre
Dernière intervention
18 octobre 2014

Parfait, ça fonctionne pour la police Roboto !

Par contre, j'ai une partie en Roboto Cn qui n'est pas prise en compte. Saurais-tu comment faire pour l'intégrer elle aussi ?

Merci d'avance,
Messages postés
2708
Date d'inscription
lundi 22 janvier 2007
Statut
Membre
Dernière intervention
20 avril 2016
969
Si tout n'est pas en Roboto c'est que tu as une autre font-family quelque part ;)
Messages postés
9
Date d'inscription
samedi 19 octobre 2013
Statut
Membre
Dernière intervention
18 octobre 2014

Dans le CSS de ma page ?
Messages postés
2708
Date d'inscription
lundi 22 janvier 2007
Statut
Membre
Dernière intervention
20 avril 2016
969
Oui, dans ton fichier css quoi.
Messages postés
9
Date d'inscription
samedi 19 octobre 2013
Statut
Membre
Dernière intervention
18 octobre 2014

Je suis désolé mais je ne vois pas trop ce que tu veux dire...
Messages postés
9
Date d'inscription
samedi 19 octobre 2013
Statut
Membre
Dernière intervention
18 octobre 2014

Voici le code de mon fichier CSS :


@charset "UTF-8";
*|* {
}
*|img {
border-style: none;
}
*|body {
margin: 0;
padding: 0;
font-family: Roboto;
background-color: #ffffff;
}
*|#page {
}
*|#page-header {
border-bottom: 1px solid black;
padding-top: 1em;
padding-bottom: 1em;
width: 100%;
text-align: center;
background-image: url(../img/header-background.png);
background-repeat: repeat-x;
}
*|#page-header-body {
width: 900px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
*|#page-header *|.title {
color: white;
font-size: 4em;
font-weight: bold;
}
*|#page-header *|p {
font-size: 1.2em;
}
*|#page-body {
margin: 1em auto;
width: 900px;
text-align: left;
}
*|#page-footer {
width: 100%;
padding-top: 1.5em;
padding-bottom: 1em;
text-align: center;
float: left;
}
*|#page-footer-body {
width: 900px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 0.8em;
}
*|#volver {
float: right;
padding-left: 24px;
background-image: url(../img/back.png);
background-repeat: no-repeat;
background-position: 0 center;
line-height: 24px;
font-size: 1.2em;
}
*|#volver *|a {
text-decoration: none;
}
*|pre.escaped {
padding: 12px 10px;
overflow: auto;
display: block;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
background-color: #f9f9f9;
font-size: 12px;
}


Remarques-tu certaines anomalies au niveau des polices ?

Merci,