@ font-face - When the site font is not present on the user's computer

Special fonts make a website look much nicer and more differentiated, but most of the special fonts are not present on the user's machine, so when the user accesses a site with a special font, the browser cannot render the font, and ends up opening the site with a standard font like Arial or Times.

There are several ways to solve this, but I'll be talking about the way I usually use it.

@font-face attribute

internal method

It is the recommended way for those who want a different font, but want to make the font-face on their own site, without calling external sites. The problem with using font-face is that some browsers don't render some types of font extensions, so it takes a hack or multiple declarations for the technique to be crossbrowser (works in all browsers).

This method started to gain more attention in the middle due to the Paul Irish article promoting Bulletproof @font-face. Nowadays, the most suitable crossbrowser code block is:

@font face {
font-family: Graublauweb;
src: url('Graublauweb.eot'); /* IE9 Compatibility Modes */
src: url('Graublauweb.eot?') format('eot'), /* IE6-IE8 */
url('Graublauweb.woff') format('woff'), /* Modern Browsers */
url('Graublauweb.ttf') format('truetype'), /* Safari, Android, iOS */
url('Graublauweb.svg#svgGraublauweb') format('svg'); /* Legacy iOS */

If you prefer, the Font Squirrel created a font-face generator, What about?

I also recommend a Smashing Magazine article about font-face.

If you want to know about font family, access the article font family from the Maujor website

With information from Bernard de Luna

 450 Total Visualizações,  1 Visualizações Hoje

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.