Design comparison
Solution retrospective
Hello everyone, I completed the challenge Recipe Page I made it responsive on different devices
You can take alook at my code and finished project for suggestions on beterment. I had a challenge with using font assets which were provided in the assets folder any help will be appreciated.
Community feedback
- @RazaAbbas62Posted 10 months ago
To use custom fonts:
-
Include Font Files:
- Place your font files in a folder (e.g., "fonts") within your project.
-
Define Font Face in CSS:
@font-face { font-family: 'YourFontName'; src: url('path/fonts/your-font-file.woff2') format('woff2'), url('path/fonts/your-font-file.woff') format('woff'); }
Replace
'YourFontName'
with the desired font family name, and update the file paths based on your project structure. -
Apply the Font in CSS:
body { font-family: 'YourFontName', sans-serif; }
Use the specified font family in the
font-family
property. If the custom font is unavailable, the browser will use a generic sans-serif font as a fallback.
I hope it will help.
Happy Coding :)
Marked as helpful1@AngwenyiOgataPosted 10 months agohello @FazeenIjaz Thanks for for your answer to the challenge i faced. I modified the CSS, you can take a look at the code to suggest any more changes
@font-face { font-family: 'outfit'; src: url(../assets/fonts/outfit/Outfit-VariableFont_wght.ttf); } @font-face { font-family: 'YoungSerif'; src: url(../assets/fonts/young-serif/YoungSerif-Regular.ttf); }
when i tried to add the
format()
in the src the fonts could not load and it was displaying the fallbackserif
orsanserif
1 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord