Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Drawing Text Using Web Fonts

BerfinA edited this pageAug 14, 2019 ·1 revision

Lets say we want to use a font you found online.One way to do this is to use web fonts.Web fonts are a way to load external font files via CSS, and all those typefaces will be available to use for your p5 project.One good source for this is Google fonts project.

Screen Shot 2019-08-11 at 11 45 34 AM

Go to google fonts. There you will find hundreds of fonts for free.When you find a font that you like, click on the select font button on the top right of the screen.

Screen Shot 2019-08-11 at 11 45 48 AM

An additional window will come up and here you can scroll down and it will show you the link that you can include in your project.

Copy this link

Screen Shot 2019-08-11 at 11 46 06 AM

Go back to your p5 editor.

Now you need to add this code to the html file that is a part of your project.

Screen Shot 2019-08-11 at 11 46 27 AM

Go to sketch files on the left of the web editor window.click on the sketch files> index html

Screen Shot 2019-08-11 at 11 46 49 AM

We can put this code anywhere but we would suggest putting it right underneath the title tag and above any scripts.

Now you can save this and go back to the sketch.

Because we have put this link tag to load this typeface via css, I can now use the name of that type in the textFont() command.In order to use the for the textFont() command you should go back to the google fonts page you can check the name of the font family. For instance, “Libre Caslon Display” with spaces between each letter.

You can now go back to the IDE and put the name of the new font.

Screen Shot 2019-08-11 at 12 28 16 PMScreen Shot 2019-08-11 at 11 48 14 AM

https://p5js.org/

If you would like to edit this wiki and don't already have edit access, please open an issue or comment on an existing one noting the wiki page you'd like to edit. You will then be added as a repository contributor with edit access.

Clone this wiki locally


[8]ページ先頭

©2009-2025 Movatter.jp