<f:comment>
    It is not recommended to load more than 3 or 4 resources with preload as it will result in a longer initial load time. Hence it makes most sense to have two or three critical fonts and the main stylesheet as preloaded resources and not more.

    You do not need to load woff variants of fonts in preload, as browsers which support preload will also support woff2!
</f:comment>

<f:if condition="{baseFontFamily}">
    <link href="{f:uri.resource(resource: baseFontFamily.resource)}"
          rel="preload"
          as="font"
          type="font/woff2"
          crossorigin>
</f:if>

<f:if condition="{baseBoldFontFamily}">
    <link href="{f:uri.resource(resource: baseBoldFontFamily.resource)}"
          rel="preload"
          as="font"
          type="font/woff2"
          crossorigin>
</f:if>

<f:if condition="{headingFontFamily}">
    <link href="{f:uri.resource(resource: headingFontFamily.resource)}"
          rel="preload"
          as="font"
          type="font/woff2"
          crossorigin>
</f:if>

<f:if condition="{decorativeFontFamily}">
    <link href="{f:uri.resource(resource: decorativeFontFamily.resource)}"
          rel="preload"
          as="font"
          type="font/woff2"
          crossorigin>
</f:if>

<f:comment>
    Loading all the fonts this early (and inline) is crucial for all browsers with no preload support and in order to trigger the swap in supporting browsers as early as possible.

    This part is seperated from the critical CSS at the time of writing. It may or may not make sense to move the font-face rules to the critical portion of CSS in another partial.
</f:comment>

<style>

    <f:if condition="{baseFontFamily}">
        @font-face {
            font-family: BaseFontFamily;
            font-display: swap;
            <f:comment>f:comment is needed to force fluid to continue parsing inside style tag.</f:comment>
            src: url('{f:uri.resource(resource: baseFontFamily.resource)}') format('woff2');
        }
    </f:if>

    <f:if condition="{baseBoldFontFamily}">
        @font-face {
            font-family: BaseFontFamily;
            font-display: swap;
            font-weight: 700;
            <f:comment>f:comment is needed to force fluid to continue parsing inside style tag.</f:comment>
            src: url('{f:uri.resource(resource: baseBoldFontFamily.resource)}') format('woff2');
        }
    </f:if>

    <f:if condition="{headingFontFamily}">
        @font-face {
            font-family: HeadingFontFamily;
            font-display: swap;
            <f:comment>f:comment is needed to force fluid to continue parsing inside style tag.</f:comment>
            src: url('{f:uri.resource(resource: headingFontFamily.resource)}') format('woff2');
        }
    </f:if>

    <f:if condition="{decorativeFontFamily}">
        @font-face {
            font-family: DecorativeFontFamily;
            font-display: swap;
            <f:comment>f:comment is needed to force fluid to continue parsing inside style tag.</f:comment>
            src: url('{f:uri.resource(resource: decorativeFontFamily.resource)}') format('woff2');
        }
    </f:if>
</style>
