![]() Step 4 (Optional): Using multiple custom fonts For these, you’ll need to look into the documentation of your font so you can match the font files with the correct font-weight number. You may want to add font-weights like “Ultra Light” or “Black”. Note in the above CSS example that the font-weight and the font-style are adjusted for each declaration to match the font file being referenced.įor example, the CaviarDreams-BoldItalic font file has a font-weight of 700 and font-style is italic.Īs a standard, font-weight: regular is the same as font-weight: 400 and font-weight: bold is the same as font-weight: 700 ![]() Open your CSS file (or preprocessor file) and drop in a declaration, like this:Īs you can see, this code can get pretty long pretty quickly.įor those leveraging a CSS preprocessor like Sass, creating your own mixin to solve for this could be an option. It’s time to write some CSS so the font is available for you to style the typography! Groovy! With all the font files added to your project, it’s time to use Step 3: Use in CSS to leverage the font files It’s pretty difficult to go wrong though.Īs you will likely have quite a few font files, my recommendation would be to place all of the font files in a folder called “Fonts”, like this: It depends on the structure of your project. Is there a specific folder I should be using? You might be thinking: where do I put all the font files? Step 2: Add the font files to your project Here’s how mine looks, various font weights and styles with different file extensions:Īwesome! Now you’ve got all the font files, we can start to add the custom font to our project. Make sure you have all the font formats selected, and leave the “Family support” option to on:įinally, press the Convert button and download: Select the font files to upload (note here that I’ve uploaded the regular, italic, bold and bold italic as I want to use these in my project): Just head over to a free font generator (I like to use Transfonter), and upload your font files there.įor example, on the Transfonter website, press the Add fonts button: ![]() Thankfully, solving this problem is quick and easy. If you have all of these font file extensions already, then you can skip straight ahead to step 2.īut what if you don’t have all the font-file extensions? ![]() In fact, here are the 5 file extensions you’ll need: To meet the best cross-browser standards, you’ll need 5 specific font file extensions of your custom font added to your project. Step 1: Get all the font files you need for cross-browser support ![]()
0 Comments
Leave a Reply. |