How I handled real-time Google Font injection in a Template Designer using ReactJS

For the past few days, I have been building a template designer using ReactJS. One of the features I really wanted was to be able to change the font style dynamically. For this project, I have been using ShadCN , Tailwind , and ReactJS with Typescript . Of course, with setting up the Google fonts, I had to pick a few. I went for opensans , inter , nunito and spectral . I added the below html tags to my index.html <link rel= "preconnect" href= "https://fonts.googleapis.com" > <link rel= "preconnect" href= "https://fonts.gstatic.com" crossorigin > <link href= "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&family=Spectral:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&display=swap" rel= "stylesheet" > I also needed to update the tailwind.config.json file to include the new fonts. Inside the themes and extend tags, I added fontFamily. theme: { extend: { fontFamily: { spectral : [ 'Spectral' , 'serif' ], inter : [ 'Inter'