Añadir fuentes al TinyMCE Advanced de forma sencilla

aingeru87 · 23 Mar 2014

¿Existe alguna manera de añadir fuentes al desplegable del Advanced TinyMCE en el editor visual?

Me estoy volviendo loco y no encuentro ningún post en foros que ablen sobre este tema.

Tengo la fuente descargada y en wp-content/themes/mitema e creado la carpeta "fonts" donde alli tengo subidos todos los archivos de una fuente en concreto....(.eot /.woff / .ttf / .svg ). Hecho esto, en mi hoja de estilos (style.css) de mi tema tengo incluida la siguiente regla:

@font-face {
font-family: 'mi fuente';
src: url('fonts/mi fuente.eot'); /* IE9 Compat Modes */
src: url('fonts/mi fuente.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/mi fuente.woff') format('woff'), /* Modern Browsers */
url('fonts/mi fuente.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/mi fuente.svg#svgFontName') format('svg'); /* Legacy iOS */

Por eso os escribo porque después de esto, quiero poder elegir una fuente (que ya tengo embebida en la hoja css) desde el desplegable del editor visual de TinyMCE Advanced, y no tengo ni idea de como se hace.

Supongo que habría que tocar o añadir algo de código dentro del propio plugin, en el editor de plugins, pero nose donde ni como...

¿Alguien sabe cómo?

Muchas Gracias

Carlos Arreola · 11 Dic 2024

aingeru87 dijo:
¿Existe alguna manera de añadir fuentes al desplegable del Advanced TinyMCE en el editor visual?

Me estoy volviendo loco y no encuentro ningún post en foros que ablen sobre este tema.

Tengo la fuente descargada y en wp-content/themes/mitema e creado la carpeta "fonts" donde alli tengo subidos todos los archivos de una fuente en concreto....(.eot /.woff / .ttf / .svg ). Hecho esto, en mi hoja de estilos (style.css) de mi tema tengo incluida la siguiente regla:

@font-face {
font-family: 'mi fuente';
src: url('fonts/mi fuente.eot'); /* IE9 Compat Modes */
src: url('fonts/mi fuente.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/mi fuente.woff') format('woff'), /* Modern Browsers */
url('fonts/mi fuente.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/mi fuente.svg#svgFontName') format('svg'); /* Legacy iOS */

Por eso os escribo porque después de esto, quiero poder elegir una fuente (que ya tengo embebida en la hoja css) desde el desplegable del editor visual de TinyMCE Advanced, y no tengo ni idea de como se hace.

Supongo que habría que tocar o añadir algo de código dentro del propio plugin, en el editor de plugins, pero nose donde ni como...

¿Alguien sabe cómo?

Muchas Gracias

¡Claro que sí! Para añadir fuentes al desplegable del TinyMCE Advanced en el editor visual de WordPress, puedes seguir estos pasos:

1. Primero, asegúrate de que la fuente que deseas añadir esté correctamente enlazada en tu archivo CSS, como has mostrado en tu fragmento de código.

2. Abre el archivo functions.php de tu tema y añade el siguiente código para registrar la fuente y añadirla a la lista de fuentes disponibles en TinyMCE Advanced:

```php
function custom_fonts_tinymce($initArray){
$custom_fonts = 'Arial=Arial;Comic Sans MS=Comic Sans MS;Georgia=Georgia;Tahoma=Tahoma;Trebuchet MS=Trebuchet MS;Verdana=Verdana;Mi Fuente=mi fuente';
$initArray['font_formats'] = $custom_fonts;
return $initArray;
}
add_filter('tiny_mce_before_init', 'custom_fonts_tinymce');
```

3. Guarda los cambios en el archivo functions.php y luego recarga la página del editor visual de WordPress. Ahora deberías poder ver tu fuente añadida a la lista desplegable de fuentes en TinyMCE Advanced.

Espero que estos pasos te ayuden a añadir tu fuente personalizada al editor visual de forma sencilla. ¡Buena suerte!

Añadir fuentes al TinyMCE Advanced de forma sencilla

aingeru87

Carlos Arreola

Temas similares