Which file is needed by modern browsers with font-awesome?

Question

I have the following in my LESS/css file:

@font-face {
  font-family: 'FontAwesome';
  src: url('/Content/font-awesome/fontawesome-webfont.eot?v=3.0.1');
  src: url('/Content/font-awesome/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('/Content/font-awesome/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('/Content/font-awesome/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

[class^="fa-icon-"],
[class*=" fa-icon-"] {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  display: inline;
  width: auto;
  height: auto;
  line-height: normal;
  vertical-align: baseline;
  background-image: none;
  background-position: 0% 0%;
  background-repeat: repeat;
  margin-top: 0;
}

My application works and shows icons correctly but I am confused about which of these files will be used. I am using all modern browsers IE9, lastest Chrome, Firefox and Safari.

score 2 · Accepted Answer · answered Dec 23 '13 at 03:07

2

Please see the image below

We add font in different formats because every browser has its own way of rendering fonts so font in different formats are included.

answered Dec 23 '13 at 03:07

Asad Ullah

2,257
2
24
23

But does this not make for some very large downloads? I'm trying to use http://www.icnfnt.com/#/ to cut down the size but trying this today it seems to no longer work :-( – Samantha J T Star Dec 23 '13 at 03:19

Which file is needed by modern browsers with font-awesome?

1 Answers1