@A-noob-in-Coding
Posted
To have a easy time working with custom fonts: if you have font files which are usually provided with the starter code in the assets/folder directory, you can use @font-face rule in CSS Type fontface and your ide would autocomplete it, now name the font you want to use (it could be anything) and provide the path of the font file, you need to provide the path of the .ttf files(these contains the font) if the directory is assets/font and the .ttf is inside the font folder the path would look like "/assets/font/fontname.ttf" HOPE IT HELPS 🙂
@Napgolden
Posted
I didn't really understand the whole font-face CSS rule stuff, if you could explain a bit further it would be greatly appreciated. @A-noob-in-Coding
@A-noob-in-Coding
Posted
The @font-face rule is used to include font files that are present in your project. That way, you don't need to rely on online fonts. The font files usually have a .ttf extension. For example, a font Poppins would be like Poppins.ttf.
FEM challenges provide you with these font files to work with, and they are usually located in the assets/fonts/ directory.
To use these files:
@font-face {
font-family: PoppinExtraBold;
src: url("/assets/fonts/Poppins-ExtraBoldItalic.ttf");
}
the font-family is the name you want for the font you are retrieving from the .ttf file and scr: url() needs the path to that .ttf file
Hope it helps 🥰
@Napgolden
Posted
Thanks so much the image helped me understand it more. @A-noob-in-Coding
@A-noob-in-Coding
Posted
@Napgolden 😊
