Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom font API #109

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
Open

Custom font API #109

wants to merge 15 commits into from

Conversation

Tanatcu
Copy link

@Tanatcu Tanatcu commented Feb 19, 2019

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

@iddan
Copy link
Owner

iddan commented Feb 20, 2019

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
Copy link
Author

Tanatcu commented Feb 20, 2019

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
Copy link
Owner

iddan commented Feb 20, 2019

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

@iddan iddan mentioned this pull request Feb 20, 2019
@Tanatcu
Copy link
Author

Tanatcu commented Apr 18, 2019

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
Copy link
Author

Tanatcu commented Apr 18, 2019

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

@iddan
Copy link
Owner

iddan commented Apr 21, 2019

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

@Tanatcu
Copy link
Author

Tanatcu commented Apr 22, 2019

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
Copy link
Owner

iddan commented Apr 22, 2019

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
Copy link
Author

Tanatcu commented Jul 16, 2019

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

@iddan
Copy link
Owner

iddan commented Jul 18, 2019

Yes

@Tanatcu
Copy link
Author

Tanatcu commented Nov 28, 2019

@jvink but this PR isn't finished yet

@Tanatcu
Copy link
Author

Tanatcu commented Nov 28, 2019

@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
Copy link

hvlong commented Nov 5, 2020

Hi! Any updates?

@tebatalla
Copy link

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

@LautaroNavarro
Copy link

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

@LautaroNavarro
Copy link

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
Copy link
Author

Tanatcu commented Sep 30, 2022

@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
Copy link

tolunaykan commented Mar 14, 2023

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
Copy link

@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
Copy link

@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
Copy link

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

@Tanatcu
Copy link
Author

Tanatcu commented Sep 25, 2023

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

10 participants