Forcer l'intégration d'une police sur un site Internet
Résolu
crl22
Messages postés
14
Statut
Membre
-
crl22 Messages postés 14 Statut Membre -
crl22 Messages postés 14 Statut Membre -
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,
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
-
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;
} -
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... -
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 -
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,-
-
-
-
-
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,
-
