Necesito incluir una fuente (Open Sans) en una etiqueta de estilo dentro de un iframe, que inyecto dinámicamente en JS.
El archivo de fuente está en una carpeta local. Quiero usar @font-face así:
/* open-sans-regular - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local(''), url('../fonts/open-sans-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url('../fonts/open-sans-v29-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ }Creo el iframe así:
const frame = document.createElement('iframe'); overlay.srcdoc = ` <!doctype html> <html> <head> <style> /* open-sans-regular - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local(''), url('../fonts/open-sans-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url('../fonts/open-sans-v29-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ } /* open-sans-600 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: local(''), url('../fonts/open-sans-v29-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url('../fonts/open-sans-v29-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ } .example{ font-family: 'Open Sans'; } </style> </head> <body> <div id="example"> bla bla bla </div> </body> `;Inyecto el iframe en un dominio externo, pero la URL src no funciona.
En la consola me sale la siguiente advertencia:
Failed to decode downloaded font: https://external_domain_url/fonts/open-sans-v29-latin-600.woffY, por supuesto, la fuente no se muestra como se esperaba.
¿Qué estoy haciendo mal?
¡Cualquier ayuda sería apreciada!