# Can pdfjs.express load fonts that are not installed on a computer, and write annotations with them? **URL:** \ **Category:** Technical Support\ **Created:** [April 19, 2024, 2:58am UTC](https://pdfjs.community/t/can-pdfjs-express-load-fonts-that-are-not-installed-on-a-computer-and-write-annotations-with-them/3231 "2024-04-19T02:58:12Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![hiraki](https://avatars.discourse-cdn.com/v4/letter/h/53a042/32.png) [@hiraki](https://pdfjs.community/u/hiraki)\ **Post date:** [April 19, 2024, 2:58am UTC](https://pdfjs.community/t/can-pdfjs-express-load-fonts-that-are-not-installed-on-a-computer-and-write-annotations-with-them/3231/1 "2024-04-19T02:58:12Z")
**Which product are you using?** PDF.js Express Plus **PDF.js Express Version** 8.7.4 **Detailed description of issue** Are there any functionalities that, webviewer load fonts that are not installed on client, and use the fonts to write annotations? **Expected behaviour** What we want to achieve is, add font to webviewer e.g. Noto Sans JP, and write annotations with them on any device. **Does your issue happen with every document, or just one?** n/a **Link to document** n/a **Code snippet** What we tried is below. ```javascript instance.Fonts.addAnnotationFont('Noto Sans JP'); ``` But when writing annotations on devices which Noto Sans JP is not installed, shown annotations are not Noto Sans JP. So, we tried loading fonts using links as below, which did not work. ```javascript ``` ---
**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\ **Post date:** [April 19, 2024, 5:00pm UTC](https://pdfjs.community/t/can-pdfjs-express-load-fonts-that-are-not-installed-on-a-computer-and-write-annotations-with-them/3231/3 "2024-04-19T17:00:42Z")
Hi there, You can use setCustomFontURL API to request font resources: [https://pdfjs.express/api/Core.html#.setCustomFontURL\_\_anchor](https://pdfjs.express/api/Core.html#.setCustomFontURL__anchor) See this forum post for similar issue: > [@Not reading the font on the PDF](https://pdfjs.community/t/not-reading-the-font-on-the-pdf/2529): > > Which product are you using? PDF.js Express Viewer PDF.js Express Version 8.7.0 Detailed description of issue I have a problem with the font on Firefox browser, and on Chrome and Edge it shows an error for the font in the console, but still displays the font correctly. Can I replace the font on browsers that don’t read a certain font to display it with another font and display the text nicely on the PDF?" Expected behaviour To display the text nicely on the PDF, and not showing some chara… Best regards, Kevin Kim ---
**Author:** ![hiraki](https://avatars.discourse-cdn.com/v4/letter/h/53a042/32.png) [@hiraki](https://pdfjs.community/u/hiraki)\ **Post date:** [April 22, 2024, 7:09am UTC](https://pdfjs.community/t/can-pdfjs-express-load-fonts-that-are-not-installed-on-a-computer-and-write-annotations-with-them/3231/4 "2024-04-22T07:09:29Z")
Hi Kevin, Thank you for your response. I tried setting a custom font using below code, but the annotation was not written in the set font. After the setCustomFontURL was called and webviewer was initialized, no error was given in the browser’s console. Moreover, looking at the browser’s network tab, there was no request from webpage to the customFontUrl. Do you see any mistake on my code? ```javascript WebViewer({ path: publicPath, initialDoc: inlineUrl, licenseKey: licenseKey, css: cssPass}, element) .then((instance) => { instance.Core.setCustomFontURL('mypath.../webfonts/NotoSansJP-Regular.ttf'); instance.Fonts.addAnnotationFont('Noto Sans JP'); ``` Kind regards, hiraki ---
**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\ **Post date:** [April 22, 2024, 7:09pm UTC](https://pdfjs.community/t/can-pdfjs-express-load-fonts-that-are-not-installed-on-a-computer-and-write-annotations-with-them/3231/5 "2024-04-22T19:09:12Z")
Hi there, The Fonts class is under the UI namespace: [https://pdfjs.express/api/UI.Fonts.html](https://pdfjs.express/api/UI.Fonts.html) I am able to use google’s Roboto Mono font using the following: ```javascript instance.Core.setCustomFontURL('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap'); instance.UI.Fonts.addAnnotationFont("Roboto Mono"); ``` ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/8/882d76c2952008b56e981a7b625754ac3bd415ae.jpeg) Best regards, Kevin Kim ---
**Author:** ![hiraki](https://avatars.discourse-cdn.com/v4/letter/h/53a042/32.png) [@hiraki](https://pdfjs.community/u/hiraki)\ **Post date:** [April 23, 2024, 1:34am UTC](https://pdfjs.community/t/can-pdfjs-express-load-fonts-that-are-not-installed-on-a-computer-and-write-annotations-with-them/3231/6 "2024-04-23T01:34:50Z")
Hi Kevin, Your freetext doesn’t look like its written in Roboto Mono font. Maybe some alternative font is being used by the viewer, or the Roboto Mono font is not loaded? Would you please check if there’s any solution for this? ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/0/03e2be38c7a8d39d8c0071b94e915383dfc2faab.png) > **[Roboto Mono - Google Fonts](https://fonts.google.com/specimen/Roboto+Mono/tester?preview.text=Roboto%20Mono)** > > Roboto Mono is a monospaced addition to the Roboto type family. Like the other members of the Roboto family, the fonts are optimized for readability on screens Kind regards, hiraki ---
**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\ **Post date:** [April 24, 2024, 6:20pm UTC](https://pdfjs.community/t/can-pdfjs-express-load-fonts-that-are-not-installed-on-a-computer-and-write-annotations-with-them/3231/7 "2024-04-24T18:20:05Z")
Hi there, This is actually expected and is required by the host machine to have the font installed. This is why the font was not working on my end. You can read a similar guide here about embedded fonts and how pdf.js will substitute with the closest font (note that this guide is for Apryse WebViewer): > **[Embedded-fonts | Apryse Documentation](https://docs.apryse.com/documentation/web/guides/extraction/embedded-fonts/#about-embedded-fonts)** > > World's #1 PDF SDK Library for Web, Mobile, Server, Desktop Best regards, Kevin Kim