Fontawesome pro integration

I have all the fontawesome pro fonts, and I would like to integrate them into Outsystems so that I can use the css font-weight property to select different font versions for the standard icons in Outsystems. Does anyone know how to set this up?

You add them to the resources folder and include them in your CSS.

@font-face {
  font-family: 'font-awesome';
  src:  url('font-awesome.eot');
  src:  url('font-awesome.eot#iefix') format('embedded-opentype'),
    url('font-awesome.ttf') format('truetype'),
    url('font-awesome.woff') format('woff'),
    url('font-awesome.svg#font-awesome') format('svg');
}

I have a bunch of font files with names like fa-light-300.woff, fa-solid-900.eot etc.

how do i declare all of these into one font family where i only need to specify the font weight.

Solution

Oh like that.

That's very easy :)

You take the part I posted before and add

  font-weight: 300;
  font-style: normal;

So it becomes

@font-face {
  font-family: 'font-awesome';
  src:  url('font-awesome300.eot');
  src:  url('font-awesome300.eot#iefix') format('embedded-opentype'),
    url('font-awesome300.ttf') format('truetype'),
    url('font-awesome300.woff') format('woff'),
    url('font-awesome300.svg#font-awesome') format('svg');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'font-awesome';
  src:  url('font-awesome400.eot');
  src:  url('font-awesome400.eot#iefix') format('embedded-opentype'),
    url('font-awesome400.ttf') format('truetype'),
    url('font-awesome400.woff') format('woff'),
    url('font-awesome400.svg#font-awesome') format('svg');
  font-weight: 400;
  font-style: normal;
}

As long as you use the same font-family you can have access to the different weights within that same font. For your info, font-style is italic for example.

Solution

Thanks for the help. That was the trick.

Only had to change your example from font-family "font-awesome" to "FontAwesome".