I am a student and a learner. I am trying to make a new web app using JavaScript for the first time but I am not able to add my font or change the font in my word document generated by JavaScript. here is my code:
doc.addSection({
properties: {},
children: [
new docx.Paragraph({
children: [
new docx.TextRun({
text: x,
bold: true,
**fontFamily: 'Myfont',**
Here the fontFamily is showing error:
}),
],
}),
],
});
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/docx@5.0.2/build/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
@font-face {
font-family: Myfont;
src: url('Myfont2-Regular.ttf');
}
h1 {
font-family: Myfont, sans-serif;
}
</style>
</head>
<body>
<h1>This is my first word document!</h1>
<input type="text" placeholder="Type something..." id="myInput">
<button type="button" onclick="generate()">Click to generate document</button>
<script>
function generate() {
const doc = new docx.Document();
var x = document.getElementById('myInput').value;
doc.addSection({
properties: {},
children: [
new docx.Paragraph({
children: [
new docx.TextRun({
text: x,
bold: true,
fontFamily: 'Myfont',
}),
],
}),
],
});
docx.Packer.toBlob(doc).then(blob => {
console.log(blob);
saveAs(blob, "mydocument.docx");
console.log("Document created successfully");
});
}
</script>
</body>
</html>Is there another syntax too so that I can style my word page format?