When creating a website it is important to use a web font that is appealing and compliments your web design. There are many resources out there that have free web fonts for web designers. You can download them or you use a third party service.
Custom Web Fonts
To use your own web font you can create a font-face kit, you can also just download one if it’s available. Any TrueType font will work but sans-serif is the recommended type. A font-face kit consists of four files of the same font, a eot file , a woff file, a ttf file and a svg file. To create a font-face kit you can go to the website Font Squirrel. It will generate all of the above files using any TrueType font you download.
Below is a list of websites where you can download free web fonts, some give you the option to download the complete font face kit and some give you HTML, JavaScript, or CSS @import to enter into your code.
Font web sites:
Applying the Web Font
- If you are using a custom web font you downloaded then you will need to use @font-face in your CSS file, if not go to the next step. Also make sure you upload the web fonts to a folder on your web server. In this example the folder is in the root directory and is called fonts.
-
@font-face { /* The Name of the font, you will use it for reference */ font-family: 'FontRegular'; /* The eot font, notice the font is located in the fonts directory */ src: url('fonts/font-name.eot'); src: url('fonts/font-name.eot'?#iefix') format('embedded-opentype'), /* The woff font */ url('fonts/font-name.woff') format('woff'), /* The ttf font */ url('fonts/font-name.ttf') format('truetype'), /* The svg font */ url('fonts/font-name.svg#FontRegular') format('svg'); font-weight: normal; font-style: normal; } - If you are using HTML Code, JavaScript, or CSS @import, enter the code given to you. This code usually goes in the <head> section of your HTML.
- The next step is to create the CSS code. The CSS allows you to use the font in your web design. The CSS code to use is called font-family. You can create a class or use a div, as we did in the example below, the div ID is called main. Also, notice the name of the font is what you named it in the @font-face code.
-
#main { font-family: 'FontRegular'; font-size: 38px; font-weight: 500; }
Congratulations, you now know how to add a custom web font to your web design.
1 Comment
Kyle @Brandcouver
Great quick article. I would highly recommend the use of Google Fonts. They are so easy to use and have an amazing selection these days. Typography is becoming just as important on the web as it has been in print for years.