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

contacta     ·     sobre     ·     azar     ·     buchaca     ·     manifiestos    ·   

javascript code
  • Forma

    La intención, la mirada, la propuesta. Dónde yace lo que parece haber cuajado en un proceso de meditación-acción.

Cuando escribimos dentro de WordPress normalmente no vemos la tipografía que hemos escogido para la web. ¡Con este truco podrás hacerlo!

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>';
}

Hagamos de esto una conversación

Deja un comentario

blogroll

Licencia de producción de pares excepto en lo que no sea de mi puño y bit.

Descubre más desde Comunicación Abierta

Suscríbete ahora para seguir leyendo y obtener acceso al archivo completo.

Seguir leyendo