7:43 PM
Peter Giammarco
When creating a website it is important to use a font that is appealing and compliments your web design. There are many resources out there that have free fonts for web designers. You can download them or you use a third party service. I will explain how to do this and tell you the top sites that have the best fonts.
Custom Fonts
To use your own web design 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 web site 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 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 Font
- If you are using custom fonts 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 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 it in a div as we did in the example below, the div id is 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; }
Posted in: 
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.