How to Use and Optimize Google Fonts

► When CSS2 became standard, it meant we could specify custom fonts, which changed how the web looked. But it was not until 2009 that custom fonts were widely supported by browsers.
Today, websites can call on any font it has the right to use. If you have access to a font, then you can use it on your website.
One option is to buy a license from a font marketplace. But this can get pretty expensive and probably isn’t feasible unless the font is being used for business or enterprise purposes.
For those who do not or cannot spend huge amounts of money on a custom font, we can thankfully have Google Fonts.
Google Fonts is a service that gives us access to hundreds of font families we can browse through and select. We can choose from all font types and add as many variations of weight and style as we need.
Google then generates some code snippets that we simply add to our HTML file, giving us access throughout our web page to the font we have selected.
► Timestamps:
0:00 Start
0:48 The CSS font-family property and font-stacks
1:21 Paid custom fonts
2:15 Google Fonts
3:34 Font types
4:32 How to add Google Fonts to a web page
6:23 Font pairing
8:12 Optimizing your fonts
11:28 End
► Useful links:
fonts.google.com/
www.fontshop.com
www.fontpair.co/all
www.w3schools.com/howto/howto...
www.delightfullydesigning.com...
design.google/library/choosin...
fonts.google.com/knowledge
► This video is part of the Developer Tools playlist: • Developer Tools
► Social Media:
/ craigabourne
/ craigabourne
► Code & Projects:
github.com/craigabourne
codepen.io/craigabourne

[@craigabourne]

This video is part of the Developer Tools playlist: kzbin.info/aero/PL4cTxE4s2XIZHvTK5VSwdDDzQRmp1c5Ws

[@jensdan4489]

Nobody on KZbin explains these things as well as you. I wish your channel success and please keep making these videos

[@craigabourne]

That's so kind. Thank you! Will definitely keep making videos

[@somnarchaudhary]

Great to hear the flexbox video is coming. Cant wait

[@craigabourne]

Working on it now. Will get it out as quick as I can

[@lilahbautista]

Thank you Craig! Amazing video again ❤

[@craigabourne]

Thanks 🙏

[@sinamobasheri]

I'm really enjoy your vision, keep it up good work.

[@craigabourne]

Thanks, will do!

[@kenmichigwan234]

Nice can't wait for more

[@amustephen4809]

THANKS FOR THIS IV BEEN SEARCHING FO SOOO LONG

[@craigabourne]

You're welcome! Thanks for watching

[@nouchance]

Amazing!

[@craigabourne]

Thanks!

[@bkatsevych]

Thanks a lot for another great video, man!

[@craigabourne]

No worries! Appreciate the kind words. Thanks for watching!

[@davidbreitner]

Superb mate

[@craigabourne]

Thanks! Appreciate it 👍

[@rushawnmcdonald7797]

Thanks so much

[@craigabourne]

You're welcome!

[@Pavel-on-youtube]

💯

[@craigabourne]

💯

[@leonardreveira]

Which fonts are in at the moment?

[@craigabourne]

I don't know about specific fonts, but there seems to be a trend towards less is more. Sans-serif fonts currently dominate the web. One I particularly like (and have been using on thumbnails on this channel) is Graphik commercialtype.com/catalog/graphik

[@Tariq.Mujtaba]

Dude you forgot your KZbin password or something?😭😭

[@craigabourne]

😂 Will be back with more videos soon. Very busy at work unfortunately (No I don’t work at Twitter). Will ease up soon and then I can get back to making some videos.

[@jamesdarnel]

Hey man hope all is well during these crazy times! God Bless!

[@craigabourne]

Hey James! All good. Just busy! Hope you’re doing well my friend

[@jamesdarnel]

@@craigabourne good! And glad to hear your on your grind! 🤴 👑 🦁