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



¿Quieres federar la conversación?
Primero necesitarás el plugin Webmention y de paso leer sobre la Federación.

Para que podamos hacerlo, y por tanto tú tengas soberanía de tu contenido, puedes responder haciendo lo siguiente:
- Escribe una entrada en tu blog respondiendo.
- Coloca en esa entrada el enlace de este post.
- Pega en el campo disponible más abajo la URL de tu entrada y pulsa ¡Hazme ping!.
- Tu respuesta entonces aparecerá (posiblemente después de ser moderada) en esta página.

¿Quieres actualizar o borrar tu respuesta? Actualiza o borra tu entrada y vuelve a introducir la URL de tu entrada de nuevo. (Aprende más)

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