Now let's go ahead and let's add some text specific toolbar elements here. Let's start by visiting our use editor and using the same logic in which we control the fill color and the stroke color. We are now going to introduce the font family. So we're going to do a state just like fill color but this will be called font family and set font family. Let's add use state here and give it the default value of font family.
We already have font family or perhaps we don't have it. There we go. So I just added this from features editor types. Make sure you add this import and then define it here as the default value of the font family. What we're going to do next is we're going to pass those two values inside of the build editor.
So I'm going to pass in the font family and set font family like this. Now we have to fix the build editor props here so that it accepts those. So font family will be a string and then we're gonna have set font family which will accept the value which is a string and simply returns a void. Now we have to quickly fix something. So find the const editor useMemo and you have to add the fontFamily missing dependency here.
There we go. So just ensure that when you build your editor you've passed the fontFamily and setFontFamily which is controlled by this use state. We can now go back inside of the build editor method here and in here we can now destructure the font family and we can also destructure the set font family. So I'm gonna be using the same logic as, where is it? Change fill color, for example.
Let's go ahead and copy this and paste it above and call this change font family. First of all, let's do set font family here and then we're gonna have to change the actual font family. So this is how we're going to do that. We've just set our state and this is, well, the thing we still want to do we want to iterate over each selected object but only if is text type object dot type only then we want to change the property value but instead of fill it will be font-family. There we go.
Is it called font-family? Looks like it's not called font-family. So I think this actually will work but the problem is that the TypeScript is not working. But in my original source code, I found a solution which uses the underscore set on family and then passes in the font family, or more specifically passes in the value, my apologies, like this. So this does not give us the TypeScript error.
But I think that if you just did .set here, font-family and passing the value, I think this will still work. So I'm going to purposely leave this as the error so we can see whether it works or not. We're gonna go ahead and fix the change font family error here so we have to find the editor interface here and let's just add change font family value is a string and it returns a void and I think that should fix this. Does it fix it? Yes, it fixes it.
But we still have this because simply the types for fabric just don't seem to be perfect, right? But I think this will work fine. Let's see. Now we have to find a way to call this method changeFontFamily. So first things first, we're gonna go inside of our toolbar right here And what we're gonna add is we're going to introduce the new button here.
So we can copy our, for example, stroke width, which is disabled if it's text. And we're gonna do the opposite here. Only if is text. So remove the exclamation point. Only then are we gonna go ahead and add the font family control here and I'm not sure what is the icon for that so let me just go ahead and try and find this so the font family here actually we won't be using any icon, instead we're gonna do the following.
We're gonna go ahead and add a div here and I'm just gonna write Arial for now and then below that we will add a chevron down from Lucid React. So make sure you've added the import from Lucid React here. Let's give the chevron down a class name of size four and let's give it an ML of two and shrink of zero. We're going to give this div a class name of max width 100 pixels and truncate. Like this.
There we go. So let's go ahead and see how this looks like now. I'm gonna go ahead and refresh everything here. I'm gonna add a text and there we go. So we can now see our font family selection but something does seem a bit off here.
So let's see how we can improve this. Is it the max width which is causing the issues here? Let's see max width 300 pixels. So it looks like it's not that it's something else So let me just go ahead and quickly debug this. So I think the issue is in our button, right?
So besides this dynamic class, which we are going to change by the way, Let's also add with auto. There we go. And let's change this back to Max 100. So now there we go. You can see how Arial is displayed here.
I still think it requires some changes. So let's also give it the PX of two like that. And let's give it a text small. So those are going to be the default classes of this button. There we go.
Now it looks a bit more normal. Right. So this font family will now our, a shiden thing is a practice to call this font family. So we're only going to call this font and think that's more familiar for the users. Right.
So this will be font. And instead of opening the stroke options, it's going to be opening the font sidebar. So we're going to change the on change active tool here to be font and the active tool inside of here which will display, you know, kind of the selected color will also be font. So let's go ahead and click on this again and there we go. Now it stays selected.
Now we have to create the actual font sidebar. We can start by defining all the available fonts. So we're gonna go inside of features, editor, types here and at the bottom, sorry at the top here, we can go ahead and define our fonts, right? So you can for example add Arial, Arial Black and any other web supported font that you want. Keep in mind these fonts need to be supported by the browser.
There is also a way to add custom fonts But for now I just want to work with all available browser fonts. So I'm just gonna paste all of the fonts that I have in store here. So this is from my source code which you can visit. If you want you can pause the screen and you can write all of these fonts right here or you can just simply you know go to my website where you're watching this and copy from the source code. So now once you've defined your fonts if you are having trouble writing this for any reason you can just put Arial for now because you know the logic will be the same right or for example just add Arial and times new Roman so you can see the change.
Great! Now that you've defined your fonts I want to go and let's see which sidebar can we copy. I think the best sidebar to copy at the moment will be the text sidebar. Let's copy this and let's call this font sidebar. So first things first, ensure that you are inside of the font sidebar here.
Close everything else and rename all instances of text sidebar to font sidebar. And Then go ahead and change the active tool here to be font. Change the toolbar, tool sidebar header title to be font and this will be modify the font description. Or honestly it can be whatever you want or something like change the text font. Let's go ahead now and render that inside of the editor here.
So I'm just gonna copy and paste the text sidebar, change the import to font sidebar and the actual constant to font sidebar as well. We can then copy and paste the last rendered text sidebar and replace it with the font sidebar. And there we go. So now you can see it's exactly the same as the text sidebar except it has the different or should I say the proper title and the description here. Now let's go ahead and modify these buttons here and what we can do is we can just iterate over the array which we've just created right here in the types we had export const fonts and a list of our fonts here which are supported for the browser so here's what we can do instead let's go ahead and remove everything inside of here.
Like this. And instead, let's call fonts, which I've just imported from Features Editor types here. So we're going to do fonts.map font, like this. And render a button. Inside of the button, render the actual font.
The key will be the font, variant will be secondary, size will be large, class name will be width full, height of 16, justify start and text left. And then the key, oops I've already added the key, The style instead will be the following. Font family will be the actual font. Font size can be 16 pixels. And the padding can be 8 and then 16.
So the reason we're using the style attribute here and not the class name is because you can't exactly do dynamic classes like this in Tailwind. So you can't exactly do font. I'm just, you know, making things up now. You can't do font font, right? Because Tailwind uses just in time compiler.
So what you have to do is instead you have to, Let's pretend that we can add a variable here. So font class, you would have to create it here, right? Something like font, font, I believe, something like that. Basically, it's just easier to use the style attribute for this use case. And there we go.
So take a look at how this looks like now. You have all this font options right here. Beautiful. So now what we have to do is confirm whether changing this font actually works or not. And I just want to reduce the space between these just a tiny bit.
So instead of space Y4, let's use space Y1. There we go. This looks better. So now, let's go ahead and define what it does on click, right? So on click here, we're going to call the editor set font family, sorry, change font family and just pass in the font.
Let's see if this will actually work or not. So I'm going to go ahead and select the text here. I will open the font here and I will change to Times New Roman. There we go. It's changed to Times New Roman.
So, two things I want to do here. First of all, once it's changed to Times New Roman, it should also change here in the toolbar. And I think it will also be nice if there is a way that we can mark this current font as selected, similar to how we added the stroke width selection type, right? I think that would be a cool thing to add. So let's go ahead and do that.
First things first, I wanna go ahead and go inside of use editor here. And the same way that we have this method called get active fill color, let's go ahead and copy and paste this and call it get active font family. So we get to select the object here and the value we are looking for is font family and in here I'm just going to add font family here and font family here because this is from our state right we still have this error here and which we've just proven that it's a false error, right? Because our method change font family works just fine. So what we can do here is we can add tsignore and you can add a comment, faulty ts library, font family exists.
So you can write that. So you can copy this and then find your new get active font family and just add the same comment here. And in here, we won't have to do this. So we can remove this like this and let's go ahead and add the get active font family inside of the types for the editor interface so get active font family will return a string there we go we just resolved that We can now go inside of the toolbar first just to see whether this already works or will it need some more changes. So font family will be editor, get active, font family.
And let's try and render that instead. So right now I've hardcoded Arial and I will now change this to font family. And let's see whether it works or not. I'm gonna refresh everything. I will add a new text.
Perfect. In the beginning it's Arial. I'm gonna change it and there we go. Now it's Times New Roman. Now it's Arial black.
What if I have a multiple of this? There we go. So it recognizes the change of the element. Perfect. And then we also have a limit to how wide this will display the font, right?
No point in some custom font, which takes this much space. So we've limited the space. Perfect. So this works just fine. What I want to do next now is also show the selected font inside of here.
So let's do that. We now have this method which obviously works. So what I want to do is I quickly want to visit our stroke width sidebar. So this is what we do. We do border 2, border blue 500.
Let's do that. So I'm gonna go back to my font sidebar here. I'm going to turn this into dynamic font. Let's see if I have CN imported. I do have CN imported here, perfect.
So these are going to be the default classes. And then what we're going to do is for now let's add true and end and paste in border 2 and border blue 500. So now all of these elements will act selected and now what we're gonna do here is add const value editor get active font family like this. Now that we have the value what we can do here is check if value is identical to the current font only then show the selected option. There we go.
Now whatever we select is selected in here. Amazing, amazing job. What we're going to do next is we are going to learn how to change different styles for a font. For example, how to change from bold to not bold, how to change from underline to not underline and same thing for italic and strikethrough. Great, great job.