Solution 1 :

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 true
  • underline({type="single", color=null}): Set the underline style and color
  • emphasisMark({type="dot"}): Set the emphasis mark style
  • color(color): Set the text color, using 6 hex characters for RRGGBB (no leading #)
  • size(halfPts): Set the font size, measured in half-points
  • font(name) or font({ascii, cs, eastAsia, hAnsi, hint}): Set the run’s font
  • style(name): Apply a named run style
  • characterSpacing(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.

Problem :

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?

By

Leave a Reply

Your email address will not be published. Required fields are marked *