Css3 modifier la font

Je ne comprend pas. Si vous voulez vous passer des services Google il vous suffit d'utiliser les @font-face. Un grand classique quoi...

Bonjour,
si on a bien compris, tu ne veux plus aller chercher les polices chez Google. Tu y vas, pour la dernière fois, tu choisis la police qui te plaît et tu la télécharge au format .eot, .woff2, .ttf. Certains préconisent aussi le format svg. Tu installes tout ça à la racine de ton site (ou ailleurs) et tu indiques le chemin comme ça :

@font-face {
    font-family: 'PolicePerso';
   src: url('Satisfy-Regular.eot') format('eot');
   src: url('Satisfy-Regular.woff2') format('woff2'),
        url('Satisfy-Regular.ttf') format('truetype');   
   }

Là, j'avais choisi la police "Satisfy-Regular" et je l'avais nommée "PolicePerso". ensuite, il suffit de l'appeler avec

font-family: 'PolicePerso'

Il y a des tas d'options dans l'utilisation de @font-face.

Ouais...

font-style
font-variant
font-weight
font-size
line-height
font-family$
color
text-transform
text-decoration
letter-spacing
direction
word-spacing
text-shadow

+ quelques autres qui concerne les paragraphes. Mais bon en gros c'est ça quoi.

gotcha5832 a écrit :
Zut!!! le css ne fait pas le café… c'est pour ca que ce fait des années que je l'attends!

C'est bien dommage je suis d'accord, je vais monter une pétition pour CSS4 !

gotcha5832 a écrit :
font-weight existe de 100 à 900 mais ne sont supporté qu'en 2 valeurs (normal, bold)

Ca c'est lié a la police je crois. En gros quand tu crée une police tu peux mettre une multitude de variante pour prévoir toutes ces étapes : https://fonts.google.com/specimen/Montserrat

Et du coup dans ta déclaration font-face tu peux coller chaque variante a une valeur :

100 Thin (Hairline)
200 Extra Light (Ultra Light)
300 Light
400 Normal
500 Medium
600 Semi Bold (Demi Bold)
700 Bold
800 Extra Bold (Ultra Bold)
900 Black (Heavy)

Mais les polices de base n'ont défini que "bold" et "italic" (la plupart du temps) et du coup les fallback des valeurs correspondent simplement à regular et bold comme tu l'as vu.

Et si bold ne fait pas l'objet d'une police spéciale il me semble que c'est le navigateur qui la simule en forçant les contours (ca peut être crade du coup).

Ton rêve deviendra probablement bientôt bien plus disponible grâce au fontes variables.

C'est un vieux rêve de designer qu'on attends depuis des années: des police dont les dynamiques (graisses, chasse, etc.) sont dynamiques et vectorielles.

image: https://typekit.files.wordpress.com/2016/09/peace-type.gif?w=800&h=424

pour en savoir plus: https://blog.sevanova.com/cqfd/polices-variables-vers-nouvelle-ere-de-typo-web%E2%80%89/ par exemple

Si les polices le supportent depuis quelques années, le support arrive petit à petit dans nos navigateurs, mais c'est un peu tôt pour de la production (et les polices sont encore rares):

https://caniuse.com/#feat=variable-fonts

Voici un bac à sable pour tester:

https://www.axis-praxis.org