El Bruno

Hello!

While the ability to define fonts (fonts) external CSS is from several versions ago, it seems that with CSS3 has been really fashion. The issue is, as with almost everything related to HTML5 and CSS3, in which different there are types of sources and each browser implements which comes out of the tip of the nose. Thus, if we want to do something that is actually multi browser, because we have to implement several different formats for a type of font (font type).

For example, Web Fonts (WOOF) have a license that is structured for use online and in addition there are several services that allow host such sources, for example www.fontsquirrel.com and www.google.com/ fonts.

What usually happens is that if you find a font type that is not in this format, so the best thing you can do is create a package with almost all types of supplies needed to run your source in almost all browsers.

As for that here is an example step by step.

1. For this example, I have chosen the source Acknowledgement from fontsquirrel.

2. When I get into the detail of this font, I can see in your licensing model that it does not allow download in other formats (in addition to issues of distribution, use, etc.).

3. So I download the OTF, and unzip it. I see that in the ZIP I have an OTF file that you need for the creation of a package of webfonts.

4. From the main menu of FontSquirrel , there is access to “WEBFRONT GENERATOR”. Once inside the same I can add the OTF file that I downloaded in the previous steps.

By the way, this is a free service, you should think about donating something… Although it is €1. I do it.

5. The button “DOWNLOAD YOUR KIT” Download us a zip where you will find the different types of formats that we want for this font type and some examples in the html file.

6 Ready! We already have our CSS code to download this font in WebFont format

   1: @font-face{ 

   2:     font-family: 'MyWebFont';

   3:     src: url('WebFont.eot');

   4:     src: url('WebFont.eot?#iefix') format('embedded-opentype'),

   5:          url('WebFont.woff') format('woff'),

   6:          url('WebFont.ttf') format('truetype'),

   7:          url('WebFont.svg#webfont') format('svg');

   8: }

Download: www.fontsquirrel.com

Greetings @ Home

El Bruno

Google