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

javascript code

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>';
}
Suscribirte
Notificación de
guest

0 Comments
Inline Feedbacks
View all comments

+ SIGUE NAVEGANDO

Jabber: mensajería libre y segura

Si usas Whatsapp asiduamente como servicio de mensajería deberías empezar a plantearte algo muy sencillo... ¿quién puede ver esa información? Recientemente se han realizado algunos cambios en ese sistema pero aún, para momentos en los que nuestras comunicaciones necesitan ser realmente seguras, no es el más recomendado. Existen alternativas bastante sencillas de usar como Telegram (que nos da una…

Formatos de entrada

Para investigar el poder tener diseños por formato de entrada. https://codex.wordpress.org/es:Formatos_de_Entrada Qué son Formatos de Entrada en WordPress — WPBody…

Se trata de mantenerte en las teclas

Hace unos días hablaba con un comunicador de una plataforma de Perú, muy interesante, una organización que trabaja con organizaciones comunitarias e indígenas. Me comentaba que cambian la web de mucho tiempo en mucho tiempo, porque es algo que requiere tiempo para pensarlo y que el grupo acepte los cambios. ¡5 años hacía de la última reestructuración de la web! ¡5 años! Y si pongo admiración es…