Les polices sont souvent en OTF. Il se peut que Divi ne puisse les installer, d’où la technique suivante.
1 - Transformer les OTF en tous les autres formats (EOT, TTF, WOFF, WOFF2), grâce à https://onlinefontconverter.com
ou https://convertio.co/fr/otf-ttf (pas de WOFF2 ni de EOT disponibles)
ou https://everythingfonts.com/otf-to-eot (pour EOT)
2 - Ecrire ensuite dans la feuille CSS :
@font-face {
font-family: 'Core Mellow';
font-style: normal;
font-weight: normal; /* font-weight: 300; */
src: url('/wp-content/themes/Divi-child/fonts/core-mellow/Core-Mellow-55-Medium.otf') format('otf') ,
url('/wp-content/themes/Divi-child/fonts/core-mellow/converted-files/CoreMellow-Medium.eot') format('eot') ,
url('/wp-content/themes/Divi-child/fonts/core-mellow/converted-files/CoreMellow-Medium.woff') format('woff') ,
url('/wp-content/themes/Divi-child/fonts/core-mellow/converted-files/CoreMellow-Medium.woff2') format('woff2') ,
url('/wp-content/themes/Divi-child/fonts/core-mellow/converted-files/CoreMellow-Medium.ttf') format('truetype')
; /* woff, woff2 & ttf fctn sous Safari, mais ni otf, ni eot */
}
Pour un ensemble :
/* Light */
@font-face {
font-family: 'DinNextLTPro';
font-style: normal;
font-weight: 300;
src: url('https://baf.arsenal-productions.com/wp-content/themes/Divi-child/fonts/DinNextLTPro/DINNextLTPro-LightCondensed.otf') format('otf') ,
url('/wp-content/themes/Divi-child/fonts/DinNextLTPro/DINNextLTPro-LightCondensed.eot') format('eot') ,
url('/wp-content/themes/Divi-child/fonts/DinNextLTPro/DINNextLTPro-LightCondensed.woff') format('woff') ,
url('/wp-content/themes/Divi-child/fonts/DinNextLTPro/DINNextLTPro-LightCondensed.woff2') format('woff2') ,
url('/wp-content/themes/Divi-child/fonts/DinNextLTPro/DINNextLTPro-LightCondensed.ttf') format('truetype')
; /* woff, woff2 & ttf fctn sous Safari, mais ni otf, ni eot */
}
/* Normal */
@font-face {
font-family: 'DinNextLTPro';
font-style: normal;
font-weight: 400;
src: url('/wp-content/themes/Divi-child/fonts/DinNextLTPro/DINNextLTPro-Condensed.otf') format('otf') ,
url('/wp-content/themes/Divi-child/fonts/DinNextLTPro/DINNextLTPro-Condensed.eot') format('eot') ,
url('/wp-content/themes/Divi-child/fonts/DinNextLTPro/DINNextLTPro-Condensed.woff') format('woff') ,
url('/wp-content/themes/Divi-child/fonts/DinNextLTPro/DINNextLTPro-Condensed.woff2') format('woff2') ,
url('/wp-content/themes/Divi-child/fonts/DinNextLTPro/DINNextLTPro-Condensed.ttf') format('truetype')
; /* woff, woff2 & ttf fctn sous Safari, mais ni otf, ni eot */
}
Puis, en donnant le nom de la fonte à la classe du module, par ex. 'didot' pour un module Divi de texte :
.didot p {
font-family:Didot,Georgia,"Times New Roman",serif;
}
3 - Correspondances font-weight nombre/taille
https://developer.mozilla.org/fr/docs/Web/CSS/font-weight
/* Valeurs avec un mot-clé */
font-weight: normal;
font-weight: bold;
/* Valeurs numériques */
font-weight: 100; /* Thin (Hairline) */
font-weight: 200; /* Extra Light (Ultra Light) */
font-weight: 300; /* Light */
font-weight: 400; /* Normal */
font-weight: 500; /* Medium */
font-weight: 600; /* Semi Bold (Demi Bold) */
font-weight: 700; /* Bold */
font-weight: 800; /* Extra Bold (Ultra Bold) */
font-weight: 900; /* Black (Heavy) */
font-weight: 950; /* Extra Black (Ultra Black) */