[5.2.1] fontawsome.css has no font-face to load the font files

[peter1szalatnay]

Steps to reproduce the issue

Don't know if this is a bug or how it should work. But the fontawesome.css in the vendor folder has no font-face for the font files loaded.

Guess because brands.scss, regular.scss and solid.scss is not compiled into it.

Is this vendor library only supposed to be compiled into your own library or be able to used as standalone?

Expected result

Font awesome icons are loaded when using the CSS.

Actual result

The font files are not loaded.

System information (as much as possible)

Joomla 5.2.1

Additional comments

[hans2103]

According to templates/cassiopeia/joomla.asset.json the file system/joomla-fontawesome.min.css is loaded

https://github.com/joomla/joomla-cms/blob/816cd8013012aa5faf21c53636a0a14f17caa64b/templates/cassiopeia/joomla.asset.json#L104C1-L108C6

The compiled file can be found in /media/system/css/joomla-fontawesome.min.css

in this file I can find a reference to the font-face... at least on my machine.

:root, :host {
    --fa-style-family-classic: "Font Awesome 6 Free";
    --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free"
}

@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../../../media/vendor/fontawesome-free/webfonts/fa-regular-400.woff2?v=2d89b4) format("woff2"), url(../../../media/vendor/fontawesome-free/webfonts/fa-regular-400.ttf?v=370dd5) format("truetype")
}

.far, .fa-regular {
    font-weight: 400
}

:root, :host {
    --fa-style-family-classic: "Font Awesome 6 Free";
    --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free"
}

@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url(../../../media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2?v=237f4a) format("woff2"), url(../../../media/vendor/fontawesome-free/webfonts/fa-solid-900.ttf?v=adec7d) format("truetype")
}

.fas, [class^=icon-], [class*=\ icon-], .fa-solid {
    font-weight: 900
}

:root, :host {
    --fa-style-family-brands: "Font Awesome 6 Brands";
    --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands"
}

@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../../../media/vendor/fontawesome-free/webfonts/fa-brands-400.woff2?v=715d59) format("woff2"), url(../../../media/vendor/fontawesome-free/webfonts/fa-brands-400.ttf?v=56c8d8) format("truetype")
}

this is what I see on my machine.

[peter1szalatnay]

In my component I'm building I want to use the vanilla fontawsome.css from the media/vendor folder. And right now it cannot be used as there is no font files loaded in it.

That is why I am questioning if it is meant to be used as standalone or should be compiled from the scss files.

[hans2103]

After installation of Joomla the fonts (ttf, woff2) can be found in media/vendor/font-awesome-free/webfonts.
If they are not present in yours, then there might be an issue with your installation

[Fedik]

Yeah, that a bug. default fontawesome.css does not include woff2.
There was a fix for j4 #31364 , but for j5 it probably need a litle more work.

Joomla have to provide fontawesome/all.css (which include woff files) instead of fontawesome/fontawesome.css

[Fedik]

Note: you can use

joomla-cms/templates/cassiopeia/joomla.asset.json

Lines 104 to 108 in e6518fb

	{
	"name": "fontawesome",
	"type": "style",
	"uri": "system/joomla-fontawesome.min.css"
	}

In your template, the same as joomla cassiopeia do, which also includes some classes for core icon-.

[pAnd0rASBG]

I think, the proper way here would be to build what you need based on the supplied scss files:
https://docs.fontawesome.com/web/use-with/scss

[peter1szalatnay]

Note: you can use

joomla-cms/templates/cassiopeia/joomla.asset.json

Lines 104 to 108 in e6518fb

{
"name": "fontawesome",
"type": "style",
"uri": "system/joomla-fontawesome.min.css"
}
In your template, the same as joomla cassiopeia do, which also includes some classes for core icon-.

Yes I know, but that still don't change the main issue that the vendor/fontawesome-free is not compiled with font-faces. But if that is by design then it all good.

@Fedik as you pointed out maybe just create a fontawsome-all.scss in the folder that includes all files. This should be compiled on Joomla build, and now we have both fontawsome.css broken and fontawsome-all.css that works.

[Fedik]

maybe just create a fontawsome-all.scss in the folder that includes all files

Yes, kind of that. But I think it is enough to replace fontawsome.css to fontawsome-all.css, beacause fontawsome.css as it is now is useless anyway.

[hans2103]

When working with Cassiopeia the file media/system/css/joomla-fontawesome.css is loaded.
This css file is created with build/media_source/system/scss/joomla-fontawesome.scss as base.

https://github.com/joomla/joomla-cms/blob/8c8273e5c69ae13bc8ab640c430f920478cd0dcc/build/media_source/system/scss/joomla-fontawesome.scss

This file does contain @font-face

The file media/vendor/fontawesome-free/css/fontawesome(.min).css is created by compiling just a part of the file mentioned above.
It is compiled without compiling the font-face reference.

https://github.com/joomla/joomla-cms/blame/ffa3108dcee43c1715e059283bab20d49ae2a966/build/build-modules-js/init/patches.es6.js#L37-L41

commit ffa3108 by @laoneo
Allon .. can you tell us why you have compiled the fontawesome without the font-face reference?