I had the same issue.
From documentation the tag to change font is not fontFamily but simply font :
Run formatting
bold, italics, smallCaps, allCaps, strike, doubleStrike, subScript, superScript: Set the formatting property to trueunderline({type="single", color=null}): Set the underline style and coloremphasisMark({type="dot"}): Set the emphasis mark stylecolor(color): Set the text color, using 6 hex characters for RRGGBB (no leading #)size(halfPts): Set the font size, measured in half-pointsfont(name) or font({ascii, cs, eastAsia, hAnsi, hint}): Set the run’s fontstyle(name): Apply a named run stylecharacterSpacing(value): Set the character spacing adjustment (in TWIPs)
Here is a code sample:
new TextRun({
text: "Hello",
bold: true,
font: "Calibri"
})
Also make sure to use the latest version of docx.
I was using [email protected] and as soon as I upgraded to [email protected] I was able to change the font.
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/[email protected]/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?
