90 Days of Code: A Week In
--
It’s officially Day 7! 🎉
This makes 1 week since I started my 90 Days of Code series. To celebrate this momentous occasion, I’m going to keep this short so I can go to bed 😂
In this lesson, we covered Font styling
To style font for a page, I can use the “font-family” property in the body selector.
ex.
If you notice, I chose the Merriweather font for my website’s main style. However, everyone’s computer does not have that font on it. If a browser can’t render your selected font, then it will have to default to something else. This is where I learned how to declare fallback fonts.
You can string these web-safe fonts together as fallback options in the event that browsers can’t render your selected font. You will use a ruleset like the one below to inform a browser that I want to use the Merriweather font, but as a backup, I want to use the Georgia font.
body {
font-family: Merriweather, Georgia, serif;
}
The following web-safe fonts are the most common ones you’ll come across:
- Arial (sans-serif)
- Verdana (sans-serif)
- Helvetica (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
Now, what if we didn’t want to go through the hassle of telling a browser 7 different fonts it could default to every time? Or what if we’re dealing with common fonts in the Apple ecosystem, but not in the Windows PC ecosystem?
We can use font embedding to keep styles consistent across browsers on different operating systems. We can do this by embedding the font’s code into our<head></head> tag. Then we would declare a font-family on the CSS page as usual.
That’s it for Day 7. One week down, and so many more to go. My goal is to get 1% better every day. It may not seem like much at first…but compounded over time it can create massive growth. I’m going to keep going, and I hope you keep following along on the journey. See you next time.
