feat: add Google Font integration in Next.js using Tailwind CSS utility classes #3
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ty classes The commit adds Google Fonts to components, closes #2
|
We regret to inform you that we cannot accept this pull request as this event is limited to our college community. However, we sincerely appreciate your interest, efforts, and dedication to contributing to our project. Your willingness to participate is highly valued. We would like to express our gratitude for your enthusiasm and commitment. We are planning to organize an inter-college event in the near future, and we hope to see you there. Thank you once again for your involvement, and we look forward to potential collaboration opportunities in the future. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.