I need to include a font (Open Sans) in a style tag within an iframe, That I inject dynamically in JS.
The font file is in a local folder. I want to use @font-face like this:
/* 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+ */
}
I create the Iframe like this:
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>
`;
I inject the iframe to an external domain, but the src URL is not working.
In the console I get the following warning:
Failed to decode downloaded font: https://external_domain_url/fonts/open-sans-v29-latin-600.woff
And of course, the font is not displaying as expected.
What am I doing wrong?
Any help would be appreciated!