From the course: Responsive Typography Techniques

Unlock the full course today

Join today to access over 24,900 courses taught by industry experts.

Solution: Handling your own web font events

Solution: Handling your own web font events - CSS Tutorial

From the course: Responsive Typography Techniques

Start my 1-month free trial Buy for my team

Solution: Handling your own web font events

“

For my solution to our challenge, I chose Lily Script One as the font I was going to replace the headline font with. I got that from Google Fonts, as you can see here, and it only has one weight of 400, so that really kind of narrowed down my options. When I put it in our example page, it looks a little like this. I also changed the letter spacing and margins around the first and third line of our headline. Just to balance things out a little better with our very cursive-y script. We'll take a look at the CSS that I changed and I made a couple of changes. First of all, I added the font family of Lily Script One to my h1. And Google offered the fallback font of Cursive originally, but I thought that Georgia actually looked a lot closer to Lily Script One, even though it's not a cursive font. The weight and size of the letters was much closer to what I was using than Cursive was, so I got rid of that and made my fallback font Georgia. Below that I added two classes. One for when Lily…

Contents