Raza Abbas• 790
@RazaAbbas62
Posted
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-familyproperty. 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 helpful
1
Angwenyi Ogata• 200
@AngwenyiOgata
Posted
hello @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 fallback serif or sanserif
1
