# Custom font canvas

**URL:** <https://discuss.elastic.co/t/custom-font-canvas/271265>\
**Category:** Kibana\
**Tags:** canvas\
**Created:** [April 26, 2021, 2:14pm UTC](https://discuss.elastic.co/t/custom-font-canvas/271265 "2021-04-26T14:14:52Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![accateo](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/accateo/32/85332_2.png) [@accateo](https://discuss.elastic.co/u/accateo)\
**Post date:** [April 26, 2021, 2:14pm UTC](https://discuss.elastic.co/t/custom-font-canvas/271265/1 "2021-04-26T14:14:53Z")

</div>

hi,  
how can I add custom font in Canvas?  
Thanks

---

<div class="post-metadata">

**Author:** ![Felix\_Roessel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/felix_roessel/32/41623_2.png) [@Felix\_Roessel](https://discuss.elastic.co/u/Felix_Roessel)\
**Post date:** [April 26, 2021, 3:55pm UTC](https://discuss.elastic.co/t/custom-font-canvas/271265/2 "2021-04-26T15:55:19Z")

</div>

You could use CSS for that. E.g. using global CSS override if you would like to have it in every slide.

---

<div class="post-metadata">

**Author:** ![accateo](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/accateo/32/85332_2.png) [@accateo](https://discuss.elastic.co/u/accateo)\
**Post date:** [April 26, 2021, 8:22pm UTC](https://discuss.elastic.co/t/custom-font-canvas/271265/3 "2021-04-26T20:22:28Z")

</div>

where exactly?

---

<div class="post-metadata">

**Author:** ![Felix\_Roessel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/felix_roessel/32/41623_2.png) [@Felix\_Roessel](https://discuss.elastic.co/u/Felix_Roessel)\
**Post date:** [April 27, 2021, 3:51am UTC](https://discuss.elastic.co/t/custom-font-canvas/271265/4 "2021-04-27T03:51:47Z")

</div>

Will test it later today and send you you a Screenshot

---

<div class="post-metadata">

**Author:** ![Felix\_Roessel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/felix_roessel/32/41623_2.png) [@Felix\_Roessel](https://discuss.elastic.co/u/Felix_Roessel)\
**Post date:** [April 27, 2021, 8:57am UTC](https://discuss.elastic.co/t/custom-font-canvas/271265/5 "2021-04-27T08:57:52Z")

</div>

In the global css overrides you need to add the new font face like this  
 ![image](https://us1.discourse-cdn.com/elastic/original/3X/a/e/ae95a3b267f712a7661c4de69a5a61fbd21a6213.png)

Then you can access the new font family in all the css classes.  
I added it only for one specific markdown element like this

![image](https://us1.discourse-cdn.com/elastic/original/3X/6/f/6f2acdda2b6af3a46f50bdf0964a385729f21a7f.png)

---

<div class="post-metadata">

**Author:** ![accateo](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/accateo/32/85332_2.png) [@accateo](https://discuss.elastic.co/u/accateo)\
**Post date:** [April 27, 2021, 1:28pm UTC](https://discuss.elastic.co/t/custom-font-canvas/271265/6 "2021-04-27T13:28:05Z")

</div>

Does it work also with markdown content and result from query...like this:

```auto
{{#each rows}}
### [{{customer}}](https://i-o-optimized-deployment-a06169.kb.europe-west1.gcp.cloud.es.io:9243/app/canvas#/workpad/workpad-20cc3824-8efa-4c26-826a-e29ef088ed6f/page/1?__fullscreen=true) ###
{{/each}}

```

---

<div class="post-metadata">

**Author:** ![Felix\_Roessel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/felix_roessel/32/41623_2.png) [@Felix\_Roessel](https://discuss.elastic.co/u/Felix_Roessel)\
**Post date:** [April 28, 2021, 4:02am UTC](https://discuss.elastic.co/t/custom-font-canvas/271265/7 "2021-04-28T04:02:07Z")

</div>

Yes but ### is creating an h3 tag.. so you need to change p to h3 in the CSS.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [May 26, 2021, 4:03am UTC](https://discuss.elastic.co/t/custom-font-canvas/271265/8 "2021-05-26T04:03:09Z")

</div>

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