Adobe user can use adobe font in the web.
Adobe give the css code for that.
How i can use it on ZIM ?
1 Like
I found that solotion, its now perfect becuse ZIM load after the fonts, but that work.
@abstract that possible with assetsLoaders?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZIM with Adobe Fonts</title>
<style>
@import url("https://p.typekit.net/p.css?s=1&k=pre7esr&ht=tk&f=32227.32231.32232&a=89860586&app=typekit&e=css");
@font-face {
font-family:"din-2014 light";
src:url("https://use.typekit.net/af/35b7e6/00000000000000007735afe4/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/35b7e6/00000000000000007735afe4/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/35b7e6/00000000000000007735afe4/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:300;font-stretch:normal;
}
@font-face {
font-family:"din-2014";
src:url("https://use.typekit.net/af/c2b6e5/00000000000000007735afee/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/c2b6e5/00000000000000007735afee/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/c2b6e5/00000000000000007735afee/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}
@font-face {
font-family:"din-2014 bold";
src:url("https://use.typekit.net/af/1fe1ce/00000000000000007735aff6/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/1fe1ce/00000000000000007735aff6/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/1fe1ce/00000000000000007735aff6/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}
@font-face {
font-family:"din-2014 extraBold";
src:url("https://use.typekit.net/af/dc88f0/00000000000000007735aff7/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff2"),url("https://use.typekit.net/af/dc88f0/00000000000000007735aff7/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff"),url("https://use.typekit.net/af/dc88f0/00000000000000007735aff7/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:800;font-stretch:normal;
}
</style>
<script src="https://zimjs.org/cdn/1.4.1/createjs.js"></script>
<script src="https://zimjs.org/cdn/016/zim_min.js"></script>
</head>
<body>
<script>
// Wait for the fonts to load
document.fonts.ready.then(() => {
// Create a stage by getting a reference to the canvas
// See Docs under Frame for FIT, FILL, FULL, and TAG
const frame = new Frame(FIT, 1024, 768, light, dark);
frame.on("ready", () => {
const stage = frame.stage;
let stageW = frame.width;
let stageH = frame.height;
// put your code here
new Label({text:"Hello Ami",font:"din-2014 light",color:red}).center();
new Label({text:"Hello Ami",font:"din-2014",color:red}).center().mov(0,100);
new Label({text:"Hello Ami",font:"din-2014 bold",color:red}).center().mov(0,200);
new Label({text:"Hello Ami",font:"din-2014 extraBold",color:red}).center().mov(0,300);
}); // end ready
});
</script>
</body>
</html>
I try to load it witeout css like that, but its not show the font even after the fonts load
the createjs Text get the font in that example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZIM with Adobe Fonts</title>
<script src="https://zimjs.org/cdn/1.4.1/createjs.js"></script>
<script src="https://zimjs.org/cdn/016/zim_min.js"></script>
</head>
<body>
<script>
// Define the CSS for the fonts
const fontCSS = `
@import url("https://p.typekit.net/p.css?s=1&k=pre7esr&ht=tk&f=32227.32231.32232&a=89860586&app=typekit&e=css");
@font-face {
font-family: "din-2014 light";
src: url("https://use.typekit.net/af/35b7e6/00000000000000007735afe4/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),
url("https://use.typekit.net/af/35b7e6/00000000000000007735afe4/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),
url("https://use.typekit.net/af/35b7e6/00000000000000007735afe4/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
font-display: auto; font-style: normal; font-weight: 300; font-stretch: normal;
}
@font-face {
font-family: "din-2014";
src: url("https://use.typekit.net/af/c2b6e5/00000000000000007735afee/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),
url("https://use.typekit.net/af/c2b6e5/00000000000000007735afee/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),
url("https://use.typekit.net/af/c2b6e5/00000000000000007735afee/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display: auto; font-style: normal; font-weight: 400; font-stretch: normal;
}
@font-face {
font-family: "din-2014 bold";
src: url("https://use.typekit.net/af/1fe1ce/00000000000000007735aff6/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),
url("https://use.typekit.net/af/1fe1ce/00000000000000007735aff6/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),
url("https://use.typekit.net/af/1fe1ce/00000000000000007735aff6/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
font-display: auto; font-style: normal; font-weight: 700; font-stretch: normal;
}
@font-face {
font-family: "din-2014 extraBold";
src: url("https://use.typekit.net/af/dc88f0/00000000000000007735aff7/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff2"),
url("https://use.typekit.net/af/dc88f0/00000000000000007735aff7/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff"),
url("https://use.typekit.net/af/dc88f0/00000000000000007735aff7/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("opentype");
font-display: auto; font-style: normal; font-weight: 800; font-stretch: normal;
}
`;
setTimeout(()=>{
// Create a style element
const style = document.createElement('style');
// Set the CSS content
style.innerHTML = fontCSS;
// Append the style element to the head
document.head.appendChild(style);
// Wait for the fonts to load
document.fonts.ready.then(() => {
zog("font ready");
makeFont();
S.update();
});
},1000)
var stage
const frame = new Frame(FIT, 1024, 768, light, dark);
frame.on("ready", () => {
stage = frame.stage;
let stageW = frame.width;
let stageH = frame.height;
// put your code here
}); // end ready
function makeFont()
{
new Label({ text: "Hello Ami", font: "din-2014 light", color: red }).center();
new Label({ text: "Hello Ami", font: "din-2014", color: red }).center().mov(0, 100);
new Label({ text: "Hello Ami", font: "din-2014 bold", color: red }).center().mov(0, 200);
new Label({ text: "Hello Ami", font: "din-2014 extraBold", color: red }).center().mov(0, 300);
S.update();
const textLight = new createjs.Text("Hello, CreateJS! (Light)", "300 40px din-2014 light", "#000000");
textLight.x = 100;
textLight.y = 100;
stage.addChild(textLight);
}
</script>
</body>
</html>
Ticker.always(true) fix that 