Cómo hacer que tus entradas en el backend muestren tus tipografías del frontend

Una cosa que me encanta en WordPress es cuando puedes ver desde el backend, el lugar en el que escribes, cómo se ven las tipografías del frontend, tu página propiamente dicha.

Cómo siempre el genial CSS Tricks tenía este pequeño hack https://css-tricks.com/snippets/wordpress/apply-custom-css-to-admin-area/ que yo he modificado simplemente para que reconozca mis fuentes puestas en el Personalizador.

El punto es que al ponerlas ahí las pilla para mostrarlas en el frontend pero no cuando escribes el post.

Si escribes este código en tu functions.php y obviamente cambias las urls por donde sea que hayas puesto tu tus fuentes…. ¡Magia!

<?php
add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
  echo '<style>
  @font-face {
    font-family: "HappyTimes";
    src: url("https://misitio.com/myfonts/HappyTimesattheIKOBNewGamePlusEdition-Bold.eot");
    src: url("https://misitio.com/myfonts/HappyTimesattheIKOBNewGamePlusEdition-Bold.eot?#iefix") format("embedded-opentype"),
        url("https://misitio.com/myfonts/HappyTimesattheIKOBNewGamePlusEdition-Bold.woff2") format("woff2"),
        url("https://misitio.com/myfonts/HappyTimesattheIKOBNewGamePlusEdition-Bold.woff") format("woff"),
        url("https://misitio.com/myfonts/HappyTimesattheIKOBNewGamePlusEdition-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "HappyTimes";
    src: url("https://misitio.com/myfonts/HappyTimesattheIKOBNewGamePlusEdition-Regular.eot");
    src: url("https://misitio.com/myfonts/HappyTimesattheIKOBNewGamePlusEdition-Regular.eot?#iefix") format("embedded-opentype"),
        url("https://misitio.com/myfonts/HappyTimesattheIKOBNewGamePlusEdition-Regular.woff2") format("woff2"),
        url("https://misitio.com/myfonts/HappyTimesattheIKOBNewGamePlusEdition-Regular.woff") format("woff"),
        url("https://misitio.com/myfonts/HappyTimesattheIKOBNewGamePlusEdition-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "HappyTimes";
    src: url("https://misitio.com/myfonts/HappyTimesattheIKOBNewGamePlusEdition-Italic.eot");
    src: url("https://misitio.com/myfonts/HappyTimesattheIKOBNewGamePlusEdition-Italic.eot?#iefix") format("embedded-opentype"),
        url("https://misitio.com/myfonts/HappyTimesattheIKOBNewGamePlusEdition-Italic.woff2") format("woff2"),
        url("https://misitio.com/myfonts/HappyTimesattheIKOBNewGamePlusEdition-Italic.woff") format("woff"),
        url("https://misitio.com/myfonts/HappyTimesattheIKOBNewGamePlusEdition-Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
  </style>';
}