feat: add Google Font integration in Next.js using Tailwind CSS utility classes #3
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The commit adds Google Fonts to components, closes #2
I have done my level best to complete all of the tasks outlined in #2:
Research and select a suitable Google Font for integration.
In my research, I found that Inter is often paired with print-like serif fonts, like Bluu and Spectral. I chose Spectral because it was readily available on the Google Fonts website, and it is aesthetically pleasing alongside Inter as a body font.
Implement Google Font integration in the Next.js project.
Google Font integration was completed as outlined by this Next.js guide. The guide describes how to add Google fonts in Next.js using CSS variables, add the, to the tailwind.config file, and use them in components with utility classes.
Update project stylesheets or components to utilize the new font.
The Login component utilizes the imported fonts, with font-serif (Spectral) used for headers and font-sans (Inter) used for body text.
Test the font integration across different devices and browsers for consistency.
Both fonts can be reliably displayed on different screen sizes, and if needed, tailwind breakpoints can be used to change them on different devices.
Document the integration process for future reference.
I followed the process in this link, and added utility classes for reference in Login.tsx. If need be, more fonts can be added through the same process: importing the font, defining the CSS variable, adding it to the tailwind.config file, and using the utility classes wherever it is needed.