Web Fonts — How they work, methods and techniques for using them

There have been a lot of changes in the web world, one of which is in how to use fonts for websites.
We will not discuss the use of standard fonts (system fonts) that are automatically included on every computer, because they are very limited in number and of course less varied and are a bit boring too.

Luckily now there is a new technology available, which allows us to use beautifully designed web fonts without paying (free) and of course it’s legal.

Web Fonts

Several Types of Techniques for Using Web Fonts

  1. By subscribing to the Web Font provider.
    Examples like Typekit or Font Deck


Create an Account on their website
Choose the font you want in their library.
Web designers just export the code snippet, and implement it on the website.
You are required to pay to subscribe to the font annually. It costs around 5 to £10 pounds per font per year.

  1. Find free (open license) web fonts on sites like Font Squirrel

Choose the font you want in the web library
Web designers just export the @fontface code and the font file is also placed in your work folder, then implement it on the website.
To stay safe in legal matters, you must make sure the font you use has an open license, which allows the font to be used on any website you have. These can be found on sites like font squirrel which are 100% free for commercial use. Happy!!. You are allowed to download the font, and you can also use it in Photoshop, and other applications.

  1. Google Fonts – Free & Open Source

Choose the font you like from their library (google)
Web designers just copy and paste the code listed and apply it on your site.
You are allowed to download the font, so you can use the font in Photoshop first if you are designing web starting from Photoshop.

Also Read:

Easy Ways to Know the Font Type on a Website
Beautify Your Website with Adobe Edge Fonts
How to Choose a Good and Correct Font
Free Tool To Create Your Own Fonts
Which method to choose?
The decision usually boils down to which provider has the font you want to use, so basically decide which font you want to use, that way you know which method to use. It’s different when you decide to look for a free one and then choose the available fonts, so that means your choice is narrower. Because sometimes the font that is suitable for your website is a paid font. So first determine the font you want to use.

Even though @fontface (the code used to define fonts in css) is supported by most browsers (provided all the required font formats are available and linked correctly) sometimes how the browser renders the fonts is a bit sloppy, especially in older browsers. Sometimes there are fonts that when the size is determined, the results are not the same in some browsers, this can usually be due to a poor font creation process, or the lack of dots on the font which makes the results less good.
So our advice is always to test the font first, the font you want to use, don’t just look at an attractive display and then you buy or use it directly on your website.

Hopefully this article can be useful and give you an idea how to use web fonts for your website.

See you in the next article, greetings web design Indonesia.