https://github.com/kalegd/msdf-fonts

Repository of MSDF Files to render 2D text in 3D
https://github.com/kalegd/msdf-fonts

3d fonts msdf text-rendering webgl webxr

Last synced: 3 months ago
JSON representation

Repository of MSDF Files to render 2D text in 3D

• Host: GitHub
• URL: https://github.com/kalegd/msdf-fonts
• Owner: kalegd
• License: mpl-2.0
• Created: 2023-02-28T06:43:20.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-12-29T09:12:42.000Z (about 1 year ago)
• Last Synced: 2024-09-27T12:03:42.409Z (3 months ago)
• Topics: 3d, fonts, msdf, text-rendering, webgl, webxr
• Language: JavaScript
• Homepage:
• Size: 53.8 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# msdf-fonts

Repository for MSDF font files for rendering 2D text in WebGL

To learn more about MSDF, see this repo https://github.com/Chlumsky/msdfgen

#### How to use

In your application code, use any CDN for Open Source Projects like jsdelivr or cdnjs to reference your desired font. You can access the full font files under `/build/`, or subsets of characters based on Unicode Blocks under `/build/subsets/` if you want to load smaller files

```javascript

let fontJSON = "https://cdn.jsdelivr.net/npm/msdf-fonts/build/OpenSans-Regular-msdf.json";

let fontImage = "https://cdn.jsdelivr.net/npm/msdf-fonts/build/OpenSans-Regular-msdf.png";

```

#### Character Subsets

The following Character Subsets are currently supported if you want to load smaller files. These files are located in the `/build` folder as follows: `/build/subsets/{characterSet}-{fontFamily}-{weight+style}-msdf.{png|json}`

|Character Set Name|Includes|List of Characters|

|---|---|---|

|basic-latin||`` !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{\|}~``|

|latin-1-supplement|basic-latin|`` ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ``|

|latin-extended-a|basic-latin, latin-1-supplement|``ĀāĂ㥹ĆćĈĉĊċČčĎďĐđĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſ``|

|greek|basic-latin|``ͰͱͲͳʹ͵Ͷͷ͸͹ͺͻͼͽ;Ϳ΀΁΂΃΄΅Ά·ΈΉΊ΋Ό΍ΎΏΐΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡ΢ΣΤΥΦΧΨΩΪΫάέήίΰαβγδεζηθικλμνξοπρςστυφχψωϊϋόύώϏϐϑϒϓϔϕϖϗϘϙϚϛϜϝϞϟϠϡϢϣϤϥϦϧϨϩϪϫϬϭϮϯϰϱϲϳϴϵ϶ϷϸϹϺϻϼϽϾϿ``|

|cyrillic|basic-latin|``ЀЁЂЃЄЅІЇЈЉЊЋЌЍЎЏАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюяѐёђѓєѕіїјљњћќѝўџѠѡѢѣѤѥѦѧѨѩѪѫѬѭѮѯѰѱѲѳѴѵѶѷѸѹѺѻѼѽѾѿҀҁ҂҃҄҅҆҇҈҉ҊҋҌҍҎҏҐґҒғҔҕҖҗҘҙҚқҜҝҞҟҠҡҢңҤҥҦҧҨҩҪҫҬҭҮүҰұҲҳҴҵҶҷҸҹҺһҼҽҾҿӀӁӂӃӄӅӆӇӈӉӊӋӌӍӎӏӐӑӒӓӔӕӖӗӘәӚӛӜӝӞӟӠӡӢӣӤӥӦӧӨөӪӫӬӭӮӯӰӱӲӳӴӵӶӷӸӹӺӻӼӽӾӿ``|

#### Adding fonts

* Create a folder for the new font family in all lowercase under `/fonts`

* Add all your .ttf files to that new folder

* Add the name of the font folder to `FontFamilies.js` in the `fontFolders` list

* (Optionally) Add your font folder name to the relavant Character Sets in `CharacterSets.js`

* Run `npm start`

* Open a pull request :)

#### Adding Character Sets to support more languages

Create a GitHub issue with details for your Character Set. Ideally you provide information about what Unicode Blocks would be used ([You can see blocks here](https://www.utf8-chartable.de/unicode-utf8-table.pl)). If that confuses you, just open a pull request anyways and I'll try to help the best I can

#### Adding Custom Character Sets

I'll probably say no, but you can try and ask anyways if you have a good reason

#### Please Help

If you have any ideas on how to better structure this repo, I'd love to hear you out! Don't hesitate to reach out with a GitHub issue detailing your ideas