Why should I care about fonts anyway?
I’m not a designer, but I know that when you look at a site, a large part of the impression you get is conveyed by the font. So although it may see like a minor part of the site to a developer who has to know so many technical details, layout tricks, even transitions and animations to deal with. Don’t dismiss font! The impact it makes can be huge for the overall impression of your site. And know this – downloading the font to a website can be one of the more time consuming pieces of loading a site depending on what font, how many versions – bold, bolder, boldest that you have on the site, and even how you pull the font down (add it as an import to the CSS, link it in the head of the HTML, what is the best choice?)
What are web safe fonts?
Many people, even newer front-end developers, don’t realize that different computers come with a different set of ‘built-in’ fonts based on the operating system. So you may not need to download anything to use a font – as long as you stick to the dozen or so fonts that are termed ‘web safe’ because they are available through the operating system. But this isn’t advised if you want your website to look special or stand out from the crowd for design. If you have a simple blog to convey information and aren’t worried about people judging you on the design of the site, no problem, stick with these fonts. They’ll make your site faster since you don’t have to download anything to make them work.
Do fonts cost money?
Yes, and no. The largest and most popular source of free fonts on the web is currently Google, no surprise there. The reason they are so popular is that there is a large selection, if there is a premium (for pay) font that you like, there is a good chance you can search for a free version that is very similar to the premium font you like and find it for free from Google. Another advantage of using google fonts is the increased chance that someone has already downloaded the font to their computer. Not unlike the thinking that if you use a common CDN version of jQuery, the client likely already has downloaded that to their computer from another site, so there is no performance hit for your site. So why pay when you can get free fonts? Custom look for your site, branding, stand out more from the crowd, you have a special design that needs a special font to go with it. Any of these are valid reasons to pay for a font. Some companies even own their own custom font that no one else can use.
How do you set up your site to use a font?
As with everything in development, there are a few options. The most common you will see is using a <link> tag in the head of the page linking to the font(s). Another option is using @font-face at the top of the CSS file.