custom font

aka Police personnalisée

Télécharger la police, p. ex. https://www.dafont.com/dry-brush.font, la copier sur le serveur du site, p. ex.

/fonts/DryBrush.ttf

Modifier le thème

~/web/c5/packages/theme_pixel/themes/pixel/elements ls -1
...
header_top.php
header_top.php.local.save

more header_top.php
   
<link rel="stylesheet" href="<?php echo $view->getThemePath()?>/css/lamourdeladanse.css" type="text/css" />

header_top.php.local.save est un backup, au cas ou une mise à jour du thème écraserait les modifs

la css:

~/web/c5/packages/theme_pixel/themes/pixel/css more lamourdeladanse.css

/* local css */
* {
/* font-size: 17px; */
}
@font-face {
    font-family: 'DryBrush';
    src: url('/fonts/DryBrush.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
 
.DryBrush {
     font-family: 'DryBrush';
}

on peut ensuite dans l'éditeur en code source appeler la police

https://www.dafont.com/1-punk.font

<style>
@font-face {
    font-family: '1Punk';
    src: url('/fonts/1Punk.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
 
.1Punk {
     font-family: '1Punk';
}
</style>
<p class="1Punk">Hello, world!</p>

Hello, world!

custom font

2e exemple avec police punk

Liens

Radeff's Wiki