# How to use asset fonts in p5
**URL:** https://discourse.processing.org/t/how-to-use-asset-fonts-in-p5/17037
**Category:** Coding Questions
**Created:** [January 11, 2020, 8:15pm UTC](https://discourse.processing.org/t/how-to-use-asset-fonts-in-p5/17037 "2020-01-11T20:15:59Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@gregts13](https://discourse.processing.org/u/gregts13)
#### Post date: [January 11, 2020, 8:16pm UTC](https://discourse.processing.org/t/how-to-use-asset-fonts-in-p5/17037/1 "2020-01-11T20:16:00Z")
## [Honored motorcycle by gregeb13 -p5.js Web Editor](https://editor.p5js.org/gregeb13/sketches/Gk1sYtHGV)
Error: Unsupported OpenType signature
> p5.js says: It looks like there was a problem loading your font. Try checking if the file path [assets/Bold.ttf] is correct, hosting the font online, or running a local server.[[Local server · processing/p5.js Wiki · GitHub](https://github.com/processing/p5.js/wiki/Local-server)]
–I"m literally copying from the p5.js examples into a clean editor and it’s not working
how do I add the font assets to the editor?
no examples exist
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [January 12, 2020, 2:06am UTC](https://discourse.processing.org/t/how-to-use-asset-fonts-in-p5/17037/2 "2020-01-12T02:06:54Z")
you can make a subdir ‘assets’
and upload font files, also there are other way…
* * *
[https://editor.p5js.org/kll/sketches/H1RjsrxZ4](https://editor.p5js.org/kll/sketches/H1RjsrxZ4)
in console print find LINKS ( can click )
to more examples…
* * *
also it looks like you play / regular / bold / …
if you not use font files for this please know about
[https://p5js.org/reference/#/p5/textStyle](https://p5js.org/reference/#/p5/textStyle)
( that is not available in JAVA )
---
### Author:  [@gregts13](https://discourse.processing.org/u/gregts13)
#### Post date: [January 12, 2020, 5:03am UTC](https://discourse.processing.org/t/how-to-use-asset-fonts-in-p5/17037/3 "2020-01-12T05:03:09Z")
But the examples show native asset fonts. There has to be native fonts that dont require uploads. Just includes or css files right??
The examples show none of this to me clearly
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [January 12, 2020, 6:19am UTC](https://discourse.processing.org/t/how-to-use-asset-fonts-in-p5/17037/4 "2020-01-12T06:19:16Z")
again, if you talk font files there is a example
[https://editor.p5js.org/p5/sketches/Typography:\_Words](https://editor.p5js.org/p5/sketches/Typography:_Words)
where you also find the subdir ‘assest’ and file as i explained
( and your code talk about that exact situation, just that the subdir and files are missing! )
* * *
if you talk about system fonts:
like in the first part of this reference
[https://p5js.org/reference/#/p5/textFont](https://p5js.org/reference/#/p5/textFont)
using fonts that should be available to your browser on your computer,
[https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling\_text/Fundamentals#Web\_safe\_fonts](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts) ,
play again my revised example [https://editor.p5js.org/kll/sketches/E7oh0oCjq](https://editor.p5js.org/kll/sketches/E7oh0oCjq)
so no need to provide / (down / pre) load / font files.
as for second part of that reference topic
---
### Author:  [@gregts13](https://discourse.processing.org/u/gregts13)
#### Post date: [January 12, 2020, 3:33pm UTC](https://discourse.processing.org/t/how-to-use-asset-fonts-in-p5/17037/5 "2020-01-12T15:33:56Z")
Thanks.
So i have to load a font?
Therr is no default font pre-loaded??
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [January 12, 2020, 3:59pm UTC](https://discourse.processing.org/t/how-to-use-asset-fonts-in-p5/17037/6 "2020-01-12T15:59:40Z")
> [@gregts13](#):
>
> So i have to load a font?
not understand your question,
as for me i just show you the opposite
using the system fonts not requires preloading files,
but if preloading files they must exist,
and you must run in a server environment.
---
### Author:  [@gregts13](https://discourse.processing.org/u/gregts13)
#### Post date: [January 12, 2020, 4:45pm UTC](https://discourse.processing.org/t/how-to-use-asset-fonts-in-p5/17037/7 "2020-01-12T16:45:38Z")
hi,
yes, I just want to use the system fonts.
I tried an example and it gave an error message that it could’nt find the asset\FontName…
I forget the exact error…—
I found it—cut and paste this into a new editor
=================error
> p5.js says: It looks like there was a problem loading your font. Try checking if the file path [assets/inconsolata.otf] is correct, hosting the font online, or running a local server.[[https://github.com/processing/p5.js/wiki/Local-server](https://github.com/processing/p5.js/wiki/Local-server)]
============= example code=======
let inconsolata;
function preload() {
inconsolata = loadFont(‘assets/inconsolata.otf’);
}
function setup() {
createCanvas(100, 100, WEBGL);
textFont(inconsolata);
textSize(width / 3);
textAlign(CENTER, CENTER);
}
function draw() {
background(0);
let time = millis();
rotateX(time / 1000);
rotateZ(time / 1234);
text(‘p5.js’, 0, 0);
}
---
### Author:  [@Tiemen](https://discourse.processing.org/u/Tiemen)
#### Post date: [January 12, 2020, 5:23pm UTC](https://discourse.processing.org/t/how-to-use-asset-fonts-in-p5/17037/8 "2020-01-12T17:23:27Z")
Hi there Greg,
If you don’t want to use a specific font, you don’t have to call `textFont` (I’m not certain whether this picks the viewers default system font or that P5 has its own font included):
```auto
function setup() {
background(210);
fill(0)
text('Font Style Normal', 10, 30);
text('Font Style Italic', 10, 50);
text('Font Style Bold', 10, 70);
}
```
In case you want to use your own fonts for the P5 Web Editor, you need to make sure that the fonts called in `function preload` are at the right location as kll mentioned.
You can add a font by clicking on the button called _Sketch_ in the top of the Web Editor, followed by _Add file_. Pick the font you’d like to use and upload it to your sketch.
To check whether it’s uploaded in the right location, so it matches the path in `function preload`, is by clicking on the grey little arrow under the red _play_ button. It extends a menu which shows all the files that are part of your current sketch.
Does that answer your questions?
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [January 13, 2020, 2:03am UTC](https://discourse.processing.org/t/how-to-use-asset-fonts-in-p5/17037/9 "2020-01-13T02:03:47Z")
> [@gregts13](#):
>
> inconsolata = loadFont(‘assets/inconsolata.otf’);
no idea if that file exists in your project,
but on the internet it does NOT.
i could find and download … and upload to `/assets`
>
and it works now
> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/-XoYpXRdy)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.
* * *
but as it is a google font please remember that i linked you already to my example about that
> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/H1RjsrxZ4)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.
but that way it seems not to work in WEBGL and use ROTATE…
> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/yqvznlsOn)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.
* * *