Custom font API

[Tanatcu]

Added simple custom font loader for using custom fonts inside canvas WebView

[iddan]

Awesome work! To make it more compatible with the Web API: I think the canvas should have fonts property which will be a FontFaceSet. FontFaceSet will be initiated with a canvas instance and have add() and load() methods

[Tanatcu]

Thanks! About your idea. Do you mean that an access to the fontFaceSet will be possible via canvas.fonts property? And methods will be available like: canvas.fonts.add or canvas.fonts.load? Oh I see. It should be awesome and will give the opportunity to use FontFaceSet as original Web API class. But what your imagination about using FontFace class? As I saw in MDN and articles FontFace uses for preparing font to loading. I will check that can I use FontFaceSet only for loading, but it will be a bit later.

[iddan]

Sweet! Thank you so much. FontFace can either get Canvas instance as well

[Tanatcu]

Hi @iddan. I'm sorry cause I have a lot of work on my job and finally I finished pull request. Could you check and note what I should fix?

[Tanatcu]

Also I have made new realization of toArg method. Could you check it?

[iddan]

Looks good. But it doesn't use the FontFaceSet. Can you do it?

[Tanatcu]

As I understand logic of FontFaceSet usage in css, initialized class FontFaceSet saves in document.fonts property. And I save this property in this.fontFaceSet for more comfortable usage. What do you mean when tell "it doesn't use the FontFaceSet"?

[iddan]

Sorry, I was not clear enough. I meant you should represent the fonts interface on the React Native Side with a class of FontFaceSet and expose an API is similar as possible to the web one

[Tanatcu]

I guess I understand what you've said) Are you telling about separated class FontFaceSet such as ImageData either Image either Path2D?

[iddan]

Yes

[Tanatcu]

@jvink but this PR isn't finished yet

[Tanatcu]

@jvink this week or next i'll finish this PR. Currently i've found this changes doesn't work on iOS. it's important bug

[hvlong]

Hi! Any updates?

[tebatalla]

Hey @Tanatcu any update? Very interested in this feature. Wondering what bug you found on iOS and if you were able to fix.

[LautaroNavarro]

Hey Guys, I need to use custom fonts @Tanatcu @tebatalla @hvlong do you have any updates or workarounds?

[LautaroNavarro]

Guys, if you need a workaround to render custom fonts you can just add @font-face { font-family: 'YourFontName'; src: url('FontURL.ttf'); } to the index.html file

[Tanatcu]

@LautaroNavarro Good point. Actually it's the same job as font loader does. But thank you for pinging, I'm going to refresh my memory and look, how this long-life PR could be finally finished.

[tolunaykan]

I made a workaround like that here after importing fonts for both android and ios, you can use them in canvas.

local('Alloy Ink') -> for ios
url('file:///android_asset/fonts/Alloy Ink.otf') -> for android

[laurenwilliams]

@tolunaykan how did you import your fonts? I went the react-native-asset route, but can't seem to get them to load

[rob-johansen]

@tolunaykan could you explain what you did?

I tried adding my font to my node_modules/react-native-canvas/dist/index.html file like this...

<style>
  @font-face { font-family: 'Work Sans'; font-weight: 500; src: local('WorkSans-Medium'), url('WorkSans-Medium.ttf') format('truetype'); }
   ...
</style>

...but it didn't work.

@laurenwilliams did you figure out how to get this working?

[lexi-stein]

Hi @Tanatcu ! Would love this feature, any chance you're going to work on this PR more?

[Tanatcu]

@lexi-stein Tbh I would like to continue working on this PR but have quite big problems with free time. I will try to look to it but can't promise anything.