{"id":28496,"date":"2019-11-11T06:31:06","date_gmt":"2019-11-11T14:31:06","guid":{"rendered":"https:\/\/kinsta.com\/?p=55983"},"modified":"2025-09-01T17:40:33","modified_gmt":"2025-09-01T15:40:33","slug":"como-cambiar-las-fuentes-en-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/","title":{"rendered":"\u00bfC\u00f3mo cambiar las fuentes en WordPress? (cambiar el tama\u00f1o, el color y optimizar)"},"content":{"rendered":"<p>Las fuentes pueden marcar la diferencia entre un sitio web aburrido y uno hermoso. Al aprender a cambiar la <a href=\"https:\/\/kinsta.com\/es\/blog\/fuentes-modernas\/\">fuente en WordPress<\/a>, puede hacer que su sitio se vea moderno, profesional y de marca.<\/p>\n<p>Pero, \u00bfcu\u00e1l es la mejor manera de usar las <a href=\"https:\/\/kinsta.com\/es\/blog\/fuentes-wordpress\/\">fuentes en su sitio de WordPress<\/a>, y c\u00f3mo elegir las fuentes adecuadas para su dise\u00f1o?<\/p>\n<p>En esta gu\u00eda, le explicar\u00e9 todo lo que necesita saber sobre las fuentes en WordPress. Aprender\u00e1 acerca de:<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2 id=\"terminology\">Fuentes: La Terminolog\u00eda<\/h2>\n<p>Empecemos por mirar la terminolog\u00eda sobre las fuentes en la web.<\/p>\n<ul>\n<li>Las fuentes Web (alias <a href=\"https:\/\/kinsta.com\/es\/blog\/html-fuentes\/\">fuentes HTML<\/a>) son fuentes alojadas en un sitio Web de terceros y vinculadas a su sitio.<\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/fuentes-locales\/\">Las fuentes alojadas localmente<\/a> son precisamente eso (alojadas en los servidores de su sitio web).<\/li>\n<li>Las <a href=\"https:\/\/kinsta.com\/es\/blog\/fuentes-seguras-para-la-web\/\">fuentes seguras para la Web<\/a> son una gama limitada de fuentes que est\u00e1n preinstaladas en (casi) todas las computadoras y a las que puede estar seguro de que todos sus visitantes tendr\u00e1n acceso.<\/li>\n<\/ul>\n<p>Echemos un vistazo a las opciones para agregar fuentes a su sitio web.<\/p>\n<h2 id=\"options\">\u00bfC\u00f3mo agregar fuentes a su sitio de WordPress? (las Opciones)<\/h2>\n<p>Antes de saltar a la hora de a\u00f1adir fuentes a su sitio, es \u00fatil que comprenda las opciones que tiene a su disposici\u00f3n.<\/p>\n<p>Las fuentes son parte del dise\u00f1o de su sitio, as\u00ed que en la mayor\u00eda de los casos, ser\u00e1n codificadas a trav\u00e9s de su tema &#8211; pero no siempre. En algunos casos, puede decidir utilizar un plugin para habilitar una gama m\u00e1s amplia de fuentes en su sitio.<\/p>\n<p>Aqu\u00ed est\u00e1n algunas de las opciones disponibles para usted:<\/p>\n<ul>\n<li>Uso de fuentes web como <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-google-fonts\/\">Google Fonts<\/a> mediante la instalaci\u00f3n de un complemento que le da acceso.<\/li>\n<li>Usar fuentes web codific\u00e1ndolas en el tema y encol\u00e1ndolas (no es tan dif\u00edcil como parece).<\/li>\n<li>Alojamiento de sus fuentes en su propio sitio web y a\u00f1adirlas a <a href=\"https:\/\/kinsta.com\/es\/blog\/instalar-tema-wordpress\/\">su tema<\/a>.<\/li>\n<\/ul>\n<p>Hay dos distinciones principales: si utiliza fuentes web, que est\u00e1n alojadas fuera de su sitio, o si decide alojar sus archivos de fuentes usted mismo. En esta gu\u00eda, veremos los pros y los contras de cada uno.<\/p>\n<p>Comencemos por ver las fuentes web: por qu\u00e9 puede elegir utilizarlas y las formas de a\u00f1adirlas a su sitio.<\/p>\n<h2 id=\"webfonts\">Uso de fuentes web en WordPress<\/h2>\n<p>Las fuentes web son la forma m\u00e1s popular de a\u00f1adir fuentes a su sitio web porque facilitan la adici\u00f3n de una amplia gama de fuentes.<\/p>\n<h3>\u00bfQu\u00e9 son las fuentes Web?<\/h3>\n<p>Las fuentes web son fuentes que se alojan en el sitio web de un proveedor externo. En lugar de copiar los archivos a su propio sitio, se enlaza con el sitio web del proveedor y se extraen de all\u00ed.<\/p>\n<p>Esto significa que usted tiene acceso a una gran variedad de fuentes sin tener que usar el espacio del servidor en su propio hosting. Tambi\u00e9n significa que si los archivos de fuente cambian con el tiempo, no tiene que actualizar sus archivos y tendr\u00e1 acceso autom\u00e1ticamente a las nuevas versiones de los archivos del proveedor.<\/p>\n<p>Las fuentes web pueden ser gratuitas o puede pagarlas, normalmente a trav\u00e9s de una suscripci\u00f3n. Algunos proveedores populares lo son:<\/p>\n<ul>\n<li><a href=\"https:\/\/fonts.google.com\/\">Google Fonts<\/a>. El mayor proveedor de fuentes web gratuitas. Tambi\u00e9n puede descargar todas sus fuentes a su computadora, es decir, si desea crear materiales fuera de l\u00ednea utilizando las mismas fuentes que su sitio web, puede hacerlo. Y todo es gratis.<\/li>\n<li><a href=\"https:\/\/edgewebfonts.adobe.com\/\">Fuentes web de Adobe Edge<\/a>. Estos tambi\u00e9n son gratuitos. Aunque est\u00e1n dise\u00f1ados para ser utilizados con productos de Adobe, funcionan bien en cualquier sitio web.<\/li>\n<li><a href=\"https:\/\/www.fonts.com\/browse\">Fonts.com<\/a> es un proveedor premium de fuentes, que puede necesitar utilizar si tiene que hacer coincidir su fuente web con una fuente de su material impreso y la fuente no est\u00e1 disponible a trav\u00e9s de un proveedor gratuito.<\/li>\n<li><a href=\"https:\/\/www.fontfabric.com\/fonts\/\">fontfabric<\/a> es un dise\u00f1ador de fuentes que proporciona fuentes premium para su uso como fuentes web y en l\u00ednea. Tendr\u00e1 que pagar por ellos, pero obtendr\u00e1 algo m\u00e1s individual que si utiliza fuentes de Google.<\/li>\n<\/ul>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/09\/google-fonts.jpg\" alt=\"Google Fonts\" width=\"1500\" height=\"849\"><figcaption class=\"wp-caption-text\">Google Fonts<\/figcaption><\/figure>\n<p>Todos estos proveedores le permiten servir las fuentes directamente desde sus servidores a\u00f1adiendo c\u00f3digo a <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-sitio-web-costo\/\">su sitio de WordPress<\/a> o a veces <a href=\"https:\/\/kinsta.com\/es\/secciones\/plugins-wordpress\/\">usando un plugin<\/a> que significa que no tiene que a\u00f1adir ning\u00fan c\u00f3digo.<\/p>\n<p>Las fuentes web son diferentes de las fuentes seguras para la web. Puede utilizarlos como respaldo para las fuentes web en caso de que el visitante de su sitio web no pueda conectarse a la fuente web por alguna raz\u00f3n. Le mostrar\u00e9 c\u00f3mo hacerlo m\u00e1s adelante en este post.<\/p>\n<h3>\u00bfPor qu\u00e9 usar fuentes Web?<\/h3>\n<p>As\u00ed que ahora que sabe lo que son las fuentes web, \u00bfpor qu\u00e9 elegir\u00eda usarlas en lugar de alojar sus propias fuentes?<\/p>\n<p>Aqu\u00ed est\u00e1n algunos de los beneficios:<\/p>\n<ul>\n<li>Facilidad: a\u00f1adir algunas l\u00edneas de c\u00f3digo o instalar un plugin es m\u00e1s r\u00e1pido que descargar y cargar los archivos de fuentes y facilita el cambio de las fuentes si as\u00ed lo decide en el futuro.<\/li>\n<li>Rango de fuentes: hay miles de fuentes disponibles como fuentes web y la lista crece constantemente.<\/li>\n<li>Actualizaciones: Si el archivo de fuente necesita ser actualizado, tal vez para agregar fuentes variables (m\u00e1s de las cuales en breve) o para agregar caracteres adicionales, su sitio tendr\u00e1 acceso a la nueva versi\u00f3n sin que usted tenga que hacer nada.<\/li>\n<\/ul>\n<p>La mayor\u00eda de los sitios web utilizan fuentes web, con una fuente segura para la web como respaldo. Y con WordPress, es muy f\u00e1cil de hacer.<\/p>\n<h3>Encontrar las mejores fuentes Web para su sitio<\/h3>\n<p>Una vez que ha decidido que va a usar fuentes web, ahora tiene que tomar una decisi\u00f3n dif\u00edcil: \u00bfqu\u00e9 tipo de fuentes usar?<\/p>\n<p>En los buenos tiempos, cuando todos los desarrolladores web ten\u00edan acceso a las fuentes web seguras preinstaladas, esta fue una decisi\u00f3n muy f\u00e1cil. \u00bfQuer\u00eda usar una fuente con gracias o sans-serif? (Las fuentes Serif tienen una peque\u00f1a l\u00ednea o trazo al final de un trazo m\u00e1s grande en cada car\u00e1cter, las fuentes sans-serif no.) Habiendo tomado esa decisi\u00f3n, sus opciones eran muy limitadas.<\/p>\n<p>Pero ahora, el mundo es una maravilla.<\/p>\n<p>Aqu\u00ed hay algunos consejos para ayudarle a elegir la mejor fuente para su sitio:<\/p>\n<ul>\n<li>Mire sus materiales impresos. \u00bfHay fuentes que ya se est\u00e1n utilizando y que se pueden encontrar como fuentes web? Si no, \u00bfpuede encontrar algo similar?<\/li>\n<li>Mire los sitios web de sus competidores. \u00bfQu\u00e9 tipo de fuentes est\u00e1n usando? No le recomiendo que los copie, pero puede haber ciertos estilos que transmiten el tipo correcto de imagen a los usuarios de su sitio web.<\/li>\n<li>Piense en el tipo de estado de \u00e1nimo que quiere transmitir con sus fuentes. Algunas fuentes parecen m\u00e1s modernas, otras m\u00e1s tradicionales. Algunos son divertidos, otros m\u00e1s serios.<\/li>\n<li>Lim\u00edtese a las <a href=\"https:\/\/kinsta.com\/es\/secciones\/estrategia-de-contenidos\/#give-readers-your-very-best\">fuentes que son f\u00e1ciles de leer<\/a> para el texto del cuerpo, y utilice fuentes m\u00e1s interesantes para los titulares si lo desea.<\/li>\n<li>Elija entre <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-google-fonts\/\">las fuentes m\u00e1s populares de Google<\/a>, que ser\u00e1n familiares para los visitantes del sitio web y f\u00e1ciles de leer.<\/li>\n<\/ul>\n<p>Una vez que haya elegido sus fuentes, dedique alg\u00fan tiempo a experimentar con ellas. Los proveedores de fuentes como Google Fonts le permiten escribir texto personalizado para ver c\u00f3mo se ve en la fuente elegida. Una vez que vea su propio texto en la fuente, podr\u00eda ayudarte a decidir si es la fuente adecuada para usted.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/experimentar-con-su-fuente-1.jpg\" alt=\"Experimentar con su fuente\" width=\"1500\" height=\"369\"><figcaption class=\"wp-caption-text\">Experimentar su fuente<\/figcaption><\/figure>\n<p>Y recuerde, el uso de fuentes web hace que sea muy f\u00e1cil cambiar las fuentes para que siempre pueda cambiar a otra opci\u00f3n mientras <a href=\"https:\/\/kinsta.com\/es\/blog\/contratar-desarrollador-de-wordpress\/\">desarrolla su tema<\/a> o configura su sitio.<\/p>\n<h3>\u00bfC\u00f3mo a\u00f1adir fuentes web con un plugin de WordPress?<\/h3>\n<p>As\u00ed que ya tiene elegida la fuente, ahora es el momento de a\u00f1adirla a su sitio.<\/p>\n<p>Si no se siente c\u00f3modo a\u00f1adiendo c\u00f3digo a sus archivos de temas, puede instalar un complemento que le permitir\u00e1 acceder a las fuentes de Google y utilizar la fuente que desees en su sitio.<\/p>\n<p>El complemento de <a href=\"https:\/\/wordpress.org\/plugins\/olympus-google-fonts\/\">tipograf\u00eda de Google Fonts<\/a> le da acceso a toda la biblioteca de fuentes de Google y le permite revisarlas a trav\u00e9s del Personalizador de WordPress.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/es\/blog\/como-instalar-wordpress-plugins\/\">Instale el plugin<\/a> en su sitio como lo har\u00eda con cualquier otro plugin, y luego act\u00edvelo.<\/p>\n<p>Vaya a<strong> Apariencia &gt; Personalizar para<\/strong> acceder al Personalizador. Ver\u00e1s una secci\u00f3n para<strong> Google Fonts<\/strong>.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/Google-Fonts-en-personalizador.jpg\" alt=\"Fuentes de Google en el personalizador\" width=\"1500\" height=\"804\"><figcaption class=\"wp-caption-text\">Fuentes de Google en el personalizador<\/figcaption><\/figure>\n<p>Haga clic en ese enlace para acceder a la configuraci\u00f3n de sus fuentes. Config\u00farelos de la siguiente manera:<\/p>\n<p><strong>Configuraci\u00f3n b\u00e1sica<\/strong>: configure la fuente predeterminada para el texto del cuerpo y los encabezados, as\u00ed como los botones. En la captura de pantalla de abajo puede ver que he a\u00f1adido una fuente con gracias f\u00e1cil de leer para el cuerpo y una fuente m\u00e1s distintiva para los encabezados.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/configurar-ajustes-basicos.jpg\" alt=\"Configurar los ajustes b\u00e1sicos\" width=\"1500\" height=\"708\"><figcaption class=\"wp-caption-text\">Configurar los ajustes b\u00e1sicos<\/figcaption><\/figure>\n<p><strong>Configuraci\u00f3n avanzada<\/strong>: Aqu\u00ed puede configurar la marca (t\u00edtulo y descripci\u00f3n del sitio), la navegaci\u00f3n (su men\u00fa), el contenido y los encabezados con m\u00e1s detalle, la barra lateral y el pie de p\u00e1gina. Tambi\u00e9n puede cargar fuentes sin asignarlas a nada, lo que significa que puede agregarlas a cualquier CSS personalizado en el Personalizador.<\/p>\n<p><strong>Carga de fuentes<\/strong>: Si hay pesos de fuentes que no necesita (por ejemplo, negrita, cursiva, etc.), puede desmarcarlos aqu\u00ed para que no ralenticen innecesariamente su sitio.<\/p>\n<p><strong>Depuraci\u00f3n<\/strong>: Utilice esta opci\u00f3n para forzar la visualizaci\u00f3n de las fuentes si no funcionan como deber\u00edan.<\/p>\n<p>Dedique alg\u00fan tiempo a trabajar con estas configuraciones y a probarlas en el Personalizador para asegurarse de que funcionan como usted desea. A continuaci\u00f3n, cuando est\u00e9 satisfecho con la configuraci\u00f3n, haga clic en el bot\u00f3n<strong> Publicar<\/strong>. No abandone el Personalizador sin hacer clic en<strong> Publicar<\/strong> o perder\u00e1 los cambios.<\/p>\n<h4>Edici\u00f3n de los colores de las fuentes<\/h4>\n<p>La versi\u00f3n gratuita del plugin no le permite editar los colores de sus fuentes. Para ello, tendr\u00e1 que comprar la versi\u00f3n premium o usar la opci\u00f3n<strong> CSS adicional<\/strong> en el Personalizador.<\/p>\n<p>Vuelva a la pantalla de inicio del Personalizador y haga clic en la pesta\u00f1a<strong> CSS adicional<\/strong>. Se le presentar\u00e1 un \u00e1rea de texto vac\u00eda donde podr\u00e1 <a href=\"https:\/\/kinsta.com\/es\/blog\/css-wordpress\/\">agregar su propio CSS<\/a>.<\/p>\n<p>Para encontrar el elemento que necesita estilizar, selecci\u00f3nelo y <a href=\"https:\/\/www.lifewire.com\/get-inspect-element-tool-for-browser-756549\">utilice el inspector de c\u00f3digo<\/a> de su navegador para averiguar qu\u00e9 color tiene el estilo que ya tiene.<\/p>\n<p>Abajo estoy usando Google Chrome y he apuntado a un elemento <code>h1<\/code>.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/inspeccionando-codigo.jpg\" alt=\"Inspeccionando tu c\u00f3digo en Chrome\" width=\"1500\" height=\"774\"><figcaption class=\"wp-caption-text\">Inspeccionando su c\u00f3digo en Chrome<\/figcaption><\/figure>\n<p>En mi <a href=\"https:\/\/kinsta.com\/es\/blog\/cambiar-tema-wordpress\/\">tema de WordPress<\/a>, ha heredado su color del elemento cuerpo. Quiero a\u00f1adir algo m\u00e1s espec\u00edfico. En el \u00e1rea de texto de su CSS, escriba el CSS de su elemento y el color que desea utilizar. El m\u00edo se parece a \u00e9ste:<\/p>\n<pre><code class=\"language-css\">h1 {\n color: #f542f5;\n}<\/code><\/pre>\n<p>Eso me da un elemento H1 rosa brillante:<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/rubrica-cambiar-1.jpg\" alt=\"Cambiar el color de la r\u00fabrica\" width=\"1500\" height=\"781\"><figcaption class=\"wp-caption-text\">Cambiar el color de la r\u00fabrica<\/figcaption><\/figure>\n<p>Puede repetir esto con cualquier elemento de texto al que desee agregarle color, y tambi\u00e9n con cualquier fuente personalizada que no estuviera incluida en las opciones de las otras pantallas. Si quieres saber qu\u00e9 CSS usar para las fuentes, sigua leyendo la secci\u00f3n de esta entrada sobre c\u00f3mo modificar tus fuentes a trav\u00e9s de CSS.<\/p>\n<h3>\u00bfC\u00f3mo a\u00f1adir fuentes web manualmente?<\/h3>\n<p>Si no desea a\u00f1adir un plugin adicional a su sitio y tener acceso al c\u00f3digo de su tema, puede instalar y utilizar fuentes web <a href=\"https:\/\/kinsta.com\/es\/blog\/editar-codigo-wordpress\/\">a\u00f1adiendo c\u00f3digo al archivo de funciones y a su hoja de estilos<\/a>.<\/p>\n<p>Si su sitio est\u00e1 usando un tema a medida que puede editar, entonces puede editar el archivo de funciones y la hoja de estilo de su tema. Pero si est\u00e1 usando un tema de terceros que <a href=\"https:\/\/kinsta.com\/es\/blog\/instalar-tema-wordpress\/\">compr\u00f3 o obtuvo del directorio de temas de WordPress<\/a>, tendr\u00e1 que <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-child-wordpress\/\">crear un tema hijo<\/a>. Luego tendr\u00e1 que darle dos archivos: <strong>functions.php<\/strong> y <strong>style.css<\/strong>.<\/p>\n<p>Vamos a trabajar en el proceso de agregar manualmente fuentes web a su tema. Voy a trabajar con fuentes de Google para este ejemplo, ya que es el m\u00e1s utilizado y es gratuito.<\/p>\n<h4>Escoger una fuente y agarrar el enlace<\/h4>\n<p>Empiece elegir tu fuente de Google Fonts. A\u00f1\u00e1dalo a su biblioteca haciendo clic en el icono m\u00e1s al lado.<\/p>\n<p>Haga clic en la pesta\u00f1a en la parte inferior de la pantalla para su biblioteca y ver\u00e1 alg\u00fan c\u00f3digo para que lo agregue a su sitio. Si desea agregar pesos y estilos de fuente adicionales, haga clic en la ficha<strong> Personalizar<\/strong> y seleccione los que desee. A continuaci\u00f3n, vuelva a la pesta\u00f1a<strong> Incrustar<\/strong>.<\/p>\n<p>No copie el c\u00f3digo exactamente: lo usar\u00e1, pero en lugar de llamar a la fuente en la secci\u00f3n &lt; head&gt; del encabezado de su sitio, estar\u00e1 haciendo cola en las fuentes. Esta es la forma correcta de hacerlo en WordPress.<\/p>\n<p>En su lugar, desde la secci\u00f3n Incrustar fuente, copie s\u00f3lo el enlace a la fuente.<\/p>\n<p>As\u00ed que, en mi caso, Google Fonts me est\u00e1 dando este c\u00f3digo:<\/p>\n<pre><code class=\"language-php\">&lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Raleway\" rel=\"stylesheet\"&gt;<\/code><\/pre>\n<p>S\u00f3lo necesita copiar esta parte:<\/p>\n<pre><code class=\"language-php\">https:\/\/fonts.googleapis.com\/css?family=Raleway<\/code><\/pre>\n<h4>Encolado de la(s) fuente(s)<\/h4>\n<p>Abra el archivo de funciones del tema y a\u00f1ada lo siguiente, sustituyendo el enlace de mi fuente por el enlace que Google le ha proporcionado para la suya:<\/p>\n<pre><code class=\"language-php\">function kinsta_add_google_fonts() {\n wp_register_style( 'googleFonts', 'https:\/\/fonts.googleapis.com\/css?family=Raleway');\n wp_enqueue_style( 'googleFonts');\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );<\/code><\/pre>\n<p>Esto pone en cola el estilo de los servidores de Google Fonts. Si necesita a\u00f1adir m\u00e1s fuentes en el futuro, puede a\u00f1adir una nueva l\u00ednea a su funci\u00f3n o a\u00f1adirla en la misma l\u00ednea, as\u00ed:<\/p>\n<pre><code class=\"language-php\">function kinsta_add_google_fonts() {\n wp_register_style( 'googleFonts', 'https:\/\/fonts.googleapis.com\/css?family=Merriweather|Raleway');\n wp_enqueue_style( 'googleFonts');\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );<\/code><\/pre>\n<p>Esto encolar\u00e1 las fuentes Merriweather y Raleway.<\/p>\n<h4>Adici\u00f3n de las fuentes a la hoja de estilo<\/h4>\n<p>Esto no har\u00e1 que la fuente funcione en su sitio todav\u00eda: todav\u00eda necesita agregarla a la hoja de estilo de su tema.<\/p>\n<p>Abra el archivo <strong>style.css <\/strong>en su tema y a\u00f1ada el c\u00f3digo para estilizar elementos individuales con sus fuentes web. Aseg\u00farese de <a href=\"https:\/\/kinsta.com\/es\/blog\/combinar-css-externo\/\">agregarlo despu\u00e9s de cualquier CSS existente<\/a> para fuentes, o puede ser anulado por eso.<\/p>\n<p>Los elementos que estilice depender\u00e1n de usted, pero es com\u00fan usar una fuente legible para el elemento del cuerpo y algo m\u00e1s elegante para los encabezados.<\/p>\n<pre><code class=\"language-css\">body {\n font-family: 'Raleway', sans-serif;\n}\n\nh1, h2, h3 {\n font-family: 'Merriweather', serif;\n}<\/code><\/pre>\n<p>En el caso anterior, todo en la p\u00e1gina usar\u00e1 la fuente Raleway, excepto los elementos h1, h2 y h3, que usar\u00e1n Merriweather.<\/p>\n<p>Ahora, guarde su hoja de estilo y revise su sitio para asegurarse de que todo funciona como usted espera. Si las nuevas fuentes no se muestran, intente <a href=\"https:\/\/kinsta.com\/es\/blog\/como-borrar-la-cache-del-navegador\/\">vaciar la cach\u00e9 del navegador<\/a> y compruebe que las fuentes no est\u00e1n siendo sustituidas por ning\u00fan estilo para las fuentes de la parte inferior de la hoja de estilos. Esta es la raz\u00f3n por la que es una buena idea a\u00f1adir su nuevo estilo en la parte inferior de la hoja de estilo o reemplazar el estilo de fuente existente con su nuevo estilo (incluso mejor).<\/p>\n<h4>Adici\u00f3n de una fuente de copia de seguridad<\/h4>\n<p>Puede haber ocasiones en las que alguien visite su sitio y no pueda acceder a los archivos de fuentes web por alguna raz\u00f3n. Tal vez est\u00e1n en una mala conexi\u00f3n o usando un viejo dispositivo que no renderiza las fuentes web. O tal vez su proveedor de fuentes web est\u00e1 teniendo problemas t\u00e9cnicos.<\/p>\n<p>Por esta raz\u00f3n, es una buena idea tener una copia de seguridad.<\/p>\n<p>El c\u00f3digo que le dan las fuentes de Google ya tiene una copia de seguridad de simplemente especificar <code>serif<\/code> or <code>sans-serif<\/code>, pero podemos ir un paso m\u00e1s all\u00e1.<\/p>\n<p>Utilice una de las fuentes preparadas para la Web que ya estar\u00e1n instaladas en el equipo de su visitante y, a continuaci\u00f3n, incluya la segunda opci\u00f3n de <code>serif<\/code> or <code>sans-serif<\/code>, en caso de que est\u00e9n utilizando un dispositivo m\u00f3vil que ni siquiera tenga las fuentes preparadas para la Web.<\/p>\n<p>Vuelva a su hoja de estilo y edite su CSS para que lea algo como esto:<\/p>\n<pre><code class=\"language-css\">body {\n font-family: 'Raleway', Helvetica, sans-serif;\n}\n\nh1, h2, h3 {\n font-family: 'Merriweather', Georgia, serif;\n}<\/code><\/pre>\n<p>Esto significa que las personas que visiten su sitio web ver\u00e1n sus fuentes web si todo va bien; pero si no es as\u00ed, ver\u00e1n Helvetica o Georgia, o en su defecto, ver\u00e1n cualquier tipo de fuentes serif y sans-serif que su navegador sea capaz de cargar.<\/p>\n<h2 id=\"host\">Alojamiento de sus propias fuentes en WordPress<\/h2>\n<p>Algunos desarrolladores prefieren no utilizar fuentes web, sino alojar las fuentes en sus propios servidores y usted podr\u00eda ser uno de ellos.<\/p>\n<p>Esto podr\u00eda deberse a una o m\u00e1s de las siguientes razones, entre ellas la <a href=\"https:\/\/kinsta.com\/es\/blog\/seguridad-wordpress\/\">seguridad<\/a>, la <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-plugins-de-rendimiento\/\">ejecuci\u00f3n<\/a> o el presupuesto.<\/p>\n<p>Si le preocupa el rendimiento, puede optimizar el rendimiento de sus fuentes web de varias maneras, que se tratan m\u00e1s adelante en este art\u00edculo. Pero si usted ha decidido seguir la ruta local, necesitar\u00e1 saber c\u00f3mo hacerlo.<\/p>\n<h3>\u00bfPor qu\u00e9 alojar sus propias fuentes?<\/h3>\n<p>El uso de fuentes web es a menudo m\u00e1s f\u00e1cil y puede darle m\u00e1s flexibilidad, adem\u00e1s de ocupar menos espacio en su servidor. Pero eso no significa que no haya ocasiones en las que <a href=\"https:\/\/kinsta.com\/es\/blog\/fuentes-locales\/\">las fuentes de alojamiento local<\/a> puedan no ser m\u00e1s apropiadas.<\/p>\n<p>Entre las razones por las que puede querer alojar fuentes localmente se incluyen:<\/p>\n<p>Es posible que descubra que puede sortear algunos de estos problemas<\/p>\n<ul>\n<li>Es posible que prefiera no utilizar recursos de proveedores externos por razones de seguridad, sabiendo que la seguridad de su propio sitio web est\u00e1 controlada por usted.<\/li>\n<li>Es posible que descubra que el uso de un <a href=\"https:\/\/kinsta.com\/es\/blog\/rendimiento-de-terceros\/\">servicio de terceros repercute en el rendimiento de su sitio<\/a>.<\/li>\n<li>Puede que hayas comprado un archivo de fuente y quieras usarlo. Aseg\u00farese de que su licencia incluya el uso del sitio web, as\u00ed como el uso en materiales impresos.<\/li>\n<li>Su sitio puede estar alojado localmente, por ejemplo en una intranet, y los usuarios no tendr\u00e1n acceso a fuentes web cuando lo est\u00e9n utilizando.<\/li>\n<\/ul>\n<h3>\u00bfD\u00f3nde encontrar fuentes que puede alojar localmente?<\/h3>\n<p>Muchas fuentes web tambi\u00e9n se pueden descargar para su uso como fuentes alojadas localmente, pero tendr\u00e1 que comprobar que la licencia lo permite. En el caso de las fuentes de Google, est\u00e1 permitido.<\/p>\n<p>Tambi\u00e9n encontrar\u00e1s que hay fuentes que no est\u00e1n disponibles como fuentes web y que puede descargar y alojar usted mismo. Cualquier archivo de fuente que usted puede descargar a su computadora tambi\u00e9n puede ser cargado a su sitio web y almacenado all\u00ed. Si necesita utilizar una fuente que no est\u00e1 disponible como fuente web para enlazar con su <a href=\"https:\/\/kinsta.com\/es\/blog\/ejemplos-de-sitios-wordpress\/\">marca<\/a>, \u00e9sta ser\u00e1 la soluci\u00f3n, pero aseg\u00farese de que su licencia lo permita.<\/p>\n<h3>\u00bfC\u00f3mo agregar fuentes alojadas localmente a su sitio de WordPress?<\/h3>\n<p>As\u00ed que sabe que quiere alojar sus fuentes localmente, \u00bfc\u00f3mo lo hace?<\/p>\n<p>El proceso es diferente del uso de fuentes web. Usted tiene que <a href=\"https:\/\/kinsta.com\/es\/blog\/aumentar-tamano-maximo-subida-archivos-wordpress\/\">subir los archivos de fuentes<\/a> a su sitio y enlazarlos en su hoja de estilo sin tener que hacer cola en su archivo de funciones.<\/p>\n<h4>Descargar y convertir las fuentes<\/h4>\n<p>Empiece por descargar las fuentes que desea utilizar. En Google Fonts, puedes hacerlo haciendo clic en el icono de descarga cuando veas la fuente en tu biblioteca.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/descarga-font-de-google-fonts-1.jpg\" alt=\"Descarga de fuentes de Google Fonts\" width=\"1500\" height=\"790\"><figcaption class=\"wp-caption-text\">Descarga de fuentes de Google Fonts<\/figcaption><\/figure>\n<p>Descomprima el archivo de fuente en su computadora y elimine cualquier peso de fuente que no necesite usar en su sitio: no tiene sentido subir archivos que no vaya a usar.<\/p>\n<p>Para usar en su sitio web, los archivos deber\u00e1n estar en el formato&#8230;. woff. Si no lo son (no lo ser\u00e1n si los obtuvo de fuentes de Google), puede usar un servicio como <a href=\"https:\/\/convertio.co\/ttf-woff\/\">Convertio<\/a> para convertirlos.<\/p>\n<h4>Suba las fuentes a su tema<\/h4>\n<p>Ahora suba los archivos de fuente a <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-de-wordpress\/\">su tema<\/a>, en <strong>wp-content\/themes\/themename<\/strong>, donde<strong> themename<\/strong> es la carpeta para su tema. Es una buena idea poner cualquier archivo de fuente en su propia carpeta en el tema, por ejemplo, una carpeta de<strong> fuentes<\/strong>.<\/p>\n<p>Si est\u00e1 trabajando con un tema de terceros, <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-child-wordpress\/\">cree un tema hijo<\/a> para sus archivos de fuente y su hoja de estilo.<\/p>\n<p>Una vez que lo hayas hecho, necesitar\u00e1s a\u00f1adir la fuente a tu hoja de estilo.<\/p>\n<h4>Agregar las fuentes en CSS<\/h4>\n<p>Abra la hoja de estilo de su tema.<\/p>\n<p>A\u00f1ada c\u00f3digo como este, reemplazando las fuentes que he usado por las suyas:<\/p>\n<pre><code class=\"language-css\">@font-face {\n font-family: 'Raleway';\n src: url( \"fonts\/Raleway-Medium.ttf\") format('woff'); \/* medium *\/\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'Raleway';\n src: url( \"fonts\/Raleway-Bold.ttf\") format('woff'); \/* medium *\/\n font-weight: bold;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'Merriweather';\n src: url( \"fonts\/Merriweather.ttf\") format('woff'); \/* medium *\/\n font-weight: normal;\n font-style: normal;\n}<\/code><\/pre>\n<p>A\u00f1ada lo que necesite. Tenga en cuenta que si desea utilizar las variaciones de negrita, cursiva, etc. de su fuente, necesita declarar cada una usando <code>@fontface<\/code> y luego <a href=\"https:\/\/css-tricks.com\/whats-deal-declaring-font-properties-font-face\/\">especificar el peso o estilo para cada una<\/a>, como he hecho anteriormente con Raleway para los pesos en negrita y normal.<\/p>\n<p>Ahora a\u00f1ada el estilo para sus elementos, como lo har\u00eda cuando usa fuentes web:<\/p>\n<pre><code class=\"language-css\">body {\n font-family: 'Raleway', Helvetica, sans-serif;\n src: url( \"\/fonts\/Raleway-Medium.ttf\" );\n}\n\nh1, h2, h3 {\n font-family: 'Merriweather', Georgia, serif;\n}<\/code><\/pre>\n<p>Las fuentes alojadas localmente ahora funcionar\u00e1n con el tema.<\/p>\n<h2 id=\"change\">\u00bfC\u00f3mo cambiar las fuentes en WordPress?<\/h2>\n<p>Ahora usted sabe c\u00f3mo instalar fuentes en su sitio de WordPress de una de estas dos maneras. \u00bfQu\u00e9 tal si los edita? \u00bfQu\u00e9 tal si los cambiamos?<\/p>\n<p>Puede editar sus fuentes de una de estas tres maneras: a trav\u00e9s del Personalizador, en la pantalla de edici\u00f3n de mensajes o p\u00e1ginas, o utilizando CSS.<\/p>\n<p>Veamos cada una de esas opciones para cambiar el estilo, el color y el tama\u00f1o de la fuente.<\/p>\n<h3>\u00bfC\u00f3mo cambiar los estilos de fuente en WordPress?<\/h3>\n<p>Veamos c\u00f3mo podemos hacerlo si est\u00e1 usando el Editor de bloques o el Editor cl\u00e1sico.<\/p>\n<h4>Cambio de estilos de fuente en el editor de bloques (Gutenberg)<\/h4>\n<p>Si est\u00e1 usando una versi\u00f3n reciente de WordPress con el <a href=\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\">editor de Gutenberg<\/a>, puede cambiar el estilo de su texto cuando lo edite en su mensaje o p\u00e1gina.<\/p>\n<p>Seleccione el bloque que quiera editar y aparecer\u00e1 un men\u00fa de estilo encima de \u00e9l.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/Gutenberg-bloque-estilo-1.jpg\" alt=\"Estilo en bloque Gutenberg\" width=\"1500\" height=\"567\"><figcaption class=\"wp-caption-text\">Estilo en bloque Gutenberg<\/figcaption><\/figure>\n<p>Seleccione el texto que desea editar y luego haga clic en los iconos para ponerlo en negrita o cursiva. Si hace clic en la flecha que aparece junto a ellas, ver\u00e1 que tambi\u00e9n puede seleccionar tachado.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/tachado-en-gutenberg1.jpg\" alt=\"Tachado en Gutenberg\" width=\"1500\" height=\"639\"><figcaption class=\"wp-caption-text\">Tachado en Gutenberg<\/figcaption><\/figure>\n<h4>Cambio de estilos de fuente en el editor cl\u00e1sico<\/h4>\n<p>Si est\u00e1 ejecutando una versi\u00f3n anterior de WordPress o tiene instalado el plugin <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/classic-editor\/\">Classic Editor<\/a>, tambi\u00e9n puede editar estilos de fuente. (Si no quiere el editor de Gutenberg, es mejor <a href=\"https:\/\/kinsta.com\/es\/docs\/soporte\/alcance-del-soporte\/alcance-del-soporte-para-wordpress-administrado\/\">actualizar WordPress<\/a> y <a href=\"https:\/\/kinsta.com\/es\/blog\/deshabilitar-gutenberg-wordpress-editor\/\">desactivar Gutenberg<\/a>.)<\/p>\n<p>El Editor Cl\u00e1sico incluye una barra de herramientas encima del panel de edici\u00f3n principal donde puede cambiar los estilos de su texto. Si hace clic en el icono de la barra de herramientas Alternar a su derecha, puede acceder a m\u00e1s opciones, incluyendo tachar.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/barra-editor-herramientas.jpg\" alt=\"Barra de herramientas de estilo cl\u00e1sico de editor\" width=\"1500\" height=\"727\"><figcaption class=\"wp-caption-text\">Barra de herramientas de estilo cl\u00e1sico de editor<\/figcaption><\/figure>\n<h4>Modificaci\u00f3n de estilos de fuente en el Customizing<\/h4>\n<p>Si desea cambiar el estilo de fuente para un elemento espec\u00edfico, puede hacerlo a\u00f1adiendo CSS manual al Personalizador.<\/p>\n<p>Abra el Personalizador y haga clic en<strong> CSS Adicional<\/strong>. Esto abrir\u00e1 una pantalla donde podr\u00e1 escribir CSS.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/adicional-css-en-personalizador.jpg\" alt=\"CSS adicional en el Personalizador\" width=\"1500\" height=\"879\"><figcaption class=\"wp-caption-text\">CSS adicional en el Personalizador<\/figcaption><\/figure>\n<p>Ahora puede escribir el CSS de sus fuentes en el cuadro. Por lo tanto, si desea cambiar todos los elementos h1 y h2 a cursiva, debe a\u00f1adir esta CSS:<\/p>\n<pre><code class=\"language-css\">h1, h2 {\n font-style: italics;\n}<\/code><\/pre>\n<h4>Cambio de estilos de fuente en la hoja de estilo<\/h4>\n<p>Si se sientes c\u00f3modo a\u00f1adiendo c\u00f3digo a su hoja de estilo, esta es una mejor manera de hacerlo.<\/p>\n<p>Si utiliza un tema de terceros, <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-child-wordpress\/\">cree un tema hijo<\/a> para su propio estilo; de lo contrario, los cambios que realice se perder\u00e1n al actualizar el tema. Tendr\u00e1s que crear una hoja de estilo en el tema hijo para decirle a WordPress que es un tema hijo: ah\u00ed es donde pones tu nuevo estilo de fuente.<\/p>\n<p>Si est\u00e1 usando su propio tema, puede editar y corregir el CSS en su propia hoja de estilo. El archivo es <strong>style.css <\/strong>y lo encontrar\u00e1s en tu carpeta de temas en <strong>wp-content\/themes<\/strong>.<\/p>\n<p>Agregue cualquier estilo de fuente al final de su hoja de estilo para que no se cancele por nada que ya exista. O mejor a\u00fan, elimine y sobrescriba cualquier estilo de fuente existente, a menos que desee conservarlo.<\/p>\n<p>Cambiar el peso de un elemento con font-weight:<\/p>\n<pre><code class=\"language-css\">span.featured {\n font-weight = bold;\n}<\/code><\/pre>\n<p>Cambiar el estilo de un elemento con font-style:<\/p>\n<pre><code class=\"language-css\">span.featured {\n font-style = italic;\n}<\/code><\/pre>\n<p>Cambie la alineaci\u00f3n con text-alignment:<\/p>\n<pre><code class=\"language-css\">span.featured {\n text-alignment: center;\n}<\/code><\/pre>\n<h3>\u00bfC\u00f3mo cambiar los colores de las fuentes en WordPress?<\/h3>\n<p>Otro cambio que usted podr\u00eda querer hacer es cambiar el color de cierto texto en su sitio. Tenga cuidado de no exagerar con esto: su tema ha sido dise\u00f1ado con colores que funcionan bien juntos y si a\u00f1ades demasiados colores, podr\u00eda parecer chill\u00f3n y poco profesional.<\/p>\n<h4>Cambiar el color de las fuentes en Gutenberg<\/h4>\n<p>Los bloques de texto de Gutenberg le permiten editar el color y el fondo del texto. Para ello, abra el bloque que desea modificar y haga clic en la ficha<strong> Configuraci\u00f3n de color<\/strong> en la secci\u00f3n<strong> Bloque<\/strong> a la derecha de la pantalla.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/color-configuracion-pestana.jpg\" alt=\"La pesta\u00f1a de configuraci\u00f3n de color\" width=\"1500\" height=\"667\"><figcaption class=\"wp-caption-text\">La pesta\u00f1a de configuraci\u00f3n de color<\/figcaption><\/figure>\n<p>Desde aqu\u00ed puede editar el color de fondo y el color del texto para los bloques de texto.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/personalizados-colores-en-un-bloque.jpg\" alt=\"Colores personalizados en un bloque\" width=\"1500\" height=\"756\"><figcaption class=\"wp-caption-text\">Colores personalizados en un bloque<\/figcaption><\/figure>\n<p>Tenga en cuenta que WordPress le avisar\u00e1 si la combinaci\u00f3n de colores que utilice ser\u00e1 perjudicial para la accesibilidad, como en el ejemplo que he utilizado anteriormente. Evite la tentaci\u00f3n de exagerar con sus colores &#8211; despu\u00e9s de todo usted eligi\u00f3 su tema porque su dise\u00f1o de color era apropiado para su sitio, y a\u00f1adir muchos m\u00e1s colores podr\u00eda hacer que se vea chill\u00f3n.<\/p>\n<p>Si hace clic en la pesta\u00f1a<strong> Avanzado <\/strong>debajo de la pesta\u00f1a<strong> Configuraci\u00f3n de color<\/strong>, tambi\u00e9n puede agregar una clase a ese bloque, que luego puede cambiar de estilo en el Personalizador o en su hoja de estilo. As\u00ed que, por ejemplo, si ha a\u00f1adido una clase de <code>.featured<\/code> su bloque, puede darle estilo usando esa clase.<\/p>\n<h4>Cambio de los colores de las fuentes en el editor cl\u00e1sico<\/h4>\n<p>La barra de herramientas del editor cl\u00e1sico le permite cambiar el color del texto que seleccione. As\u00ed que puede seleccionar una palabra individual y cambiar su color. Abajo he hecho una frase roja.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/clasico-editor-cambiar-colores-1.jpg\" alt=\"Cambiar los colores en el editor cl\u00e1sico\" width=\"1500\" height=\"716\"><figcaption class=\"wp-caption-text\">Cambiar los colores en el editor cl\u00e1sico<\/figcaption><\/figure>\n<p>Aunque esto, en teor\u00eda, le da mucha flexibilidad, tenga cuidado con el uso excesivo. Si empieza a a\u00f1adir muchos m\u00e1s colores a su texto, podr\u00eda resultar en un sitio que es dif\u00edcil de leer y malo para la accesibilidad.<\/p>\n<h4>Modificaci\u00f3n de los colores de las fuentes en el personalizador<\/h4>\n<p>Si su tema incluye opciones para cambiar el <a href=\"https:\/\/kinsta.com\/es\/blog\/combinaciones-colores-sitios-web\/\">esquema de color de su sitio<\/a>, este es el mejor lugar para hacerlo.<\/p>\n<p>Por ejemplo, en el sitio de abajo estoy usando un tema que me permite elegir una nueva combinaci\u00f3n de colores para todo el tema. Esto ayuda a asegurar que los nuevos colores trabajen bien juntos y sean coherentes.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/edicion-combinacion-colores-personalizador-1-1.jpg\" alt=\"Edici\u00f3n de la combinaci\u00f3n de colores en el Personalizador\" width=\"1500\" height=\"815\"><figcaption class=\"wp-caption-text\">Edici\u00f3n de la combinaci\u00f3n de colores en el Personalizador<\/figcaption><\/figure>\n<p>Las opciones para esto variar\u00e1n de acuerdo a su tema &#8211; algunos temas le permiten apuntar a encabezados, enlaces y otros elementos y cambiar su color.<\/p>\n<p>Si desea apuntar a elementos espec\u00edficos para cambiar su color pero no es una opci\u00f3n del tema, puede agregar CSS en el Personalizador para hacerlo.<\/p>\n<p>Seleccione<strong> Personalizar &gt; CSS adicional<\/strong> y escriba su CSS en el cuadro de texto.<\/p>\n<p>Por ejemplo, si desea cambiar el color de sus encabezados <code>h1<\/code>, escriba esto:<\/p>\n<pre><code class=\"language-css\">h1 {\n color: #564534;\n}<\/code><\/pre>\n<p>Si eso no funciona, es posible que necesite agregar CSS m\u00e1s espec\u00edficas. En mi tema, el color del enlace de encabezado del sitio est\u00e1 codificado usando el <code>#site-title<\/code> ID, as\u00ed que necesito a\u00f1adir este CSS:<\/p>\n<pre><code class=\"language-css\">#site-title a {\n color: #564534;\n}<\/code><\/pre>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/adicional-css-color.jpg\" alt=\"CSS adicional - color\" width=\"1500\" height=\"818\"><figcaption class=\"wp-caption-text\">CSS adicional &#8211; color<\/figcaption><\/figure>\n<p>Reemplace el color que he usado arriba con su propio color.<\/p>\n<p>Cuando est\u00e9s satisfecho con los cambios, haz clic en el bot\u00f3n<strong> Publicar<\/strong>.<\/p>\n<h4>Cambio de los colores de las fuentes en la hoja de estilo<\/h4>\n<p>Al igual que con los estilos de fuente, tambi\u00e9n puede editar la hoja de estilo de su tema (o crear un tema hijo) para cambiar los colores de fuente.<\/p>\n<p>Cambie el color con el color. Abajo estoy cambiando el color principal para el texto de mi sitio, usando el <code>body<\/code> element:<\/p>\n<pre><code class=\"language-css\">body {\n color = #222222;\n}<\/code><\/pre>\n<p>Aseg\u00farese de que anula cualquier estilo existente para los mismos elementos y que tambi\u00e9n estiliza los elementos que heredan ese estilo si desea que tengan un color diferente. Todo el texto heredar\u00e1 el color del elemento del<strong> cuerpo <\/strong>a menos que tenga su propio estilo.<\/p>\n<h3>Cambiar el tama\u00f1o de las fuentes en WordPress<\/h3>\n<p>Por razones de accesibilidad, puede decidir que desea que las fuentes sean m\u00e1s grandes de lo que son por defecto en el tema. O puede decidir que los encabezados de sus \u00e1reas de widgets son demasiado peque\u00f1os, por ejemplo.<\/p>\n<h4>Cambiar el tama\u00f1o de fuente en Gutenberg<\/h4>\n<p>Con el editor de Gutenberg, puede cambiar el tama\u00f1o del texto dentro de cada bloque.<\/p>\n<p>Seleccione el bloque y luego haga clic en la pesta\u00f1a Configuraci\u00f3n de texto en el men\u00fa Bloques a la derecha de la pantalla. Puede hacer que el texto del bloque sea m\u00e1s peque\u00f1o o m\u00e1s grande, como se muestra a continuaci\u00f3n.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/edicion-fuente-tamano-en-Gutenberg.jpg\" alt=\"Edici\u00f3n del tama\u00f1o de fuente en Gutenberg\" width=\"1500\" height=\"672\"><figcaption class=\"wp-caption-text\">Edici\u00f3n del tama\u00f1o de fuente en Gutenberg<\/figcaption><\/figure>\n<p>Tenga cuidado con hacer esto demasiado: si todos los p\u00e1rrafos de su p\u00e1gina son de diferentes tama\u00f1os, se ver\u00e1 desarticulado y ser\u00e1 dif\u00edcil de leer.<\/p>\n<h4>Cambio del tama\u00f1o de fuente en el editor cl\u00e1sico<\/h4>\n<p>El editor cl\u00e1sico no le da la opci\u00f3n de seleccionar un texto espec\u00edfico y cambiar su tama\u00f1o: as\u00ed que si necesita esta funci\u00f3n, tendr\u00e1 que actualizarse a Gutenberg. Lo siento!<\/p>\n<h4>Modificaci\u00f3n del tama\u00f1o de fuente en el Customizing<\/h4>\n<p>Dependiendo del tema, es posible que tenga la opci\u00f3n de cambiar los tama\u00f1os de fuente en el Personalizador, ya sea cambiando el tama\u00f1o de fuente para todo el sitio o dirigi\u00e9ndose a las cabeceras y al texto del cuerpo.<\/p>\n<p>Si el tema no incluye una opci\u00f3n de Personalizador para cambiar los tama\u00f1os de fuente, pero puede usar la opci\u00f3n<strong> CSS adicional<\/strong>. Vaya a<strong> Personalizar &gt; CSS adicional <\/strong>y escriba el CSS en el cuadro.<\/p>\n<p>Abajo estoy haciendo los encabezados en las \u00e1reas de widgets m\u00e1s grandes, con este CSS:<\/p>\n<pre><code class=\"language-css\">h2.widget-title {\n\u00a0font-size: 3em;\n}<\/code><\/pre>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/estilo-fuente-tamano-adicional-CSS.jpg\" alt=\"Estilo de tama\u00f1o de fuente con CSS adicional\" width=\"1500\" height=\"816\"><figcaption class=\"wp-caption-text\">Estilo de tama\u00f1o de fuente con CSS adicional<\/figcaption><\/figure>\n<p>Quiz\u00e1 sea demasiado grande, pero te da una idea general.<\/p>\n<h4>Cambio del tama\u00f1o de fuente en la hoja de estilo<\/h4>\n<p>Cambiar el tama\u00f1o de las fuentes en su hoja de estilo funciona de manera similar a cambiar cualquier otro estilo para sus fuentes.<\/p>\n<p>Si desea cambiar el tama\u00f1o de todo el texto de su sitio, debe utilizar el elemento <code>body<\/code> element:<\/p>\n<pre><code class=\"language-css\">body {\n font-size: 14px;\n}<\/code><\/pre>\n<p>Para el elemento del <code>body<\/code> se utilizan p\u00edxeles, pero para otros elementos se utiliza <code>em<\/code> el tama\u00f1o es relativo al tama\u00f1o del elemento del <code>body<\/code>.<\/p>\n<pre><code class=\"language-css\">h1,\n#site-title {\n font-size: 2em;\n}<\/code><\/pre>\n<p>Recuerde que si va a hacer cambios en las fuentes de la hoja de estilo de su tema, pru\u00e9bela primero en un <a href=\"https:\/\/kinsta.com\/es\/docs\/alojamiento-wordpress\/entorno-staging\/\">sitio de desarrollo o de preparaci\u00f3n<\/a> para que no corra el riesgo de arruinar su sitio en vivo.<\/p>\n<h2 id=\"optimize\">\u00bfC\u00f3mo optimizar las fuentes en WordPress?<\/h2>\n<p>Tanto si utiliza fuentes web como si utiliza fuentes alojadas localmente, tiene sentido hacer todo lo posible para optimizar sus fuentes.<\/p>\n<p>Aqu\u00ed le dar\u00e9 algunos consejos para optimizar sus fuentes, tanto en velocidad como en dise\u00f1o.<\/p>\n<h3>Optimizaci\u00f3n de fuentes para el rendimiento<\/h3>\n<p>Si est\u00e1 utilizando fuentes web en su sitio, deber\u00e1 hacer todo lo que est\u00e9 en su mano para garantizar que lleguen a sus p\u00e1ginas lo m\u00e1s r\u00e1pido posible y que el hecho de que est\u00e9n alojadas en otro lugar no ralentice las cosas.<\/p>\n<ul>\n<li>Utilice el almacenamiento en cach\u00e9 para asegurarse de que las p\u00e1ginas no tengan que ser reconstruidas cada vez que se cargan. Los planes de hospedaje de Kinsta vienen con <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-cache\/\">almacenamiento en cach\u00e9 incorporado<\/a>.<\/li>\n<li>Utilice un proveedor de fuentes web que suministre fuentes mediante una <a href=\"https:\/\/kinsta.com\/es\/docs\/alojamiento-wordpress\/cdn-wordpress\/kinsta-cdn\/#kinstas-cdn\">red de entrega de contenido<\/a> o CDN. Google Fonts lo hace y acelera la entrega de las fuentes.<\/li>\n<li>Utilice \u00fanicamente las fuentes que necesite. No encolar las variaciones de las fuentes (pesos, estilos) que no va a utilizar en su hoja de estilo. Si usted encuentra que los necesita en una fecha posterior, siempre puede agregarlos entonces.<\/li>\n<li>Si utiliza fuentes web, aseg\u00farese de colocarlas en cola correctamente. No utilice una l\u00ednea @import en su hoja de estilo, incluso si esto es lo que su proveedor de fuentes web le dice que haga.<\/li>\n<li>Cuando agregue CSS manualmente, a\u00f1\u00e1dalo a la hoja de estilo de su tema y no a la secci\u00f3n &lt; head&gt; de su archivo header.php. Esta es una de las razones por las que es mejor codificar el CSS manualmente en su tema en lugar de usar el Personalizador o un bloque, ya que ambos a\u00f1adir\u00e1n CSS en l\u00ednea a la p\u00e1gina en lugar de a\u00f1adirlo a la hoja de estilo.<\/li>\n<li>Considere la posibilidad de utilizar la l\u00ednea de CSS para reducir unos milisegundos m\u00e1s el tiempo de carga de la p\u00e1gina. Este es un proceso que utiliza codificaci\u00f3n base64 para a\u00f1adir CSS desde su hoja de estilo a la p\u00e1gina antes de cargarla, ahorrando al navegador la necesidad de cargar archivos adicionales. Puede parecer contraintuitivo dado el consejo anterior sobre no escribir CSS en l\u00ednea, pero todav\u00eda funciona desde un archivo CSS separado y no significa codificar manualmente CSS en l\u00ednea. Si est\u00e1 cargando varias fuentes, <a href=\"https:\/\/www.bramstein.com\/writing\/web-font-anti-patterns-inlining.html\">el inline puede acelerar un poco su sitio<\/a>.<\/li>\n<li>Use la <a href=\"https:\/\/kinsta.com\/es\/blog\/combinar-css-externo\/#combine-external-css-in-wordpress\">minificaci\u00f3n<\/a> para reducir el tama\u00f1o de su hoja de estilo. Si eres <a href=\"https:\/\/kinsta.com\/es\/precios\/?plan=visits-business1\">cliente de Kinsta<\/a>, otra opci\u00f3n a tener en cuenta es la <a href=\"https:\/\/kinsta.com\/es\/docs\/alojamiento-wordpress\/cdn-wordpress\/kinsta-cdn\/#code-minification-1\">funci\u00f3n de minificaci\u00f3n de c\u00f3digo<\/a> incorporada, a la que puedes acceder directamente desde el <a href=\"https:\/\/kinsta.com\/es\/mykinsta\/\">panel de control de MyKinsta<\/a>. Esta funci\u00f3n permite a los clientes habilitar r\u00e1pida y f\u00e1cilmente la minificaci\u00f3n autom\u00e1tica de CSS y JavaScript con un solo clic. Esto puede acelerar eficazmente tu sitio sin ning\u00fan esfuerzo manual.<\/li>\n<li>Si hospeda fuentes de forma local, cargue s\u00f3lo los archivos de las fuentes y los pesos y estilos de fuente que necesite. S\u00f3lo a\u00f1ada las variaciones que necesite utilizando la declaraci\u00f3n @font-face.<\/li>\n<li>Considere la posibilidad de utilizar una CDN para alojar sus propias fuentes en lugar de alojarlas en su propio servidor.<\/li>\n<li>Cuando aloje sus propias fuentes, incluya formatos adicionales: woff2, woff, ttf y eot. Los navegadores pueden entonces seleccionar la versi\u00f3n que va a cargar m\u00e1s r\u00e1pido.<\/li>\n<li>Si utiliza una fuente diferente para el t\u00edtulo de su sitio, coloque en cola s\u00f3lo los caracteres que necesita en lugar de toda la biblioteca de fuentes.<\/li>\n<\/ul>\n<p>As\u00ed que si el t\u00edtulo de su sitio es Kinsta, podr\u00eda hacer una peque\u00f1a mejora en el rendimiento al seguir la hoja de estilo de esta manera:<\/p>\n<pre><code class=\"language-php\">function kinsta_add_title_font() {\n wp_register_style( 'googleFonts', 'https:\/\/fonts.googleapis.com\/css?family=Raleway&text=\"kinsta');\n wp_enqueue_style( 'googleFonts');\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_add_title_font' );<\/code><\/pre>\n<h3>Optimizaci\u00f3n de fuentes para el dise\u00f1o<\/h3>\n<p>Adem\u00e1s de optimizar el rendimiento de sus fuentes, tambi\u00e9n tiene sentido asegurarse de que est\u00e9n optimizadas visualmente: que encajen bien con el dise\u00f1o de su sitio y con sus materiales fuera de l\u00ednea.<\/p>\n<p>Esto es especialmente cierto si utiliza un plugin o un tema hijo para a\u00f1adir fuentes adicionales a las que ya se incluyen en el tema. Existe el riesgo de que su tema se vea desordenado si hay demasiadas fuentes en demasiados colores y estilos.<\/p>\n<p>Antes de agregar fuentes adicionales a su sitio, considere lo siguiente:<\/p>\n<ul>\n<li>\u00bfSon las nuevas fuentes coherentes con las existentes? \u00bfTransmiten un estilo o estado de \u00e1nimo similar?<\/li>\n<li>Si necesita coincidir con una fuente que se ha utilizado para materiales de impresi\u00f3n pero que no puede utilizar la misma fuente que una fuente web, intente encontrar una coincidencia lo m\u00e1s parecida posible en Google Fonts.<\/li>\n<li>\u00bfSon las fuentes que ha elegido coherentes con su marca? Si tiene un negocio serio, no quiere usar Comic Sans (de hecho, sea cual sea el tipo de sitio web que tengas, no quieres usar Comic Sans).<\/li>\n<li>Si est\u00e1 cambiando los colores de sus fuentes, intente usar colores que ya est\u00e1n en el dise\u00f1o de su tema o que coordinan con ellos. Agregar demasiados colores har\u00e1 que su sitio se vea chill\u00f3n y poco profesional.<\/li>\n<li>Si est\u00e1 intentando elegir un par de fuentes en Google Fonts, intente utilizar un servicio como <a href=\"https:\/\/fontpair.co\/\">fontpair<\/a> para encontrar dos que funcionen bien juntos.<\/li>\n<\/ul>\n<p>Las fuentes que usted utiliza en su dise\u00f1o tendr\u00e1n un impacto en la impresi\u00f3n que los visitantes obtienen cuando llegan a su sitio. Aseg\u00farese de haber considerado esto y elegido fuentes que refuercen su marca.<\/p>\n<h3><strong>Trabajar con fuentes variables<\/strong><\/h3>\n<p><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/typography\/variable-fonts\/\">Las fuentes variables<\/a> son un nuevo tipo de fuentes que hacen que a\u00f1adir m\u00e1s fuentes a su sitio sea m\u00e1s eficiente.<\/p>\n<p>Permiten almacenar m\u00e1s informaci\u00f3n en un archivo de fuente, de modo que si desea variaciones en su fuente (negrita, cursiva, etc.), no tiene que cargar varios archivos de fuente, sino que s\u00f3lo puede cargar uno.<\/p>\n<p>Para una fuente con m\u00faltiples pesos de fuente, estilos e inclinaciones, esto podr\u00eda ahorrar mucho espacio de archivo y hacer m\u00e1s f\u00e1cil el proceso de encolar la fuente o a\u00f1adirla a trav\u00e9s de @fontface.<\/p>\n<p>Las fuentes variables son compatibles con las \u00faltimas versiones de Chrome, Edge, Firefox y Safari, pero no con los navegadores m\u00e1s antiguos; por lo tanto, si las utilizas, necesitar\u00e1s una copia de seguridad. Y a\u00fan no hay muchas fuentes variables disponibles. Las fuentes de Google no incluyen ninguna, pero Google es compatible con la especificaci\u00f3n, por lo que es probable que se a\u00f1adan con el tiempo.<\/p>\n<p>Los desarrolladores de fuentes est\u00e1n trabajando para <a href=\"https:\/\/www.monotype.com\/resources\/articles\/variable-fonts-making-the-promise-a-reality\/\">crear m\u00e1s fuentes variables y mejorar su confiabilidad<\/a>, por lo que vale la pena observar el progreso para que pueda utilizar fuentes variables para optimizar sus fuentes una vez que se vuelvan m\u00e1s estables.<\/p>\n\n<h2><strong>Resumen<\/strong><\/h2>\n<p>Cambiar las fuentes en su sitio de WordPress no es una tarea sencilla. Usted tiene diferentes posibilidades para elegir:<\/p>\n<ol>\n<li>Uso de fuentes web mediante la instalaci\u00f3n de un plugin.<\/li>\n<li>Usar fuentes web codific\u00e1ndolas en el tema y encol\u00e1ndolas.<\/li>\n<li>Alojamiento de sus fuentes.<\/li>\n<\/ol>\n<p>A continuaci\u00f3n, debe centrarse en c\u00f3mo optimizar sus fuentes para obtener un mejor rendimiento. Si sigue los consejos de esta gu\u00eda, no s\u00f3lo podr\u00e1 cambiar las fuentes en WordPress, sino que tambi\u00e9n podr\u00e1s tener m\u00e1s control sobre ellas en su tema.<\/p>\n<p>\u00bfQuieres despejar el dise\u00f1o de tu p\u00e1gina o blog para que tus lectores se centren en tu contenido? Entonces, echa un vistazo a esto: <a href=\"https:\/\/kinsta.com\/es\/blog\/quitar-barra-lateral-wordpress\/\">\u00bfC\u00f3mo quitar la barra lateral en WordPress? (4 M\u00e9todos)<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Las fuentes pueden marcar la diferencia entre un sitio web aburrido y uno hermoso. Al aprender a cambiar la fuente en WordPress, puede hacer que su &#8230;<\/p>\n","protected":false},"author":105,"featured_media":28516,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[619,552],"topic":[1358,1347],"class_list":["post-28496","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-fonts","tag-website","topic-diseno-sitios-web-wordpress","topic-fuentes-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u00bfC\u00f3mo cambiar las fuentes en WordPress (cambiar el tama\u00f1o, el color y optimizar)<\/title>\n<meta name=\"description\" content=\"Aprenda todo lo que necesita sobre c\u00f3mo cambiar las fuentes en WordPress, c\u00f3mo cambiar el tama\u00f1o de la fuente, los colores y c\u00f3mo optimizarlas para que las p\u00e1ginas sean m\u00e1s r\u00e1pidas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00bfC\u00f3mo cambiar las fuentes en WordPress? (cambiar el tama\u00f1o, el color y optimizar)\" \/>\n<meta property=\"og:description\" content=\"Aprenda todo lo que necesita sobre c\u00f3mo cambiar las fuentes en WordPress, c\u00f3mo cambiar el tama\u00f1o de la fuente, los colores y c\u00f3mo optimizarlas para que las p\u00e1ginas sean m\u00e1s r\u00e1pidas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-11T14:31:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-01T15:40:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/11\/como-cambiar-las-fuentes-en-wordpress.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rachel McCollin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprenda todo lo que necesita sobre c\u00f3mo cambiar las fuentes en WordPress, c\u00f3mo cambiar el tama\u00f1o de la fuente, los colores y c\u00f3mo optimizarlas para que las p\u00e1ginas sean m\u00e1s r\u00e1pidas.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/11\/como-cambiar-las-fuentes-en-wordpress.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rachel McCollin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"32 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/\"},\"author\":{\"name\":\"Rachel McCollin\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/52eb266d622b565d3206e355caac172e\"},\"headline\":\"\u00bfC\u00f3mo cambiar las fuentes en WordPress? (cambiar el tama\u00f1o, el color y optimizar)\",\"datePublished\":\"2019-11-11T14:31:06+00:00\",\"dateModified\":\"2025-09-01T15:40:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/\"},\"wordCount\":6730,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/11\/como-cambiar-las-fuentes-en-wordpress.jpg\",\"keywords\":[\"fonts\",\"website\"],\"articleSection\":[\"Los mejores tutoriales de WordPress\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/\",\"name\":\"\u00bfC\u00f3mo cambiar las fuentes en WordPress (cambiar el tama\u00f1o, el color y optimizar)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/11\/como-cambiar-las-fuentes-en-wordpress.jpg\",\"datePublished\":\"2019-11-11T14:31:06+00:00\",\"dateModified\":\"2025-09-01T15:40:33+00:00\",\"description\":\"Aprenda todo lo que necesita sobre c\u00f3mo cambiar las fuentes en WordPress, c\u00f3mo cambiar el tama\u00f1o de la fuente, los colores y c\u00f3mo optimizarlas para que las p\u00e1ginas sean m\u00e1s r\u00e1pidas.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/11\/como-cambiar-las-fuentes-en-wordpress.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/11\/como-cambiar-las-fuentes-en-wordpress.jpg\",\"width\":1460,\"height\":730,\"caption\":\"C\u00f3mo cambiar las fuentes en WordPress (y cambiar el tama\u00f1o, el color y la optimizaci\u00f3n)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dise\u00f1o de Sitios Web en WordPress\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/diseno-sitios-web-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u00bfC\u00f3mo cambiar las fuentes en WordPress? (cambiar el tama\u00f1o, el color y optimizar)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/52eb266d622b565d3206e355caac172e\",\"name\":\"Rachel McCollin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g\",\"caption\":\"Rachel McCollin\"},\"description\":\"Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/rachelmccollin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u00bfC\u00f3mo cambiar las fuentes en WordPress (cambiar el tama\u00f1o, el color y optimizar)","description":"Aprenda todo lo que necesita sobre c\u00f3mo cambiar las fuentes en WordPress, c\u00f3mo cambiar el tama\u00f1o de la fuente, los colores y c\u00f3mo optimizarlas para que las p\u00e1ginas sean m\u00e1s r\u00e1pidas.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/","og_locale":"es_ES","og_type":"article","og_title":"\u00bfC\u00f3mo cambiar las fuentes en WordPress? (cambiar el tama\u00f1o, el color y optimizar)","og_description":"Aprenda todo lo que necesita sobre c\u00f3mo cambiar las fuentes en WordPress, c\u00f3mo cambiar el tama\u00f1o de la fuente, los colores y c\u00f3mo optimizarlas para que las p\u00e1ginas sean m\u00e1s r\u00e1pidas.","og_url":"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2019-11-11T14:31:06+00:00","article_modified_time":"2025-09-01T15:40:33+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/11\/como-cambiar-las-fuentes-en-wordpress.jpg","type":"image\/jpeg"}],"author":"Rachel McCollin","twitter_card":"summary_large_image","twitter_description":"Aprenda todo lo que necesita sobre c\u00f3mo cambiar las fuentes en WordPress, c\u00f3mo cambiar el tama\u00f1o de la fuente, los colores y c\u00f3mo optimizarlas para que las p\u00e1ginas sean m\u00e1s r\u00e1pidas.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/11\/como-cambiar-las-fuentes-en-wordpress.jpg","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Rachel McCollin","Tiempo de lectura":"32 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/"},"author":{"name":"Rachel McCollin","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/52eb266d622b565d3206e355caac172e"},"headline":"\u00bfC\u00f3mo cambiar las fuentes en WordPress? (cambiar el tama\u00f1o, el color y optimizar)","datePublished":"2019-11-11T14:31:06+00:00","dateModified":"2025-09-01T15:40:33+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/"},"wordCount":6730,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/11\/como-cambiar-las-fuentes-en-wordpress.jpg","keywords":["fonts","website"],"articleSection":["Los mejores tutoriales de WordPress"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/","url":"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/","name":"\u00bfC\u00f3mo cambiar las fuentes en WordPress (cambiar el tama\u00f1o, el color y optimizar)","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/11\/como-cambiar-las-fuentes-en-wordpress.jpg","datePublished":"2019-11-11T14:31:06+00:00","dateModified":"2025-09-01T15:40:33+00:00","description":"Aprenda todo lo que necesita sobre c\u00f3mo cambiar las fuentes en WordPress, c\u00f3mo cambiar el tama\u00f1o de la fuente, los colores y c\u00f3mo optimizarlas para que las p\u00e1ginas sean m\u00e1s r\u00e1pidas.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/11\/como-cambiar-las-fuentes-en-wordpress.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/11\/como-cambiar-las-fuentes-en-wordpress.jpg","width":1460,"height":730,"caption":"C\u00f3mo cambiar las fuentes en WordPress (y cambiar el tama\u00f1o, el color y la optimizaci\u00f3n)"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/como-cambiar-las-fuentes-en-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Dise\u00f1o de Sitios Web en WordPress","item":"https:\/\/kinsta.com\/es\/secciones\/diseno-sitios-web-wordpress\/"},{"@type":"ListItem","position":3,"name":"\u00bfC\u00f3mo cambiar las fuentes en WordPress? (cambiar el tama\u00f1o, el color y optimizar)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/52eb266d622b565d3206e355caac172e","name":"Rachel McCollin","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g","caption":"Rachel McCollin"},"description":"Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.","url":"https:\/\/kinsta.com\/es\/blog\/author\/rachelmccollin\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/28496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/105"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=28496"}],"version-history":[{"count":16,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/28496\/revisions"}],"predecessor-version":[{"id":80050,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/28496\/revisions\/80050"}],"alternate":[{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/28496\/translations\/es"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/28496\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/28496\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/28496\/translations\/fr"},{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/28496\/translations\/en"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/28496\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/28496\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/28496\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/28496\/translations\/se"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/28496\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/28516"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=28496"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=28496"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=28496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}