Adding a style tag in the HTML head tag with fusion afx

Using Neos & Flow
1

Hello,
maybe someone can help me or point me in the right direction, how to add a <style> tag into the HTML <head> tag for my font-loading strategy.

I have a Neos.Fusion:Component prototype named Stylesheet.fusion where I tried to add the following code snippet.

    renderer = afx`
        <link rel="stylesheet" href={StaticResource.uri('Vendor.foo', 'Public/css/styles.css')} />

        <style>
            @font-face {
                font-family: 'Apex New';
                font-weight: 400;
                font-style: normal;
                font-display: swap;
                src:
                    local('ApexNew Book'),
                    local('ApexNew-Book'),
                    url('/css/fonts/apexnew/ApexNew-Book.woff2') format('woff2'),
                    url('/css/fonts/apexnew/ApexNew-Book.woff') format('woff');
                unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
            }

        </style>

This triggers the following render error.

An exception was thrown while Neos tried to render your page
Expression "font-family: ‘Apex New’; font-weight: 400; font-style: normal; font-display: swap; src: local(‘ApexNew Book’) …

I tried the solution from @jonnitto provided in the github repo fusion-fx by adding {" "} after/before the <style> tags.

This removes the render error. But when I try to add the eel helper {StaticResource.uri('Vendor.foo', 'Public/css/fonts/....')} for the font path/files, the eel helper doesn’t get rendered only the “eel string” is shown.

    renderer = afx`
        <link rel="stylesheet" href={StaticResource.uri('Vendor.foo', 'Public/css/styles.css')} />

        <style>{"
            @font-face {
                font-family: 'Apex New';
                font-weight: 400;
                font-style: normal;
                font-display: swap;
                src:
                    local('ApexNew Book'),
                    local('ApexNew-Book'),
                    url({StaticResource.uri('Vendor.foo', 'Public/css/fonts/apexnew/ApexNew-Book.woff2')}) format('woff2'),
                    url('/css/fonts/apexnew/ApexNew-Book.woff') format('woff');
                unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
            }

        "}</style>

Thanks for any help!

2

You need to do just normal string concatenation like:

Before

url({StaticResource.uri('Vendor.foo', 'Public/css/fonts/apexnew/ApexNew-Book.woff2')}) format('woff2'),

After

url(" + StaticResource.uri('Vendor.foo', 'Public/css/fonts/apexnew/ApexNew-Book.woff2') + ") format('woff2'),
3

Thanks for your help @Marc. I thought I tried all variants to concatenate the string, but looks like I didn’t :thinking: :man_shrugging:

1 Like