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

Résolu
crl22 Messages postés 9 Date d'inscription   Statut Membre Dernière intervention   -  
crl22 Messages postés 9 Date d'inscription   Statut Membre Dernière intervention   -
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,

A voir également:

4 réponses

Utilisateur anonyme
 
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;
}
2
crl22 Messages postés 9 Date d'inscription   Statut Membre Dernière intervention  
 
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...
0
inspiring Messages postés 1813 Date d'inscription   Statut Membre Dernière intervention   265
 
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
0
crl22 Messages postés 9 Date d'inscription   Statut Membre Dernière intervention  
 
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,
0
Utilisateur anonyme
 
Si tout n'est pas en Roboto c'est que tu as une autre font-family quelque part ;)
0
crl22 Messages postés 9 Date d'inscription   Statut Membre Dernière intervention  
 
Dans le CSS de ma page ?
0
Utilisateur anonyme
 
Oui, dans ton fichier css quoi.
0
crl22 Messages postés 9 Date d'inscription   Statut Membre Dernière intervention  
 
Je suis désolé mais je ne vois pas trop ce que tu veux dire...
0
crl22 Messages postés 9 Date d'inscription   Statut Membre Dernière intervention  
 
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,
0