{"id":13412,"date":"2021-12-28T18:36:40","date_gmt":"2021-12-28T18:36:40","guid":{"rendered":"https:\/\/newblog.siteground.com\/es\/?p=13412"},"modified":"2025-09-19T08:06:43","modified_gmt":"2025-09-19T08:06:43","slug":"como-cambiar-fuentes-wordpress","status":"publish","type":"post","link":"https:\/\/www.siteground.es\/blog\/como-cambiar-fuentes-wordpress\/","title":{"rendered":"C\u00f3mo cambiar las fuentes en WordPress para hacer que tu sitio web sea \u00fanico"},"content":{"rendered":"\n<p>Los d\u00edas de una web basada en p\u00e1ginas blancas, texto negro y enlaces azules se est\u00e1n desvaneciendo en la historia. Actualmente, si quieres llamar la atenci\u00f3n, tu p\u00e1gina web tiene que &#8220;saltar a la vista&#8221;. JavaScript, CSS e im\u00e1genes se suman a hacer llamativo tu sitio web. Las fuentes tambi\u00e9n a\u00f1aden mucho al aspecto distintivo de tu sitio web.<\/p>\n\n\n\n<p>Sin embargo, a diferencia de algunos de los otros elementos de tu sitio web, las fuentes pueden ser grandes bloques de datos que, si no se manejan correctamente, pueden ralentizar la carga de tu sitio web. <a href=\"https:\/\/newblog.siteground.com\/es\/core-web-vitals-guia\/\" data-type=\"post\" data-id=\"12944\" target=\"_blank\" rel=\"noreferrer noopener\">La velocidad es el rey en estos d\u00edas<\/a>, por lo que, si bien ser llamativo es importante, debes asegurarte de no afectar a la velocidad de tu sitio al usar fuentes.<\/p>\n\n\n\n<p>En este art\u00edculo, veremos las fuentes y c\u00f3mo se relacionan con WordPress, c\u00f3mo cambiar las fuentes en WordPress, c\u00f3mo usar las fuentes de Google dentro de WordPress y, finalmente, c\u00f3mo puedes organizar tus fuentes para que hagan que tu sitio de WordPress se vea bien sin afectar a la velocidad.<\/p>\n\n\n\n<p>As\u00ed que empecemos, \u00bfde acuerdo?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_agregar_nuevas_fuentes_de_WordPress_a_tu_sitio\"><\/span>C\u00f3mo agregar nuevas fuentes de WordPress a tu sitio<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Elige una fuente en el formato correcto<\/h3>\n\n\n\n<p>El primer paso que debes hacer al trabajar con fuentes es seleccionar tu fuente e incluirla en tu sitio web. Si buscas, encontrar\u00e1s muchas fuentes gratuitas disponibles para su uso. Estas fuentes vienen en una variedad de formatos. Debes asegurarte de que, al seleccionar una fuente, elijas una que est\u00e9 disponible en el formato correcto. Como ocurre con todo en la web, tienes opciones y no todas son iguales.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>EOF: fuentes OpenType integradas<\/strong><\/li><\/ul>\n\n\n\n<p>Este formato es de fuentes OTF m\u00e1s compactas.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>OTF: fuentes de tipo abierto<\/strong><\/li><\/ul>\n\n\n\n<p>Estas son las fuentes web m\u00e1s utilizadas.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>TTF: fuentes True Type<\/strong><\/li><\/ul>\n\n\n\n<p>Este es un formato m\u00e1s antiguo desarrollado en la d\u00e9cada de 1980 por Microsoft y Apple.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>WOF 1.0: Formato de fuente abierta web<\/strong><\/li><\/ul>\n\n\n\n<p>Este formato se usa ampliamente para p\u00e1ginas web y es recomendado por el W3C.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>WOFF 2.0: Formato de fuente abierto web<\/strong><\/li><\/ul>\n\n\n\n<p>Esta es una mejor opci\u00f3n que WOFF 1.0 debido a sus mejores capacidades de compresi\u00f3n.<\/p>\n\n\n\n<p>En el momento de redactar este documento, todos los formatos eran compatibles con la versi\u00f3n actual de todos los navegadores web modernos. (NOTA: Internet Explorer no es un navegador web moderno).<\/p>\n\n\n\n<p>Todos los formatos anteriores funcionar\u00e1n, pero por motivos de rendimiento siempre que sea posible utiliza <strong>fuentes WOFF2<\/strong>. C\u00f3mo est\u00e1n comprimidas, se cargan m\u00e1s r\u00e1pido.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Agrega la fuente de WordPress a tu sitio<\/h3>\n\n\n\n<p>Hay algunas formas diferentes de agregar fuentes personalizadas a tu tema. Veamos dos opciones: c\u00f3mo puedes hacerlo manualmente y c\u00f3mo puedes hacerlo a trav\u00e9s de temas y plugins.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Opci\u00f3n 1: agrega fuentes manualmente a trav\u00e9s del Administrador de archivos<\/strong><\/h4>\n\n\n\n<p>Primero, veamos el camino dif\u00edcil. Carg\u00e1ndolas manualmente.<\/p>\n\n\n\n<p>Lo primero que debemos hacer es localizar una fuente. Yo saqu\u00e9 una desde uno de mis sitios personales, pero puedes buscar y encontrar una que te guste.<\/p>\n\n\n\n<p>A continuaci\u00f3n, debemos cargar el archivo de fuente real en nuestro sitio web. Dado que mi sitio de prueba est\u00e1 alojado en SiteGround, utilizo SiteTools-&gt; Gestor de archivos para hacer esto.<\/p>\n\n\n\n<p>Estoy usando el tema predeterminado actual de WordPres: <a href=\"https:\/\/wordpress.org\/themes\/twentytwentyone\/\" target=\"_blank\" rel=\"noreferrer noopener\">twentytwentyone<\/a>. Entonces, en ese directorio creo un directorio llamado &#8220;fuentes&#8221; y subo mi archivo de fuentes all\u00ed.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/NTzgB7zLxw9Ntw28p4gQ_hJL0M15vGMZkj48pH6ELR8sNgNTZn_F9fx4gA2AI2WMF2N242Z28I9mH3KCDAxxcUYlVgOYPkulXvBORSp-YkOE6N7j5rtzFQtNmUzVzjq7utc59VaD\" alt=\"\" \/><\/figure>\n\n\n\n<p>A continuaci\u00f3n, debemos decirle a nuestro tema que tiene una nueva fuente con la que trabajar. Hacemos esto con una secci\u00f3n @font-face en nuestra hoja de estilo.<\/p>\n\n\n\n<p>\u200b\u200b<em>@font-face {<\/em><\/p>\n\n\n\n<p>&nbsp;&nbsp;<em>&nbsp;&nbsp;font-family: \u201cace_sansbold\u201d;<\/em><\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;<em>src: url(\u2018fonts\/acesans-bold-webfont.woff2\u2019)&nbsp; format(\u2018woff2\u2019);<\/em><\/p>\n\n\n\n<p>&nbsp;&nbsp;<em>&nbsp;&nbsp;font-weight: normal;<\/em><\/p>\n\n\n\n<p><em>&nbsp;&nbsp;&nbsp;&nbsp;font-style: normal;<\/em><\/p>\n\n\n\n<p><em>}<\/em><\/p>\n\n\n\n<p>Esto le dice a nuestro tema que hay una nueva familia de fuentes llamada ace_sansbold y que se puede cargar desde fonts\/acesans-bold-webfont.woff2.<\/p>\n\n\n\n<p>Todo eso est\u00e1 muy bien, pero el solo hecho de tener una fuente no hace ninguna diferencia, tenemos que aplicar la fuente. Quiero que se utilice esta fuente en el t\u00edtulo de mi sitio. Para hacer eso, buscamos el selector de estilo utilizado para eso y lo cambiamos.<\/p>\n\n\n\n<p>En twentytwentyone, ese es el selector de t\u00edtulo de .site-title. Por defecto tiene este aspecto:<\/p>\n\n\n\n<p><em>.site-title {<\/em><\/p>\n\n\n\n<p><em>color: var(\u2013branding\u2013color-link);<\/em><\/p>\n\n\n\n<p><em>font-family: var(\u2013branding\u2013title\u2013font-family);<\/em><\/p>\n\n\n\n<p><em>font-size: var(\u2013branding\u2013title\u2013font-size-mobile);<\/em><\/p>\n\n\n\n<p><em>letter-spacing: normal;<\/em><\/p>\n\n\n\n<p><em>text-transform: var(\u2013branding\u2013title\u2013text-transform);<\/em><\/p>\n\n\n\n<p><em>line-height: var(\u2013global\u2013line-height-heading);<\/em><\/p>\n\n\n\n<p><em>margin-bottom: calc(var(\u2013global\u2013spacing-vertical) \/ 6);<\/em><\/p>\n\n\n\n<p><em>}<\/em><\/p>\n\n\n\n<p>Queremos hacer un cambio. Queremos cambiar la familia de fuentes a esto.<\/p>\n\n\n\n<p><em>font-family: \u201cace_sansbold\u201d;<\/em><\/p>\n\n\n\n<p>Esto le dir\u00e1 a nuestro tema que use nuestra nueva fuente en lugar de la seleccionada en el personalizador de temas. El resultado final se ver\u00e1 as\u00ed:<\/p>\n\n\n\n<p><em>.site-title {<\/em><\/p>\n\n\n\n<p><em>color: var(\u2013branding\u2013color-link);<\/em><\/p>\n\n\n\n<p><em>font-family: \u201cace_sansbold;<\/em><\/p>\n\n\n\n<p><em>font-size: var(\u2013branding\u2013title\u2013font-size-mobile);<\/em><\/p>\n\n\n\n<p><em>letter-spacing: normal;<\/em><\/p>\n\n\n\n<p><em>text-transform: var(\u2013branding\u2013title\u2013text-transform);<\/em><\/p>\n\n\n\n<p><em>line-height: var(\u2013global\u2013line-height-heading);<\/em><\/p>\n\n\n\n<p><em>margin-bottom: calc(var(\u2013global\u2013spacing-vertical) \/ 6);<\/em><\/p>\n\n\n\n<p><em>}<\/em><\/p>\n\n\n\n<p>As\u00ed es como se ve\u00eda el t\u00edtulo de mi sitio antes de agregar la fuente.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/MYlYqzfRFU9M0ONEQB2NykpovPhYEfBSslEy6IFkMcATZk62jKdbx-mf_amJiGa0UqCNh8OxmuEG2TI9lrpxoUdflyAWs7YVINrBPeF0jdtAL_1hCK3KCFmlsMc4Mkoi4TU8maRS\" alt=\"\" \/><\/figure>\n\n\n\n<p>Despu\u00e9s de seguir las instrucciones anteriores, se ve as\u00ed:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/Jt4QCK3sbNnHxMZ87NnczY9dOpoEE1H4T2H4833JrRbQQnlsuSqMbioktG5boRdXlHV1b7XAvEAhC5gzJ-6XqCP0OY0s8KK4QPFoNhEqlLyo2gSqr2l_3SG1VJGfZnGAEcT8h1yA\" alt=\"\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Opci\u00f3n 2: agrega y edita fuentes a trav\u00e9s de temas y plugins<\/strong><\/h4>\n\n\n\n<p>Bien, lo hicimos de la manera dif\u00edcil, ahora vamos a ver la manera m\u00e1s sencilla, es decir, aprovechar los temas y plugins para agregar fuentes a tu sitio f\u00e1cilmente.<\/p>\n\n\n\n<p><strong>C\u00f3mo agregar fuentes usando el Editor de temas<\/strong><\/p>\n\n\n\n<p>La mayor\u00eda de los temas modernos tienen alguna forma de agregar fuentes y asignarlas a partes del sitio. Utilizo el tema Astra WordPress en uno de mis sitios y viene con una funci\u00f3n llamada &#8220;Fuentes personalizadas&#8221;. En lugar de tener que aplicar manualmente el c\u00f3digo CSS y cargar archivos, se me presenta un formulario simple que me permite agregar o editar fuentes.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/8NcIS13OT4LCMZonqeObonEe9jLC-Y69IVO38_fZnwPm-QtazJuzsw6BPtTiEH73TTbqahATdMD_NxW8C1GcQ--mXng0WZ93HwKbBZ-dRXCtg6dsV8cYc2TUEq6toqCjH8frm5_Q\" alt=\"\" \/><\/figure>\n\n\n\n<p>Una vez que lo guardo, todo se gestiona autom\u00e1ticamente para m\u00ed. No solo la fuente est\u00e1 colocada donde deber\u00eda estar y es f\u00e1cilmente accesible, sino que las nuevas fuentes ahora aparecen en mi Editor de temas, listas para que las use. \u00a1Sin hackear CSS!<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/dfh_U1yf1GRzZ3M6r6t-VBvd9yfGEmSfmdpgXGAsR9wZkIalymIwccKkhJMzLC3ybKRxIDj7InyZDd56Ee7OX3DfXFrwSTfBBQa_ReM6ANNvvrpMU0dkjN9Gvyj_LGrhVyumzAnA\" alt=\"\" \/><\/figure>\n\n\n\n<p>Como beneficio adicional, Astra viene preparado para que uses cualquiera de las <a href=\"https:\/\/fonts.google.com\/?preview.size=64&amp;preview.layout=row\" target=\"_blank\" rel=\"noreferrer noopener\">fuentes de Google<\/a>. Ya est\u00e1n programadas y listas para que las uses.<\/p>\n\n\n\n<p><strong>C\u00f3mo agregar fuentes usando los plugins de fuentes de WordPress<\/strong><\/p>\n\n\n\n<p>Si tu tema actual de WordPress no incluye fuentes listas para usar, todav\u00eda hay opciones como plugins freemium.<\/p>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/olympus-google-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>Fonts Plugin<\/em><\/strong><\/a><\/p>\n\n\n\n<p>&#8220;Fonts Plugin&#8221;&nbsp; ofrece todas las fuentes de Google listas para usar en WordPress. Adem\u00e1s, te permitir\u00e1 ingresar tu clave API de Adobe si tienes una, para usar todas las fuentes de Adobe tambi\u00e9n.<\/p>\n\n\n\n<p>Una de las cosas que este plugin no har\u00e1 es permitirte cargar fuentes personalizadas como se describe arriba. La versi\u00f3n pro puede permitirte hacer eso, pero la documentaci\u00f3n no est\u00e1 clara en este punto.<\/p>\n\n\n\n<p>Una caracter\u00edstica realmente buena de este plugin es que ofrece un nuevo bloque de Gutenberg llamado bloque &#8220;Google Fonts&#8221;. Esta es una extensi\u00f3n del blog Paragraph y te da la opci\u00f3n de seleccionar una fuente para el bloque. Cambiar las fuentes de un elemento de texto en Gutenberg es dif\u00edcil. Es bueno ver a alguien darse cuenta de eso.<\/p>\n\n\n\n<p>Hay otros plugins que puedes usar para agregar fuentes al tema existente de tu sitio web de WordPress. Echa un vistazo r\u00e1pido al <a href=\"https:\/\/wordpress.org\/plugins\/search\/font\/\" target=\"_blank\" rel=\"noreferrer noopener\">repositorio de plugins de WordPress<\/a> y encontrar\u00e1s varios que har\u00e1n el trabajo.<\/p>\n\n\n<p>[subscribe_cta]<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_cambiar_las_fuentes_en_el_Personalizador_de_temas\"><\/span>C\u00f3mo cambiar las fuentes en el Personalizador de temas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Algunos temas de WordPress tienen selectores de fuentes para diferentes partes de tu p\u00e1gina o sitio web. De forma predeterminada, twentytwentyone no lo hace, pero como se muestra arriba, Astra lo hace. En Astra, la opci\u00f3n &#8220;Global&#8221; tiene una opci\u00f3n de &#8220;Tipograf\u00eda&#8221;. Al hacer clic en Tipograf\u00eda, se presentan selectores que te permiten establecer diferentes fuentes y pesos&nbsp; para cosas como:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Cuerpo<\/li><li>Encabezados (H1-H6)<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/EMjNI9ky59nXp56SP5SVh6rhB59DPknMxjtDyZzmMBZRmT6ljJ7ojoAVRAVBBryB6jAf8u8-aHmYCBd5Al5W89NkWs0-P29c4mNE0xFmVJ7K6AjSVs_uE59XAH3JP-_gMnZm8Dj7\" alt=\"\" \/><\/figure>\n\n\n\n<p>Esto te ofrece un amplio control sobre las fuentes que se muestran en tu sitio. Diferentes temas y plugins agregar\u00e1n otras opciones al Personalizador de temas para permitirte un control m\u00e1s preciso sobre qu\u00e9 fuentes se usan y d\u00f3nde. Un buen ejemplo de esto es el <em>Font Plugin<\/em>&nbsp; descrito anteriormente. Agrega una secci\u00f3n al Personalizador de temas para twentytwentyone para permitir a los usuarios seleccionar y asignar fuentes.<\/p>\n\n\n\n<p>Puedes elegir fuentes, pesos y tama\u00f1os para la mayor\u00eda de los elementos est\u00e1ndar. Por ejemplo, arriba reemplazamos manualmente la familia de fuentes para el selector .site-title. Con <em>Font Plugin<\/em>, es tan simple como ir a Configuraci\u00f3n avanzada&gt; Marca.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/zQdPbLZZkVsjUkUncFxF0l9pRkiuGZFVyzCcfflbZTD8tDf0QJYyTl9EMILF989uM0JIB99-3mtFrhuhn_HYqrvSsOaRrulRJmazWt9xTIW-kaRhIhmMzTu1xNBuXqOcoPFWnPH5\" alt=\"\" \/><\/figure>\n\n\n\n<p>All\u00ed puedes seleccionar las opciones de Tipograf\u00eda del t\u00edtulo del sitio.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Bonus_como_evitar_que_las_fuentes_ralenticen_tu_sitio\"><\/span><strong>Bonus: c\u00f3mo evitar que las fuentes ralenticen tu sitio<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Hemos hablado mucho sobre c\u00f3mo introducir fuentes en tu sistema y c\u00f3mo utilizarlas. Sin embargo, las fuentes son solo una cosa m\u00e1s que un navegador tiene que cargar para ver tu sitio web. Las cosas que tiene que cargar un navegador son solo cosas que pueden ralentizar. \u00bfC\u00f3mo puedes lidiar con esto? La soluci\u00f3n es precargar tus archivos de fuentes. Afortunadamente, si alojas tu sitio web con SiteGround, tienes acceso al <a rel=\"noreferrer noopener\" href=\"https:\/\/es.wordpress.org\/plugins\/sg-cachepress\/\" target=\"_blank\">plugin SiteGround Optimizer<\/a>, que har\u00e1 que esta tarea sea realmente sencilla. En la configuraci\u00f3n del plugin &gt; Portada &gt; General, encontrar\u00e1s la funci\u00f3n &#8220;Precarga de fuentes&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"569\" src=\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2021\/12\/1_WP_Fonts-1024x569.jpg\" alt=\"\" class=\"wp-image-13431\" \/><\/figure>\n\n\n\n<p>Esta opci\u00f3n es un poco diferente a la mayor\u00eda de las otras opciones en el plugin porque no est\u00e1 activada pero tampoco desactivada, debes ingresar la URL de tu fuente para que se puedan precargar.<\/p>\n\n\n\n<p>En nuestro caso, la URL ser\u00eda https:\/\/example.com\/wp-content\/themes\/twentytwentyone\/fonts\/acesans-bold-webfont.woff2. Ingresamos esa URL y hacemos clic en Confirmar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"567\" src=\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2021\/12\/2_WP_Fonts-1024x567.jpg\" alt=\"\" class=\"wp-image-13432\" \/><\/figure>\n\n\n\n<p>Esto insertar\u00e1 la etiqueta de enlace adecuada con rel = \u201dpreload\u201d en ella para que el archivo de fuente sea lo primero que se cargue. Puedes ver esto abriendo tu sitio web en un navegador diferente, uno en el que no hayas iniciado sesi\u00f3n, visitando la p\u00e1gina y luego haciendo clic en Inspeccionar y establecer redes. Luego recarga la p\u00e1gina.<\/p>\n\n\n\n<p><em>&lt;link&nbsp;<\/em><\/p>\n\n\n\n<p>&nbsp;<em>&nbsp;rel=\u201dpreload\u201d&nbsp;<\/em><\/p>\n\n\n\n<p>&nbsp;&nbsp;<em>as=\u201dfont\u201d<\/em><\/p>\n\n\n\n<p>&nbsp;&nbsp;<em>href=\u201dhttps:\/\/example.com\/wp-content\/themes\/twentytwentyone\/fonts\/acesans-bold-webfont.woff2\u2033&nbsp;<\/em><\/p>\n\n\n\n<p>&nbsp;&nbsp;<em>Crossorigin<\/em><\/p>\n\n\n\n<p><em>\/&gt;<\/em><\/p>\n\n\n\n<p>La primera entrada es la p\u00e1gina real que solicit\u00f3, pero la segunda entrada ser\u00e1 el archivo de fuente. Se carga como primer activo.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/htpty333mJCHvsUoSOFOD6geIZOhm7Kxb2ju5sjZmL5BdCKgltzVNP73jy8K1lPfGTuJ9kmBDqW_0cEManyEYYKl3POtQxAGJW3GxIoJ2O6eU2ShfpkiMyC1e95-9CmlSEaE8gEg\" alt=\"\" \/><\/figure>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--important\"><h3 class=\"title title--regular title--size-medium title--weight-bold color-darkest\"><strong>Consejo importante<\/strong>:<\/h3><p class=\"text text--size-medium color-darkest\">Solo precarga los archivos de fuentes m\u00e1s comunes que utilizas. Si precargas todos tus archivos de fuentes, terminar\u00e1s ralentizando tu sitio. Uno, tal vez dos archivos de fuentes precargados deber\u00edan ser lo suficientemente buenos para que tu sitio est\u00e9 en funcionamiento.<\/p><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Las fuentes son una buena forma de hacer que tu sitio se vea distintivo. Si se usan con moderaci\u00f3n, pueden diferenciar tu sitio sin afectar significativamente su rendimiento.<\/p>\n\n\n\n<p>Como ocurre con todas las cosas buenas, menos es m\u00e1s. Demasiadas fuentes ralentizar\u00e1n tu sitio y tambi\u00e9n har\u00e1n que tu sitio sea m\u00e1s dif\u00edcil de leer para tus usuarios. Los resultados finales son los mismos en ambos casos, los usuarios rebotan al siguiente sitio, as\u00ed que, como con todo, usa las fuentes del sitio web con prudencia y aseg\u00farate de mantenerlas optimizadas.<\/p>\n","protected":false},"excerpt":{"rendered":"Los d\u00edas de una web basada en p\u00e1ginas blancas, texto negro y enlaces azules se est\u00e1n desvaneciendo en la historia. Actualmente, si quieres llamar la atenci\u00f3n, tu p\u00e1gina web tiene que \"saltar a la vista\". JavaScript, CSS e im\u00e1genes se suman a hacer llamativo tu sitio web. Las fuentes tambi\u00e9n a\u00f1aden mucho al aspecto distintivo&hellip;","protected":false},"author":81,"featured_media":13413,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2781,19],"tags":[],"class_list":["post-13412","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-entendiendo-el-hosting","category-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.2 (Yoast SEO v24.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00f3mo cambiar las fuentes en WordPress para hacer que tu sitio web sea \u00fanico<\/title>\n<meta name=\"description\" content=\"Aprende a utilizar las fuentes en WordPress y a usar las fuentes de Google sin ralentizar tu web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo cambiar las fuentes en WordPress para hacer que tu sitio web sea \u00fanico\" \/>\n<meta property=\"og:description\" content=\"Aprende a utilizar las fuentes en WordPress y a usar las fuentes de Google sin ralentizar tu web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"SiteGround\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-28T18:36:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-19T08:06:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2021\/12\/how_to_change_wp_fonts_1200x600.jpeg\" \/>\n<meta name=\"author\" content=\"Cal Evans\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"C\u00f3mo cambiar las fuentes en WordPress para hacer que tu sitio web sea \u00fanico\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cal Evans\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/\"},\"author\":{\"name\":\"Cal Evans\",\"@id\":\"https:\/\/newblog.siteground.com\/es\/#\/schema\/person\/b7d955fe8f207e8e13a00552dc043fff\"},\"headline\":\"C\u00f3mo cambiar las fuentes en WordPress para hacer que tu sitio web sea \u00fanico\",\"datePublished\":\"2021-12-28T18:36:40+00:00\",\"dateModified\":\"2025-09-19T08:06:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/\"},\"wordCount\":1918,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/newblog.siteground.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2021\/12\/how_to_change_wp_fonts_1200x600.jpeg\",\"articleSection\":[\"Entendiendo el Hosting\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/\",\"url\":\"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/\",\"name\":\"C\u00f3mo cambiar las fuentes en WordPress para hacer que tu sitio web sea \u00fanico\",\"isPartOf\":{\"@id\":\"https:\/\/newblog.siteground.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2021\/12\/how_to_change_wp_fonts_1200x600.jpeg\",\"datePublished\":\"2021-12-28T18:36:40+00:00\",\"dateModified\":\"2025-09-19T08:06:43+00:00\",\"description\":\"Aprende a utilizar las fuentes en WordPress y a usar las fuentes de Google sin ralentizar tu web.\",\"breadcrumb\":{\"@id\":\"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/#primaryimage\",\"url\":\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2021\/12\/how_to_change_wp_fonts_1200x600.jpeg\",\"contentUrl\":\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2021\/12\/how_to_change_wp_fonts_1200x600.jpeg\",\"width\":1200,\"height\":600,\"caption\":\"fuentes_WordPress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/newblog.siteground.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo cambiar las fuentes en WordPress para hacer que tu sitio web sea \u00fanico\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/newblog.siteground.com\/es\/#website\",\"url\":\"https:\/\/newblog.siteground.com\/es\/\",\"name\":\"El blog de SiteGround\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/newblog.siteground.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/newblog.siteground.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/newblog.siteground.com\/es\/#organization\",\"name\":\"SiteGround Espa\u00f1a\",\"url\":\"https:\/\/newblog.siteground.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/newblog.siteground.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2025\/01\/cropped-Siteground-Logo-on-white.jpg\",\"contentUrl\":\"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2025\/01\/cropped-Siteground-Logo-on-white.jpg\",\"width\":166,\"height\":250,\"caption\":\"SiteGround Espa\u00f1a\"},\"image\":{\"@id\":\"https:\/\/newblog.siteground.com\/es\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/newblog.siteground.com\/es\/#\/schema\/person\/b7d955fe8f207e8e13a00552dc043fff\",\"name\":\"Cal Evans\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/newblog.siteground.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b8191d355780536d1c461f7e25b75129?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b8191d355780536d1c461f7e25b75129?s=96&d=mm&r=g\",\"caption\":\"Cal Evans\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/calevans\/\"],\"url\":\"https:\/\/newblog.siteground.com\/es\/author\/calevans\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo cambiar las fuentes en WordPress para hacer que tu sitio web sea \u00fanico","description":"Aprende a utilizar las fuentes en WordPress y a usar las fuentes de Google sin ralentizar tu web.","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:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"C\u00f3mo cambiar las fuentes en WordPress para hacer que tu sitio web sea \u00fanico","og_description":"Aprende a utilizar las fuentes en WordPress y a usar las fuentes de Google sin ralentizar tu web.","og_url":"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/","og_site_name":"SiteGround","article_published_time":"2021-12-28T18:36:40+00:00","article_modified_time":"2025-09-19T08:06:43+00:00","og_image":[{"url":"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2021\/12\/how_to_change_wp_fonts_1200x600.jpeg","type":"","width":"","height":""}],"author":"Cal Evans","twitter_card":"summary_large_image","twitter_title":"C\u00f3mo cambiar las fuentes en WordPress para hacer que tu sitio web sea \u00fanico","twitter_misc":{"Written by":"Cal Evans","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/#article","isPartOf":{"@id":"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/"},"author":{"name":"Cal Evans","@id":"https:\/\/newblog.siteground.com\/es\/#\/schema\/person\/b7d955fe8f207e8e13a00552dc043fff"},"headline":"C\u00f3mo cambiar las fuentes en WordPress para hacer que tu sitio web sea \u00fanico","datePublished":"2021-12-28T18:36:40+00:00","dateModified":"2025-09-19T08:06:43+00:00","mainEntityOfPage":{"@id":"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/"},"wordCount":1918,"commentCount":0,"publisher":{"@id":"https:\/\/newblog.siteground.com\/es\/#organization"},"image":{"@id":"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2021\/12\/how_to_change_wp_fonts_1200x600.jpeg","articleSection":["Entendiendo el Hosting","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/","url":"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/","name":"C\u00f3mo cambiar las fuentes en WordPress para hacer que tu sitio web sea \u00fanico","isPartOf":{"@id":"https:\/\/newblog.siteground.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2021\/12\/how_to_change_wp_fonts_1200x600.jpeg","datePublished":"2021-12-28T18:36:40+00:00","dateModified":"2025-09-19T08:06:43+00:00","description":"Aprende a utilizar las fuentes en WordPress y a usar las fuentes de Google sin ralentizar tu web.","breadcrumb":{"@id":"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/#primaryimage","url":"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2021\/12\/how_to_change_wp_fonts_1200x600.jpeg","contentUrl":"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2021\/12\/how_to_change_wp_fonts_1200x600.jpeg","width":1200,"height":600,"caption":"fuentes_WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/newblog.siteground.com\/es\/como-cambiar-fuentes-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/newblog.siteground.com\/es\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo cambiar las fuentes en WordPress para hacer que tu sitio web sea \u00fanico"}]},{"@type":"WebSite","@id":"https:\/\/newblog.siteground.com\/es\/#website","url":"https:\/\/newblog.siteground.com\/es\/","name":"El blog de SiteGround","description":"","publisher":{"@id":"https:\/\/newblog.siteground.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/newblog.siteground.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/newblog.siteground.com\/es\/#organization","name":"SiteGround Espa\u00f1a","url":"https:\/\/newblog.siteground.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/newblog.siteground.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2025\/01\/cropped-Siteground-Logo-on-white.jpg","contentUrl":"https:\/\/newblog.siteground.com\/es\/wp-content\/uploads\/sites\/4\/2025\/01\/cropped-Siteground-Logo-on-white.jpg","width":166,"height":250,"caption":"SiteGround Espa\u00f1a"},"image":{"@id":"https:\/\/newblog.siteground.com\/es\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/newblog.siteground.com\/es\/#\/schema\/person\/b7d955fe8f207e8e13a00552dc043fff","name":"Cal Evans","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/newblog.siteground.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b8191d355780536d1c461f7e25b75129?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b8191d355780536d1c461f7e25b75129?s=96&d=mm&r=g","caption":"Cal Evans"},"sameAs":["https:\/\/www.linkedin.com\/in\/calevans\/"],"url":"https:\/\/newblog.siteground.com\/es\/author\/calevans\/"}]}},"_links":{"self":[{"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/posts\/13412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/comments?post=13412"}],"version-history":[{"count":11,"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/posts\/13412\/revisions"}],"predecessor-version":[{"id":14292,"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/posts\/13412\/revisions\/14292"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/media\/13413"}],"wp:attachment":[{"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/media?parent=13412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/categories?post=13412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/newblog.siteground.com\/es\/wp-json\/wp\/v2\/tags?post=13412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}