# Adding a new font as ttf file

**URL:** <https://discourse.nodered.org/t/adding-a-new-font-as-ttf-file/78628>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, function-node\
**Created:** [23 May 2023 08:22 UTC](https://discourse.nodered.org/t/adding-a-new-font-as-ttf-file/78628 "2023-05-23T08:22:45Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![okircali](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/okircali/32/79791_2.png) [@okircali](https://discourse.nodered.org/u/okircali)\
**Post date:** [23 May 2023 08:22 UTC](https://discourse.nodered.org/t/adding-a-new-font-as-ttf-file/78628/1 "2023-05-23T08:22:45Z")

</div>

Hello,

I would like to add a new font in order to use it on template node in html. I have a .ttf file and would like to import it to nodered. Could you please let me know If there is any method to do that?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 May 2023 08:28 UTC](https://discourse.nodered.org/t/adding-a-new-font-as-ttf-file/78628/2 "2023-05-23T08:28:49Z")

</div>

The ui\_template node has a setting to load code into the `head` of the Dashboard page and that would be the best place to load the font I think.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [23 May 2023 10:31 UTC](https://discourse.nodered.org/t/adding-a-new-font-as-ttf-file/78628/3 "2023-05-23T10:31:31Z")

</div>

Put something like this into a ui\_template node, set template type to " **added to site head section**"

```auto
<style>
    @font-face {
        font-family: LCDBOLD; 
        src: url("/fonts/LCDBOLD.ttf");
    }
    
</style>

```

---

<div class="post-metadata">

**Author:** ![okircali](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/okircali/32/79791_2.png) [@okircali](https://discourse.nodered.org/u/okircali)\
**Post date:** [23 May 2023 12:20 UTC](https://discourse.nodered.org/t/adding-a-new-font-as-ttf-file/78628/4 "2023-05-23T12:20:58Z")

</div>

I did this but still cannot see my font when trying to use in font-family field on any html.

---

<div class="post-metadata">

**Author:** ![okircali](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/okircali/32/79791_2.png) [@okircali](https://discourse.nodered.org/u/okircali)\
**Post date:** [23 May 2023 12:45 UTC](https://discourse.nodered.org/t/adding-a-new-font-as-ttf-file/78628/5 "2023-05-23T12:45:30Z")

</div>

I am trying to send a mail and I have prepared a template node (not ui\_template) with an html and trying to use my font for mail strings

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 May 2023 13:14 UTC](https://discourse.nodered.org/t/adding-a-new-font-as-ttf-file/78628/6 "2023-05-23T13:14:10Z")

</div>

Not all mail services support external fonts I don't believe. Check to make sure that the received message actually still includes the font, I expect it won't.

---

<div class="post-metadata">

**Author:** ![okircali](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/okircali/32/79791_2.png) [@okircali](https://discourse.nodered.org/u/okircali)\
**Post date:** [23 May 2023 13:21 UTC](https://discourse.nodered.org/t/adding-a-new-font-as-ttf-file/78628/7 "2023-05-23T13:21:33Z")

</div>

The received mail has the font name but not its style. The style still calibri but font name is what I entered to templete node.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 May 2023 16:39 UTC](https://discourse.nodered.org/t/adding-a-new-font-as-ttf-file/78628/8 "2023-05-23T16:39:26Z")

</div>

To me, that implies that the mail client has ignored the font specification. You may wish to check with the vendor of the client as to whether they support external fonts. Typically the mail client will block all external requests in an email because too many unscrupulous organisations use such calls to track people.

You can sometimes work around that by making the resource into a data link but that would make all of your emails super large. I use that trick though to embed a small BCS logo into my professional emails.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [23 May 2023 22:38 UTC](https://discourse.nodered.org/t/adding-a-new-font-as-ttf-file/78628/9 "2023-05-23T22:38:49Z")

</div>

I thought you wanted to use it within node red.

If you are sending a html format email then the email client cannot access the font from node red.

Even if the mail client would allow to use it, the font would still need to be hosted online, for it to be downloaded.

there is a good guide here - [Web Fonts: How to Make Them Work Perfectly in Email - Litmus](https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 May 2023 22:49 UTC](https://discourse.nodered.org/t/adding-a-new-font-as-ttf-file/78628/10 "2023-05-23T22:49:11Z")

</div>

Really, just don't do it. If you use an external link, it won't work on most clients anyway and even those where it might work will probably block it and if even that works, you are leaking your recipients info to the host of the font.

You should not be putting any external links into emails without letting the recipients clearly understand what you are doing.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [23 May 2023 22:53 UTC](https://discourse.nodered.org/t/adding-a-new-font-as-ttf-file/78628/11 "2023-05-23T22:53:40Z")

</div>

I was just going to post this as an example of why its not worth it, but figured that its better to read it and come to that conclusion yourself 😉

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/f/0f8f986141a4cc59a505703ee0038eba6284e796.png)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 May 2023 22:57 UTC](https://discourse.nodered.org/t/adding-a-new-font-as-ttf-file/78628/12 "2023-05-23T22:57:01Z")

</div>

Interesting that the supposed privacy minded Apple are the only ones to allow such a potential privacy leak!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [22 July 2023 22:57 UTC](https://discourse.nodered.org/t/adding-a-new-font-as-ttf-file/78628/13 "2023-07-22T22:57:36Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.