Challenge: Implementing a Custom Google Font
We continue our work within the fonts.ts
file. Let's import Rubik
font with 400
weight and latin
subsets. Apply this font to the p
element in the app/page.tsx
file.
To finalize the use of fonts, uncomment the TradeHubLogo
component in the app/page.tsx
file, and check the live page.
We should be able to see the following view of our application.
In Practice
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Can you explain how to import and use the Rubik font in another component?
What should I do if the Rubik font is not displaying correctly?
How do I verify that the Rubik font is applied to the paragraph element?
Awesome!
Completion rate improved to 2.08
Challenge: Implementing a Custom Google Font
Swipe to show menu
We continue our work within the fonts.ts
file. Let's import Rubik
font with 400
weight and latin
subsets. Apply this font to the p
element in the app/page.tsx
file.
To finalize the use of fonts, uncomment the TradeHubLogo
component in the app/page.tsx
file, and check the live page.
We should be able to see the following view of our application.
In Practice
Thanks for your feedback!