DEV Community

Cover image for How I handled real-time Google Font injection in a Template Designer using ReactJS
John Nyingi
John Nyingi

Posted on

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

#webdev #typescript #programming #react

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">
Enter fullscreen mode Exit fullscreen mode

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', 'sans-serif'],
                nunito : ['Nunito', 'sans-serif'],
                opensans : ['"Open Sans"', 'sans-serif'],
            },
    },
},
Enter fullscreen mode Exit fullscreen mode

Now I can include the font styles inside my schema

export interface MorphData {
    imageUrl?: string;
    name: string;
    description: string;
    email?: string;
    mobileno?: string;
    theme?: {
        titleFont: string;
        contentFont: string;
    }
}
Enter fullscreen mode Exit fullscreen mode

Next, I update my template component to support these new fonts. This is where my custom fonts will be applied. In my <h1> and <p> tags, I update the className property with the following code. (I used null coalescing to update the fonts accordingly)

 ${data?.theme?.contentFont ?? "font-opensans"}
Enter fullscreen mode Exit fullscreen mode

Lastly, I updated my edit form to include the Select component from ShadCN, which will allow a user to choose a font style of their choice.

 <Field>
    <Select onValueChange={(e) => {
        handleOnChange({...form.getValues(), theme: {...form.getValues().theme, titleFont: e}} as CreateMorphData)
    }}>
        <SelectTrigger className="w-full max-w-48">
            <SelectValue placeholder="Title Font Style"/>
        </SelectTrigger>
        <SelectContent>
            <SelectItem value="font-opensans">Open Sans</SelectItem>
            <SelectItem value="font-inter">Inter</SelectItem>
            <SelectItem value="font-nunito">Nunito</SelectItem>
            <SelectItem value="font-spectral">Spectral</SelectItem>
        </SelectContent>
    </Select>
</Field>
Enter fullscreen mode Exit fullscreen mode

I also created the Select tag for changing the description font style.

Testing

Testing Template Designer Font Change

Conclusion

It's amazing how easy it is to work with Google Fonts using Tailwind.

Building a template designer is part of my 'BuildWithMe' series, in which we implement a full, production-ready template engine. It's for everyone, from beginner to advanced. If you want to follow the full build, you can find the first 2 Chapters here Substack Link.

Top comments (0)