Add Custom Google Font in Typography Dropdown in GrapesJS Builder

I have to add a custom google font in GrapesJs Plugin. for that, I have added the google font URL in the plugin’s assets/library/js/builder.service.js file in initPage() function in the “canvas” section.
and my custom fonts are visible in the Typography dropdown for the landing page builder. please see screenshots.
But now I have to make it dynamic by giving users the option to add a custom google font’s URL from the plugin’s setting page. Please see the screenshot.
so can you please help me with this or recommend any documentation for this?
Thank you.

Screenshot 2022-08-03 at 4.45.32 PM