[et_pb_section fb_built=\u00bb1″ _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n
En el din\u00e1mico mundo de WordPress, la optimizaci\u00f3n<\/strong> de fuentes es un aspecto crucial que a menudo se pasa por alto, pero que tiene un impacto significativo en el rendimiento y la est\u00e9tica de nuestro sitio web. Las fuentes no son solo un elemento de dise\u00f1o; influyen en la velocidad de carga de WordPress<\/a>, la accesibilidad y la experiencia general del usuario en WordPress<\/a>. Por ello, es esencial aprender a optimizarlas de manera efectiva. En esta gu\u00eda, exploraremos c\u00f3mo podemos mejorar el rendimiento de nuestro sitio WordPress optimizando las fuentes, sin sacrificar el estilo y la coherencia visual.<\/p>\n La elecci\u00f3n y el manejo de las fuentes en nuestro sitio WordPress pueden parecer detalles menores, pero tienen un gran impacto en c\u00f3mo los visitantes perciben e interact\u00faan<\/strong> con nuestro contenido. Una estrategia de fuentes bien ejecutada mejora la legibilidad<\/strong>, la cohesi\u00f3n del dise\u00f1o y, lo m\u00e1s importante, la velocidad de carga de nuestro sitio. Al optimizar las fuentes, no solo estamos mejorando la est\u00e9tica, sino tambi\u00e9n contribuyendo a una mejor experiencia de usuario y a un mejor rendimiento en los motores de b\u00fasqueda.<\/p>\n En esta gu\u00eda, vamos a ir a trav\u00e9s de los pasos cr\u00edticos para optimizar las fuentes en WordPress. Desde la selecci\u00f3n y reducci\u00f3n del n\u00famero de fuentes<\/strong> y variaciones, hasta t\u00e9cnicas avanzadas como alojar de forma local las fuentes<\/strong> y pre cargarlas para mejorar la velocidad de carga. Adem\u00e1s, abordaremos c\u00f3mo mantener el texto visible durante la carga de las fuentes y c\u00f3mo los plugins pueden ser aliados valiosos en este proceso.<\/p>\n Prep\u00e1rate para sumergirte en el mundo de las fuentes en WordPress, donde aprender\u00e1s a equilibrar belleza y funcionalidad, asegurando que tu sitio no solo se vea bien, sino que tambi\u00e9n funcione de manera \u00f3ptima.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Las fuentes personalizadas son un elemento clave que nos permite a los creadores de sitios web en WordPress<\/a> infundir personalidad y coherencia visual en nuestras p\u00e1ginas. Estas fuentes no son solo letras en una pantalla; son una extensi\u00f3n de la marca y la identidad del sitio. Vamos a explorar qu\u00e9 son las fuentes personalizadas en WordPress y por qu\u00e9 juegan un papel tan importante en el dise\u00f1o y la experiencia del usuario.<\/p>\n Las fuentes personalizadas en WordPress<\/strong> son tipos de letra que se pueden agregar al sitio para complementar o reemplazar las fuentes predeterminadas que vienen con el tema de WordPress. Estas fuentes permiten a los propietarios de sitios web ir m\u00e1s all\u00e1 de las opciones est\u00e1ndar y elegir tipograf\u00edas que se alineen mejor con su identidad visual y los objetivos de su marca.<\/p>\n La elecci\u00f3n de la fuente correcta es crucial para comunicar el tono y el mensaje de nuestro sitio. Una fuente puede ser elegante, moderna, tradicional o juguetona, y cada una evoca diferentes emociones y reacciones en los visitantes del sitio. Por lo tanto, las fuentes personalizadas no son solo una cuesti\u00f3n de est\u00e9tica, sino tambi\u00e9n una herramienta poderosa para mejorar la comunicaci\u00f3n y la conexi\u00f3n con nuestra audiencia.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/12\/visita-a-dafont.gif\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb title_text=\u00bbvisita a dafont\u00bb sticky_enabled=\u00bb0″][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Caracter\u00edsticas de las fuentes personalizadas<\/strong><\/p>\n Unicidad y branding:<\/strong> las fuentes personalizadas ayudan a establecer una identidad \u00fanica para el sitio, diferenci\u00e1ndolo de otros que podr\u00edan estar utilizando las mismas fuentes predeterminadas.<\/p>\n Mejora de la experiencia del usuario:<\/strong> una fuente bien elegida puede mejorar la legibilidad y la accesibilidad, lo que contribuye a una mejor experiencia del usuario.<\/p>\n Flexibilidad en el dise\u00f1o:<\/strong> ofrecen mayor flexibilidad y control sobre el dise\u00f1o de nuestro sitio, permiti\u00e9ndote ajustar aspectos como el tama\u00f1o, el peso y el estilo de la letra.<\/p>\n Agregar fuentes personalizadas a WordPress puede hacerse de varias maneras, como a trav\u00e9s de plugins, CSS personalizado en WordPress<\/a> o incluso integrando servicios de fuentes web como Google Fonts para WordPress<\/a>. Es importante seleccionar fuentes que no solo se vean bien, sino que tambi\u00e9n se carguen con rapidez<\/strong> y sean compatibles con diferentes navegadores y dispositivos<\/strong>.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Cuando hablamos de mejoras en nuestro CMS WordPress<\/a>, en especial los aspectos de dise\u00f1o web, la optimizaci\u00f3n de fuentes es un aspecto crucial que va m\u00e1s all\u00e1 de solo el aspecto est\u00e9tico<\/strong>. Optimizar las fuentes no solo mejora la apariencia visual de tu sitio, sino que tambi\u00e9n influye de forma significativa en su rendimiento y accesibilidad. Si buscamos algunas razones por las que el optimizar las fuentes en WordPress es tan importante como:<\/p>\n Mejora del rendimiento y la velocidad del sitio<\/strong><\/p>\n Impacto en la experiencia del usuario<\/strong><\/p>\n Eficiencia en el uso de recursos<\/strong><\/p>\n Est\u00e9tica y branding<\/strong><\/p>\n Optimizar las fuentes en WordPress es un paso esencial para cualquier propietario de sitio web en WordPress<\/a> que busque mejorar el rendimiento, la accesibilidad y la est\u00e9tica de su sitio. Al dedicar tiempo y recursos a esta tarea, no solo estamos mejorando la experiencia del usuario, sino tambi\u00e9n contribuyendo al \u00e9xito general de tu sitio en t\u00e9rminos de engagement<\/strong>, SEO<\/strong> y coherencia de marca<\/strong>.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Optimizar las fuentes en WordPress es un proceso esencial para mejorar la velocidad de carga, la est\u00e9tica y la usabilidad de nuestro sitio. A continuaci\u00f3n, vamos a ver algunas de las opciones m\u00e1s destacadas junto a una breve explicaci\u00f3n para cada opci\u00f3n de optimizaci\u00f3n de fuentes en WordPress<\/strong>, asegurando que nuestro sitio no solo se vea bien, sino que tambi\u00e9n funcione de manera \u00f3ptima.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Reducir el n\u00famero de fuentes en nuestro sitio WordPress es una estrategia efectiva para mejorar tanto la est\u00e9tica como el rendimiento de nuestra p\u00e1gina. Un exceso de fuentes diferentes puede sobrecargar de forma visual nuestro sitio y ralentizar los tiempos de carga, afectando de forma negativa la experiencia del usuario y la auditoria SEO<\/a>. A continuaci\u00f3n, exploramos c\u00f3mo podemos simplificar la selecci\u00f3n de fuentes para optimizar nuestro sitio WordPress.<\/p>\n Importancia de reducir el n\u00famero de fuentes<\/strong><\/p>\n Mejora la velocidad de carga:<\/strong> cada fuente adicional que se carga en nuestro sitio aumenta el tiempo de carga. Al reducir el n\u00famero de fuentes, disminuimos el peso de la p\u00e1gina y mejoramos la velocidad de carga.<\/p>\n Cohesi\u00f3n visual:<\/strong> demasiadas fuentes pueden crear una apariencia desordenada y distraer. Un n\u00famero limitado de fuentes asegura una presentaci\u00f3n m\u00e1s coherente y profesional.<\/p>\n Experiencia de usuario mejorada:<\/strong> una selecci\u00f3n de fuentes m\u00e1s simple y consistente mejora la legibilidad y la navegabilidad del sitio, ofreciendo una mejor experiencia al usuario.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/12\/ver-fuentes.gif\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb title_text=\u00bbver fuentes\u00bb sticky_enabled=\u00bb0″][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Un sitio web bien dise\u00f1ado puede trabajar con una \u00fanica fuente, este incluso tener dos variaciones, una normal<\/strong> y otra bold<\/strong> o negrita<\/strong>. Por lo general estas variaciones se conocen como 400 normal<\/strong> y 600 bold<\/strong>, su nombre proviene del espesor que posee dicha fuente.<\/p>\n Lo que tenemos que evitar a toda costa es sobresaturar nuestro sitio con m\u00e1s de un tipo diferente de fuente, no de variaciones, un ejemplo de una mala gesti\u00f3n es una p\u00e1gina que al momento de cargar deba tomar en cuenta muchas variaciones y muchos tipos de fuente diferentes.<\/p>\n Una forma de tomar esto en cuenta es mediante la ventana de inspeccionar en nuestro navegador, una vez dentro solo tenemos que buscar el apartado de Fuentes<\/strong> o Sources<\/strong>, es aqu\u00ed donde veremos la cantidad exacta de variaciones y fuentes que nuestro sitio est\u00e1 tomando.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/12\/mas-fuentes-.gif\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb title_text=\u00bbmas fuentes\u00bb sticky_enabled=\u00bb0″][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Al final, lo que buscamos es tener la m\u00e1s m\u00ednima cantidad de fuentes para que nuestro sitio pueda cargar de una forma m\u00e1s r\u00e1pida<\/strong> y brindar a nuestros usuarios la rapidez que buscan en un sitio.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Si bien el punto anterior hablamos sobre las cantidades de fuentes y tocamos lo que ser\u00eda las variaciones, ya en este punto s\u00ed tenemos en cuenta las mismas. En el proceso de optimizaci\u00f3n de fuentes en WordPress, un aspecto crucial es la reducci\u00f3n del n\u00famero de variaciones de fuentes<\/strong>. Cada variaci\u00f3n adicional (como negrita, cursiva, o diferentes pesos de fuente)<\/strong> que nuestro sitio carga puede impactar en la velocidad y el rendimiento general. Por lo tanto, es esencial ser estrat\u00e9gico en el uso de estas variaciones para mantener un sitio \u00e1gil y eficiente.<\/p>\n Es de suma Importancia el reducir las variaciones de fuentes por lo siguiente:<\/p>\n Mejora del rendimiento:<\/strong> reducir las variaciones de fuentes, disminuye la cantidad de archivos que el navegador necesita cargar, lo que puede acelerar de forma significativa el tiempo de carga de nuestro sitio.<\/p>\n Optimizaci\u00f3n de recursos:<\/strong> al limitar las variaciones, reducimos el uso de recursos, lo que es en especial importante para los visitantes con conexiones de internet m\u00e1s lentas o dispositivos menos potentes.<\/p>\n Claridad visual:<\/strong> un uso excesivo de variaciones puede resultar en un dise\u00f1o sobrecargado. Limitarlas ayuda a mantener un dise\u00f1o limpio y coherente.<\/p>\n Lo m\u00e1s recomendable es mantener solo dos variaciones, una para la fuente en general y la segunda la especializada en t\u00edtulos y textos destacados, est\u00e1 por lo general est\u00e1 estipulada en bold.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/12\/fuentes-con-variaciones.gif\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb title_text=\u00bbfuentes con variaciones\u00bb sticky_enabled=\u00bb0″][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Alojar de forma local las fuentes en WordPress es una t\u00e9cnica de optimizaci\u00f3n que puede tener un impacto significativo en la velocidad<\/strong> y el rendimiento de nuestro sitio. Esta pr\u00e1ctica implica almacenar los archivos de fuentes en nuestro propio servidor, en lugar de cargarlos desde un servicio externo como Google Fonts.<\/p>\n Hacer este ajuste de forma correcta nos ayudar\u00e1 en gran medida con la velocidad del sitio, as\u00ed como tambi\u00e9n nos facilitan algunos aspectos de leyes de cookies en WordPress<\/a>, en donde estos usuarios se conectan a nuestro sitio y toman datos de una fuente externa. Al usar una fuente en nuestro propio servidor nos ahorramos este dolor de cabeza.<\/p>\n Para poder utilizar una fuente personalizada en nuestro sitio solo tenemos que ingresar a nuestra carpeta de fuentes personalizadas, si no la tenemos creada debemos hacerlo en wepanel > administrador de archivos > public_html > dominio > carpeta de fuentes<\/strong>.<\/p>\n La ruta puede variar, pero siempre va a ser dentro de nuestro dominio.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/12\/subida-de-fuente-personalizada.gif\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb title_text=\u00bbsubida de fuente personalizada\u00bb sticky_enabled=\u00bb0″][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Tendremos que subir a esta carpeta la fuente y la variaci\u00f3n que queramos implementar en nuestro sitio, posterior a esto debemos agregar dos c\u00f3digos espec\u00edficos en nuestra Apariencia > Personalizar > Css adicional<\/strong>.<\/p>\n [\/et_pb_text][et_pb_code _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″] <\/code>[\/et_pb_code][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Aunque esto parece suficiente, no hemos dicho a nuestro sitio donde usar esta fuente personalizada. Para hacerlo de forma correcta, debemos identificar los estilos<\/strong> en los que la aplicaremos. Para ello bien podemos inspeccionar nuestro sitio o si ya tenemos el conocimiento, solo sustituirlos en el siguiente c\u00f3digo.<\/p>\n [\/et_pb_text][et_pb_code _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″] <\/code>[\/et_pb_code][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Precargar fuentes en WordPress es una t\u00e9cnica de optimizaci\u00f3n crucial que puede mejorar de forma significativa la velocidad de carga de nuestro sitio y la experiencia del usuario. Esta estrategia implica indicar al navegador que priorice la carga de ciertas fuentes al inicio, lo que asegura que est\u00e9n disponibles tan pronto como se necesiten para el renderizado de la p\u00e1gina.<\/p>\n Esta precarga nos ayuda a mejorar en varios sentidos:<\/strong><\/p>\n Mejora del tiempo de carga:<\/strong> al precargar las fuentes, reducimos el tiempo que tarda el navegador en mostrar el texto en su estilo deseado, lo que puede acelerar la visualizaci\u00f3n de nuestro contenido.<\/p>\n Experiencia de usuario mejorada:<\/strong> la precarga evita el efecto de \u00abflash\u00bb de texto sin estilo (FOUT) o de texto invisible (FOIT), mejorando la experiencia de navegaci\u00f3n del usuario.<\/p>\n Optimizaci\u00f3n del rendimiento:<\/strong> esta t\u00e9cnica contribuye a un mejor rendimiento en las evaluaciones de velocidad de p\u00e1gina, como Google PageSpeed Insights, lo cual es beneficioso para el SEO.<\/p>\n Es importante tener en cuenta que este tipo de ajustes solo puede ser posible para los sitios que tenemos con fuentes que son cargadas de forma local, si nuestras fuentes no se encuentran desde nuestro propio servidor no ser\u00e1 posible realizar esta mejora.<\/p>\n Para establecer la precarga de estas fuentes es cosa sencilla, solo tendremos que agregar una etiqueta de precarga en el archivo correspondiente de nuestro sitio. Esto se hace a\u00f1adiendo un enlace <link><\/strong> con el atributo rel=\u00bbpreload\u00bb<\/strong> y especificando la fuente en el atributo href<\/strong>.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n <link rel=\u00bbpreload\u00bb href=\u00bbruta\/a\/tu\/fuente.woff2″ as=\u00bbfont\u00bb type=\u00bbfont\/woff2″ crossorigin><\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Este c\u00f3digo debemos agregarlo en nuestro archivo header.php<\/a> antes de la etiqueta de cierre <\/head><\/strong>, esto har\u00e1 que en nuestro sitio la carga de esta fuente sea m\u00e1s r\u00e1pida, sin embargo, no es la \u00fanica forma de hacerlo. Podemos agregar tambi\u00e9n en nuestro archivo functions.php<\/a> un c\u00f3digo personalizado, el cual nos insertara esto en nuestro header sin tener que modificar el archivo.<\/p>\n Para ello agregamos el siguiente c\u00f3digo en el archivo functions.php ubicado en wepanel > administrador de archivos > public_html > dominio > wp-content > themes > tema utilizado > archivo functions.php<\/strong><\/p>\n [\/et_pb_text][et_pb_code _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb] <\/code>[\/et_pb_code][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Mantener el texto visible mientras se cargan las fuentes en WordPress es una t\u00e9cnica importante para mejorar la experiencia del usuario y la percepci\u00f3n de velocidad de tu sitio. Cuando una fuente personalizada est\u00e1 cargando, puede causar un efecto conocido como Flash of Invisible Text (FOIT)<\/strong> o Flash of Unstyled Text (FOUT)<\/strong>, donde el texto no se muestra o se muestra con un estilo diferente hasta que la fuente se carga.<\/p>\n Seg\u00fan que p\u00e1gina utilicemos para inspeccionar nuestro sitio, con p\u00e1ginas, por ejemplo pagespeed, nos encontraremos con mensajes como Aseg\u00farate de que el texto permanece visible mientras se carga la fuente web<\/strong>. Si bien parece un punto que nos causara dolores de cabeza, en realidad es bastante sencillo de solucionar.<\/p>\n En nuestro sitio donde hemos subido de forma local nuestra fuente, y hemos agregado el font-face<\/strong> a los estilos, tendremos que asignarle un valor adicional.<\/p>\n [\/et_pb_text][et_pb_code _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb] <\/code>[\/et_pb_code][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n Si nos damos cuenta en el c\u00f3digo tendremos un valor de swap<\/strong>, en el font-display<\/strong>, parece algo muy sencillo y es porque lo es. Solo con este c\u00f3digo ya no tendremos este mensaje en los sistemas de inspecci\u00f3n y mejor a\u00fan, no tendremos problemas con una cambio de tipograf\u00eda al ingresar a nuestro sitio.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Otro m\u00e9todo para optimizar nuestras fuentes es por medio de plugins, como es el caso de uno en particular, el plugin OMGF<\/strong>\u00a0es una herramienta valiosa para optimizar las fuentes en WordPress, en especial aquellas que provienen de Google Fonts<\/strong>. Este plugin se centra en mejorar el rendimiento y la conformidad con el GDPR al manejar las fuentes de Google de manera m\u00e1s eficiente.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/12\/omgf.png\u00bb title_text=\u00bbomgf\u00bb url=\u00bbhttps:\/\/es.wordpress.org\/plugins\/host-webfonts-local\/\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb text_orientation=\u00bbcenter\u00bb custom_margin=\u00bb||30px||false|false\u00bb global_colors_info=\u00bb{}\u00bb]Gratuito<\/a>\u00a0\u00a0\u00a0\u00a0\u00a0Comercial<\/a>\u00a0\u00a0\u00a0\u00a0\u00a0Visitar el plugin <\/i><\/span><\/a>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n La instalaci\u00f3n y configuraci\u00f3n de OMGF es sencilla. Podemos descargar y realizar una instalaci\u00f3n de plugin en WordPress<\/a> desde el repositorio. Una vez activado, OMGF<\/strong> comenzar\u00e1 a buscar de forma autom\u00e1tica las fuentes de Google en nuestro sitio y te permitir\u00e1 gestionarlas a trav\u00e9s de su pantalla de configuraci\u00f3n en el dashboard de WordPress<\/a>.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/12\/ajustes-de-omgf.gif\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb title_text=\u00bbajustes de omgf\u00bb sticky_enabled=\u00bb0″][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Al concluir nuestra exploraci\u00f3n sobre c\u00f3mo optimizar fuentes en WordPress<\/strong>, es evidente que la gesti\u00f3n adecuada de las fuentes es un componente esencial para mejorar tanto la est\u00e9tica como el rendimiento de un sitio web. A trav\u00e9s de esta gu\u00eda, hemos descubierto que las fuentes no son solo un elemento de dise\u00f1o<\/strong>, sino una pieza clave en la experiencia del usuario, la velocidad de carga y, en \u00faltima instancia, el \u00e9xito de tu sitio.<\/p>\n Optimizar las fuentes en WordPress es una tarea que va m\u00e1s all\u00e1 de la simple selecci\u00f3n de tipograf\u00edas atractivas<\/strong>. Es un proceso integral que requiere consideraci\u00f3n, planificaci\u00f3n y el uso de herramientas adecuadas. Al implementar las estrategias discutidas en esta gu\u00eda, podemos mejorar de forma significativa no solo c\u00f3mo se ve nuestro sitio, sino tambi\u00e9n c\u00f3mo funciona. En \u00faltima instancia, un sitio con fuentes bien optimizadas es m\u00e1s r\u00e1pido<\/strong>, m\u00e1s accesible<\/strong> y proporciona una experiencia de usuario<\/strong> m\u00e1s agradable<\/strong>, lo que contribuye al \u00e9xito general de nuestra presencia en l\u00ednea.<\/p>\n Recordemos que la optimizaci\u00f3n de fuentes es un viaje continuo en el mundo del dise\u00f1o web. Mantente al tanto de las nuevas tendencias y herramientas para asegurarte de que tu sitio WordPress siempre est\u00e9 un paso adelante.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Tambi\u00e9n te puede interesar:<\/p>\n <\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":" En el din\u00e1mico mundo de WordPress, la optimizaci\u00f3n de fuentes es un aspecto crucial que a menudo se pasa por alto, pero que tiene un impacto significativo en el rendimiento y la est\u00e9tica de nuestro sitio web. Las fuentes no son solo un elemento de dise\u00f1o; influyen en la velocidad de carga de WordPress, la […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/posts\/4158"}],"collection":[{"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/comments?post=4158"}],"version-history":[{"count":36,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/posts\/4158\/revisions"}],"predecessor-version":[{"id":4265,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/posts\/4158\/revisions\/4265"}],"wp:attachment":[{"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/media?parent=4158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/categories?post=4158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/tags?post=4158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\u00bfQue son las fuentes personalizadas en WordPress?<\/h2>\n
\u00bfPor qu\u00e9 optimizar las fuentes en WordPress?<\/h2>\n
\n
\n
\n
\n
\u00bfC\u00f3mo optimizar fuentes en WordPress?<\/h2>\n
Disminuir la cantidad de fuentes en WordPress<\/h3>\n
Disminuir la cantidad de variaciones de fuentes en WordPress<\/h3>\n
Servir las fuentes desde el propio WordPress<\/h3>\n
<\/p>\n@font-face { font-family: 'navidadfuente'; src: url('ruta\/a\/la\/fuente\/fuentes_custom\/fuente_personalizada.ttf') format('truetype'); \/* Puedes agregar m\u00e1s formatos de fuente aqu\u00ed si lo deseas *\/}<\/pre>\n<\/p>\nh1, h2, h3, h4, h5, h6 { font-family: 'navidadfuente', sans-serif; \/* Puedes agregar una fuente de respaldo (fallback) despu\u00e9s de la fuente personalizada *\/}<\/pre>\nEstablecer precargas o preloads de fuentes en WordPress<\/h3>\n
<\/p>\nfunction agregar_precarga_fuente() { echo '';}add_action('wp_head', 'agregar_precarga_fuente', 5);<\/pre>\nMantener visible los textos mientras se carga la fuente personalizada<\/h3>\n
<\/p>\n@font-face { font-family: 'TuFuentePersonalizada'; src: url('ruta\/a\/tu\/fuente.woff2') format('woff2'); font-display: swap;}<\/pre>\n\u00bfC\u00f3mo optimizar fuentes en WordPress con plugin?<\/h2>\n
Conclusiones<\/h2>\n
\n