By entering a font particular we can personalize the titles, menus and texts of our articles, in order to make them unique on the web.
Adding a little rule to the CSS file: @ font-face.
To choose our font, which must be free, we can either take those already installed on our computer, or look for one on the Internet: a good site is www.fontsquirrel.com, where you will find a huge range of fonts!
After identifying our font, to make it compatible on the web, go to the '@ font-face Generator' page, always on www.fontsquirrel.com: here we upload our font, generate the package and download it on the pc. In this package we will find the font divided into 4 types, which make it compatible with all major browsers.
Now let's upload the package to the server and edit our CSS file:
@font-face { src: url(‘arial-webfont.eot’); src: local (‘ ‘), url(‘arial-webfont.woff’) format (‘woff’), url(‘arial-webfont.ttf’) format(‘truetipe’), url(‘arial-webfont.svg#Arial’) format(‘svg’); font-weight: normal; font-style: normal; }
In practice, this rule first tells the browser to check if the font exists on the computer; if it is not installed here, the string will make the browser load the font with the correct extension to allow it to be viewed!
Another solution is this:
@font-face { src: url(https://www.mywebsite.com/fonts/MyFontName.ttf); } p { }
Once the MyFontName.ttf file (sample font) has been inserted into the fonts folder of our site, it is possible to view the Font named MyFontName or alternatively if the browser does not support CSS3 the Verdana font.
More information can be found here http://www.w3.org/TR/css3-fonts/#the-font-face-rule.
Here are great CSS editors you can use:
- TopStyle
- Balthisar Cascade
- Simple CSS
