Estoy tratando de hacer una optimización de fuentes que se carga en 2 etapas. Pero con mi código a continuación, carga la fuente regular 'texto regular' en cursiva similar a la de 'texto en cursiva'. 'texto en negrita' funciona bien.
¿Qué ocurre?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title></title> <style> p {font-family: Roboto, Helvetica, serif; } </style> <link rel="preload" href=“./Roboto-Regular-kern-latin.woff2" type=font/woff2 as="font" crossorigin> <style> @font-face { font-family: Roboto; src: url(./Roboto-Regular-kern-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; } </style> <script> if("fonts" in document) { let regular = new FontFace(“Roboto”, "url(./Roboto-Regular.woff2) format('woff2')") let bold = new FontFace(“Roboto”, "url(./Roboto-Bold.woff2) format('woff2')", { weight: 700}) let italic = new FontFace("Roboto", "url(./Roboto-Italic.woff2) format('woff2')") Promise.all([regular.load(), bold.load(), italic.load()]).then(fonts => { fonts.forEach(font =>{ document.fonts.add(font) }) }) } </script> </head> <body> <p>regular text <br> <strong>bold text</strong> <br> <em>italic text</em> </p> </body> </html>Probablemente necesitará establecer el descriptor de style para la fuente en cursiva, como establece el peso para la negrita:
let italic = new FontFace( "Roboto", "url(./Roboto-Italic.woff2) format('woff2')", { style: "italic" }, );