# Adding Custom fonts

**URL:** <https://forum.bubble.io/t/adding-custom-fonts/7475>\
**Category:** Plugins\
**Created:** [October 31, 2016, 12:33pm UTC](https://forum.bubble.io/t/adding-custom-fonts/7475 "2016-10-31T12:33:44Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![twitter](https://avatars.discourse-cdn.com/v4/letter/t/b4bc9f/32.png) [@twitter](https://forum.bubble.io/u/twitter)\
**Post date:** [October 31, 2016, 12:33pm UTC](https://forum.bubble.io/t/adding-custom-fonts/7475/1 "2016-10-31T12:33:45Z")

</div>

Hello people,

I’am stuck at a very very important step, i need to add a custom font but the font isn’t available anywhere on the web to copy the css file path. It is really important for me to get that particular font i have it on my local computer downloaded so i have the .otf - .ttf - .woff

It would be very helpful if i give the font here so someone can generate a css path for me to add the font.

Thanks in advance

Best Regards,  
Talha

---

<div class="post-metadata">

**Author:** ![emmanuel](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/emmanuel/32/27657_2.png) [@emmanuel](https://forum.bubble.io/u/emmanuel)\
**Post date:** [October 31, 2016, 1:30pm UTC](https://forum.bubble.io/t/adding-custom-fonts/7475/2 "2016-10-31T13:30:28Z")

</div>

You can store them on Bubble’s storage if you want. upload the files with the file uploader and copy the URL that is returned.

---

<div class="post-metadata">

**Author:** ![twitter](https://avatars.discourse-cdn.com/v4/letter/t/b4bc9f/32.png) [@twitter](https://forum.bubble.io/u/twitter)\
**Post date:** [October 31, 2016, 1:34pm UTC](https://forum.bubble.io/t/adding-custom-fonts/7475/3 "2016-10-31T13:34:28Z")

</div>

Hi Emmanuel,

Thanks for your reply, i uploaded the .otf font here: [https://mobilevikingsbe.bubbleapps.io/version-test?debug\_mode=true](https://mobilevikingsbe.bubbleapps.io/version-test?debug_mode=true)

But i dont know where i can get the css file path now?

Thanks alot.

---

<div class="post-metadata">

**Author:** ![emmanuel](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/emmanuel/32/27657_2.png) [@emmanuel](https://forum.bubble.io/u/emmanuel)\
**Post date:** [October 31, 2016, 1:35pm UTC](https://forum.bubble.io/t/adding-custom-fonts/7475/4 "2016-10-31T13:35:18Z")

</div>

When you upload a file, if you display the input’s value next to it, the file path appears.

---

<div class="post-metadata">

**Author:** ![twitter](https://avatars.discourse-cdn.com/v4/letter/t/b4bc9f/32.png) [@twitter](https://forum.bubble.io/u/twitter)\
**Post date:** [October 31, 2016, 1:36pm UTC](https://forum.bubble.io/t/adding-custom-fonts/7475/5 "2016-10-31T13:36:59Z")

</div>

I did it and pasted this in to the CSS File Path: [http://s3.amazonaws.com/appforest\_uf/f1477920942300x920227607944980200/CircularStd\_Bold.otf](http://s3.amazonaws.com/appforest_uf/f1477920942300x920227607944980200/CircularStd_Bold.otf)

Without any result the font isn’t recognized.

---

<div class="post-metadata">

**Author:** ![emmanuel](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/emmanuel/32/27657_2.png) [@emmanuel](https://forum.bubble.io/u/emmanuel)\
**Post date:** [October 31, 2016, 1:38pm UTC](https://forum.bubble.io/t/adding-custom-fonts/7475/6 "2016-10-31T13:38:34Z")

</div>

You need to create the CSS file. You first upload the font files, and then create the CSS file with these path, and then upload this file and paste this.

The file you’ve just uploaded isn’t CSS.

If you search the forum you’ll see some threads, but keep in mind this is a bit technical.

---

<div class="post-metadata">

**Author:** ![twitter](https://avatars.discourse-cdn.com/v4/letter/t/b4bc9f/32.png) [@twitter](https://forum.bubble.io/u/twitter)\
**Post date:** [October 31, 2016, 1:40pm UTC](https://forum.bubble.io/t/adding-custom-fonts/7475/7 "2016-10-31T13:40:24Z")

</div>

Thanks alot well since i don’t have any technical experience i’am currently stuck maybe someone can do it for me that would be amazing and very helpful

---

<div class="post-metadata">

**Author:** ![Macchiato](https://avatars.discourse-cdn.com/v4/letter/m/df788c/32.png) [@Macchiato](https://forum.bubble.io/u/Macchiato)\
**Post date:** [October 31, 2016, 4:42pm UTC](https://forum.bubble.io/t/adding-custom-fonts/7475/8 "2016-10-31T16:42:12Z")

</div>

I haven’t been able to get these to work on Safari. Any idea?

---

<div class="post-metadata">

**Author:** ![scottb50](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/scottb50/32/9334_2.png) [@scottb50](https://forum.bubble.io/u/scottb50)\
**Post date:** [January 13, 2017, 5:01pm UTC](https://forum.bubble.io/t/adding-custom-fonts/7475/9 "2017-01-13T17:01:43Z")

</div>

Found this helpful re fonts

> **[The best way to serve fonts to your website | Webdesigner Depot](https://www.webdesignerdepot.com/2014/03/the-best-way-to-serve-fonts-to-your-website/)**
>
> Web design came of age the day webfonts entered wide-spread usage. Prior to that point it's arguable that we were less designers than engineers. However, the enthusiasm with which we've grabbed at font options in web design has lead to a bewildering...

---

<div class="post-metadata">

**Author:** ![Tikka\_02](https://avatars.discourse-cdn.com/v4/letter/t/839c29/32.png) [@Tikka\_02](https://forum.bubble.io/u/Tikka_02)\
**Post date:** [July 3, 2020, 12:11am UTC](https://forum.bubble.io/t/adding-custom-fonts/7475/10 "2020-07-03T00:11:51Z")

</div>

Hi All,

I want to use a custom font for my app and it works fine on Google Chrome on Windows but doesn’t seem to work on Google Chrome on Mac.

The custom font I am using is - Circular Std. I have added images to show the difference:

On Windows Google Chrome:  
 ![image](https://us1.discourse-cdn.com/bubble/original/3X/b/7/b77c8a5dbe84360d056c02d28049ba29345e928e.png)

On Mac Google Chrome:  
 ![image](https://us1.discourse-cdn.com/bubble/original/3X/5/b/5b9c484f311544c8763cd5baac1c9b759f8144b3.png)

I was hoping I could get some help here. 🙂

---

<div class="post-metadata">

**Author:** ![nikw](https://avatars.discourse-cdn.com/v4/letter/n/e19b73/32.png) [@nikw](https://forum.bubble.io/u/nikw)\
**Post date:** [September 28, 2020, 6:48pm UTC](https://forum.bubble.io/t/adding-custom-fonts/7475/11 "2020-09-28T18:48:47Z")

</div>

Hi all,

Any update on this? I’m having a similar issue.  
Thanks

---

<div class="post-metadata">

**Author:** ![Tikka\_02](https://avatars.discourse-cdn.com/v4/letter/t/839c29/32.png) [@Tikka\_02](https://forum.bubble.io/u/Tikka_02)\
**Post date:** [September 29, 2020, 12:13am UTC](https://forum.bubble.io/t/adding-custom-fonts/7475/12 "2020-09-29T00:13:53Z")

</div>

Hi @nikw. I had to find another font which looked similar.  
As my issue was only for buttons, I used Open Sans for buttons and the general text was kept as Circular.

Hope that helps. 🙂

---

<div class="post-metadata">

**Author:** ![nikw](https://avatars.discourse-cdn.com/v4/letter/n/e19b73/32.png) [@nikw](https://forum.bubble.io/u/nikw)\
**Post date:** [October 2, 2020, 10:31am UTC](https://forum.bubble.io/t/adding-custom-fonts/7475/13 "2020-10-02T10:31:14Z")

</div>

Thanks @Tikka_02

I now use Manjari, so far so good. I’ll keep your suggestion in mind if I run into further issues. 😃 ☀
