code une police personnelle @font-face

a marqué ce sujet comme résolu.
Auteur du sujet

Bonjour, je suis débutant dans le domaine de CSS et je n’arrive pas à coder une police personnalisée avec @font-face… dans l’exercice du cv de openclassroom. Je ne trouve pas vraiment de police gratuite à télécharger et n’arrive pas à faire correspondre le code. Pourriez-vous m’aidez? Merci

+0 -0

Bonjour,

Tu peux t’inspirer d’un CSS existant, par exemple Roboto via Google Font : https://fonts.googleapis.com/css?family=Roboto.

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* [ ... ] */

Après tu demandes pour créer une police personnalisée … tu ne peux pas concrètement le réaliser avec du CSS. Il te faut à un moment donné un fichier binaire de font ttf / otf / woff2. Pour les icônes, je connais IcoMoon, il prend tes fichiers SVG et te le transforme dans un bundle type FontAwesome. Il doit sûrement exister ce genre de logiciel pour des fonts textuelles.

Édité par Yarflam

Tant de choses, tant de vies, tant de possibilités.

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte