Fountain

Linking webfonts

For every page displaying fonts there’s a need for a link to webfont and @fontface for styling.


In each template that comes with Fountain, each controller fills $fontFiles with the webfont used on the page.

By using slots in the head snippet, we can inject and @fontface needed for each page.

<?php snippet( 'fountain/head', slots: true ) ?>
    <?php slot( 'styles' ) ?>
        <?php foreach ( $fontFiles as $font ) : ?>
            <?= $font->toLinkRel() ?>
        <?php endforeach ?>
        <style>
            <?php foreach ( $fontFiles as $font ) : ?>
                <?= $font->toFontFace() ?>
            <?php endforeach ?>
        </style>
      <?php endslot() ?>
<?php endsnippet() ?>

The two methods, toLinkRel and toFontFace does what you expect. Loop through each file and …

Remember to add any custom font fields you create to $fontFiles.