XF 2.2 Register Custom LESS

[Foxtrek_64]

Hi all,

Trying to figure out how to get this wired up and it's giving me a bit of trouble. I have a custom bbcode added, intended to be used as such:

[tok]jan pi (toki-pona) li jan pi (pona mute)[/tok]

The custom bbcode adds a custom class, .toki-pona, and wraps the text in a span.

<span class="toki-pona">jan pi (toki-pona) li jan pi (pona mute)</span>

This all works great. Next I've added a template, toki_pona.less, with the following content. Pulling from GitHub is temporary until I can get things working.

@font-face {
    font-family: 'FairfaxPonaHD';
    src: url('https://github.com/kreativekorp/open-relay/raw/refs/heads/master/FairfaxHD/FairfaxPonaHD.eot');
    src: url('https://github.com/kreativekorp/open-relay/raw/refs/heads/master/FairfaxHD/FairfaxPonaHD.eot#iefix') format('embedded-opentype'),
         url('https://github.com/kreativekorp/open-relay/raw/refs/heads/master/FairfaxHD/FairfaxPonaHD.ttf') format('truetype')
    font-weight: normal;
    font-style: normal;
}

.toki-pona {
    font-family: 'FairfaxPonaHD'
}

After this, I edited extra.less and added it inline after a couple of entries added by my theme:

{{ include('xenfocus_base.less') }}
{{ include('xenfocus_theme.less') }}
{{ include('toki_pona.less') }}

When I view a page with the custom bbcode on it, I get the raw text in the standard font for my theme. Inspecting the element, I do have the expected span with class="toki-pona", however XF doesn't seem to be able to find this class.

Do I need to put this somewhere other than extra.less? How can I get this style to be applied?

Edit: It appears I did not scroll up. It looks like it is being registered correctly, but there is quite possibly something wrong with my less code.
The @font-face declaration appears to break some styling in my page, particularly in relation to the header.

Am I doing the right thing to register a new font family or is there a better way of going about it?

 

[Foxtrek_64]

For reference, here's what it should look like. Given the input in the first box, it should render as present in the second box. The only difference between the two boxes is the font that's applied, Fairfax HD and Fairfax Pona HD, respectively.

 

[Foxtrek_64]

I was able to figure it out.

1. Create toki_pona.css:

@font-face {
    font-family: "FairfaxPonaHD";
    src: url('styles/fonts/FairfaxPonaHD/FairfaxPonaHD.eot');
    src: url('styles/fonts/FairfaxPonaHD/FairfaxPonaHD.ttf') format('truetype');
}

.toki-pona {
    font-family: 'FairfaxPonaHD';
    font-weight: normal;
    font-style: normal;
}

2. Create toki_pona_setup template:

<link rel="preload" href="{{ base_url('styles/fonts/FairfaxPonaHD/FairfaxPonaHD.eot') }}" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous" />
<link rel="preload" href="{{ base_url('styles/fonts/FairfaxPonaHD/FairfaxPonaHD.ttf') }}" as="font" type="font/ttf" crossorigin="anonymous" />

3. Edit helper_js_global template to add public:toki_pona.css to $cssUrls array. Add <xf:include template="toki_pona_setup" /> before the css import.

Font now renders as expected: