{"id":362,"date":"2022-12-29T11:52:39","date_gmt":"2022-12-29T10:52:39","guid":{"rendered":"https:\/\/edfmultisite.digital\/mainwp\/?p=434"},"modified":"2022-12-29T11:52:39","modified_gmt":"2022-12-29T10:52:39","slug":"fuentes-de-google-y-mejores-practicas","status":"publish","type":"post","link":"https:\/\/edfmultisite.digital\/mainwp\/post\/fuentes-de-google-y-mejores-practicas\/","title":{"rendered":"Las doce mejores fuentes de Google"},"content":{"rendered":"\n

Al crear un sitio web, la elecci\u00f3n de la fuente es un aspecto importante de la apariencia general de su sitio. Las fuentes deben ser f\u00e1ciles de leer<\/strong><\/a> , pero tambi\u00e9n est\u00e9ticamente agradables. Si elige la fuente incorrecta, puede interrumpir la experiencia del usuario y, de hecho, hacer que su contenido sea dif\u00edcil de leer. Gracias a Google, hay muchas opciones de fuentes disponibles para usted. Desde su lanzamiento en 2010, las fuentes de Google han recorrido un largo camino desde sus 19 ofertas de fuentes. Ahora hay m\u00e1s de 1450 opciones disponibles actualmente, por lo que elegir las fuentes correctas puede ser desalentador. En esta publicaci\u00f3n, le haremos la vida un poco m\u00e1s f\u00e1cil al proporcionarle nuestra lista de las mejores fuentes de Google para usar en su sitio web.<\/p>\n\n\n\n

\u00bfQu\u00e9 son las fuentes de Google?<\/strong><\/h1>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Google Fonts<\/strong><\/a> es una colecci\u00f3n de fuentes web de alta calidad para usar en proyectos web. Adem\u00e1s, todas las fuentes se pueden descargar para su instalaci\u00f3n en sistemas locales. Las fuentes se introducen en su sitio web a trav\u00e9s de la red de entrega de contenido (CDN) de Google y se cargar\u00e1n autom\u00e1ticamente una vez instaladas.<\/p>\n\n\n\n

\u00bfPor qu\u00e9 deber\u00eda usar las fuentes de Google?<\/strong><\/h2>\n\n\n\n

Todas las fuentes son gratuitas para uso comercial, por lo que se pueden usar tanto en proyectos web como impresos. Adem\u00e1s, todas las fuentes se actualizan autom\u00e1ticamente, por lo que no hay necesidad de preocuparse por mantener las cosas actualizadas manualmente. Una vez instalado en su sitio, no hay nada m\u00e1s que hacer. Como se mencion\u00f3 anteriormente, hay toneladas de opciones con m\u00e1s de 1450 familias de fuentes. Por \u00faltimo, las fuentes de Google ofrecen compatibilidad con varios idiomas, por lo que si su sitio tiene m\u00e1s de un idioma instalado, est\u00e1 listo para comenzar.<\/p>\n\n\n\n

Las 12 mejores fuentes de Google disponibles (\u00a1y son gratis!)<\/strong><\/h3>\n\n\n\n

Con tantas opciones disponibles, puede ser un poco abrumador saber qu\u00e9 fuentes elegir para su sitio web. Afortunadamente, lo ayudaremos a determinar las familias de fuentes m\u00e1s populares y de moda para que las use en su sitio web. Empecemos.<\/p>\n\n\n\n

1. Roboto<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Roboto se considera una fuente de doble prop\u00f3sito y es la fuente de Google m\u00e1s popular disponible. De forma geom\u00e9trica, tambi\u00e9n tiene bonitas curvas y generalmente se considera muy f\u00e1cil de leer. De hecho, se ha utilizado como tipo de letra para el sistema operativo Android de Google desde 2014.<\/p>\n\n\n\n

Obtener la fuente<\/strong><\/a><\/p>\n\n\n\n

2. Open Sans<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Open Sans cuenta con una apariencia ultra legible y f\u00e1cil de usar. Es genial tanto para t\u00edtulos como para textos de cuerpo. Debido a su facilidad de lectura, se utiliza como fuente predeterminada en el tema Divi.<\/p>\n\n\n\n

Obtener la fuente<\/strong><\/a><\/p>\n\n\n\n

3. Montserrat<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Con m\u00e1s de 30 estilos, Monsterrat es bastante vers\u00e1til. Se inspir\u00f3 en obras de arte vistas en el hist\u00f3rico barrio de Montserrat de Buenos Aires durante la primera mitad del siglo XX.<\/p>\n\n\n\n

Obtener la fuente<\/strong><\/a><\/p>\n\n\n\n

4. Lato<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Google describe a Lato como una fuente \"seria pero amigable\". Polaco para el verano, Lato es una fuente multiprop\u00f3sito que generalmente es f\u00e1cil de leer e invoca sentimientos de alegr\u00eda de verano.<\/p>\n\n\n\n

Ah, y por cierto, lo usamos en nuestro blog.<\/p>\n\n\n\n

Obtener la fuente<\/strong><\/a><\/p>\n\n\n\n

5. Poppins<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Poppins es una fuente redondeada y muy popular que es adecuada tanto para el encabezado como para el cuerpo del texto. Desarrollada en 2014 como una fuente de c\u00f3digo abierto, Poppins se basa en los sistemas de escritura latino y devanagari.<\/p>\n\n\n\n

Obtener la fuente<\/strong><\/a><\/p>\n\n\n\n

6. Source Sans Pro<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Lanzada como la primera fuente de c\u00f3digo abierto de Adobe, Source Sans Pro es adecuada para todos los dise\u00f1os de interfaz de usuario. Es bastante vers\u00e1til y combina bien con otras fuentes de nuestra lista, como Montserrat, Open Sans y Work Sans.<\/p>\n\n\n\n

Obtener la fuente<\/strong><\/a><\/p>\n\n\n\n

7. Raleway<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Fina y elegante, Raleway es una fuente tipogr\u00e1fica para pantalla muy adecuada para encabezados y subt\u00edtulos. Desarrollada inicialmente en 2012 como una \u00fanica fuente fina, se ha ampliado para incluir 9 variaciones.<\/p>\n\n\n\n

Obtener la fuente<\/strong><\/a><\/p>\n\n\n\n

8. Noto Sans<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Noto Sans es bastante robusto con sus 18 variaciones de fuente. Adem\u00e1s, hay m\u00e1s de 3700 glifos disponibles con esta incre\u00edble tipograf\u00eda. Con m\u00e1s de 18 variaciones que incluyen m\u00faltiples pesos, anchos y cursivas, Noto Sans es adecuado para casi cualquier dise\u00f1o.<\/p>\n\n\n\n

Obtener la fuente<\/strong><\/a><\/p>\n\n\n\n

9. Inter<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Dise\u00f1ada espec\u00edficamente para pantallas de computadora, Inter es la fuente m\u00e1s nueva de nuestra lista. Lanzado inicialmente bajo el nombre de Interface, Inter apareci\u00f3 en escena en 2017. Con frecuencia se lo conoce como un cruce entre Helvetica y San Fransisco Pro.<\/p>\n\n\n\n

Obtener la fuente<\/strong><\/a><\/p>\n\n\n\n

10. Roboto Slab<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Basado en el popular Roboto, la variaci\u00f3n Slab est\u00e1 disponible en cuatro pesos: fino, ligero, normal y audaz.<\/p>\n\n\n\n

Obtener la fuente<\/strong><\/a><\/p>\n\n\n\n

11. Merriweather <\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Como uno de los \u00fanicos tipos de letra serif en nuestra lista, Merriweather es divertido, pero serio. Cuenta con letras altas condensadas, pero f\u00e1ciles de leer en pantallas de todos los tama\u00f1os. Tambi\u00e9n hay disponible una fuente Merriweather Sans<\/strong><\/a> que combina bien con su primo serif.<\/p>\n\n\n\n

Obtener la fuente<\/strong><\/a><\/p>\n\n\n\n

12. Playfair Display<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Playfair Display emana un estilo del viejo mundo, pero exhibe un estilo moderno. Es m\u00e1s adecuado para encabezados debido a su apariencia imponente. Cuando utilice Playfair Display, considere combinarlo con una fuente sans serif de f\u00e1cil lectura, como Roboto, Open Sans, Work Sans o Lato.<\/p>\n\n\n\n

Obtener la fuente<\/strong><\/a><\/p>\n\n\n\n

Mejores pr\u00e1cticas para usar Google Fonts en WordPress<\/strong><\/p>\n\n\n\n

El uso de las fuentes de Google es r\u00e1pido y f\u00e1cil, pero hay algunas cosas que deben tenerse en cuenta para que su sitio funcione sin problemas y r\u00e1pido. Para aprovechar al m\u00e1ximo el uso de estas fuentes, la optimizaci\u00f3n del sitio<\/strong><\/a> es clave.<\/p>\n\n\n\n

Use solo las fuentes que necesita<\/strong><\/p>\n\n\n\n

Al considerar la velocidad del sitio, generalmente solo debe usar dos o tres familias de fuentes en su sitio. Las familias de fuentes consisten en todas las iteraciones de una fuente. Por ejemplo, si instala la familia Montserrat en su sitio, en realidad est\u00e1 instalando 8 fuentes. Las familias de fuentes contienen todas las instancias de un tipo de fuente, que pueden incluir diferentes pesos (regular, medio, semi-negrita, negrita) y transformaciones que incluyen cursiva.<\/p>\n\n\n\n

Usar un complemento de tipograf\u00eda<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Es una buena idea usar un complemento de tipograf\u00eda<\/strong><\/a> para administrar las fuentes instaladas en su sitio web. Algunos temas como Divi<\/strong><\/a> tienen gesti\u00f3n de tipograf\u00eda integrada en su marco. Los complementos de tipograf\u00eda pueden ayudarlo a administrar no solo sus fuentes, sino tambi\u00e9n tipos de letra, \u00edconos, capitulares y m\u00e1s.<\/p>\n\n\n\n

Elija buenas combinaciones de fuentes<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Al elegir fuentes, intente elegir fuentes que funcionen bien juntas. Adem\u00e1s, debe emparejar encabezados serif con texto de cuerpo sans serif. Esto se debe a que el uso de dos fuentes serif juntas hace que el texto sea dif\u00edcil de leer. Alternativamente, es totalmente aceptable usar dos fuentes san serif juntas, o incluso diferentes pesos en la misma familia. Si no est\u00e1 seguro de qu\u00e9 combinaciones de fuentes usar, puede usar una pr\u00e1ctica extensi\u00f3n de navegador como Fontpair<\/strong><\/a> para que sea m\u00e1s f\u00e1cil encontrar qu\u00e9 fuentes est\u00e1 usando un sitio web<\/strong><\/a> .<\/p>\n\n\n\n

Utilice fuentes de Google autohospedadas<\/strong><\/p>\n\n\n\n

Si elige no usar un complemento de tipograf\u00eda en su sitio de WordPress, puede alojar las fuentes en su propio servidor. El proceso es bastante simple de lograr en unos pocos pasos.<\/p>\n\n\n\n

El primer paso es descargar la fuente. Elija la fuente que desea descargar, luego haga clic en el bot\u00f3n Descargar familia<\/strong> en la esquina superior derecha de su pantalla. Tenga en cuenta que cuando descarga la fuente de Google, autom\u00e1ticamente acepta sus t\u00e9rminos de servicio.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Una vez que se descargan las fuentes, deber\u00e1 moverlas a su proyecto. Para este ejemplo, usaremos Mamp para subirlos al tema Twenty Twenty.<\/p>\n\n\n\n

Al colocar los archivos de fuentes en su proyecto, aseg\u00farese de tomar nota de la ubicaci\u00f3n del archivo. Deber\u00e1 agregarlo a trav\u00e9s de CSS en los pr\u00f3ximos pasos. Para acceder a las fuentes de su tema, vaya a \/wp-content\/themes\/twentytwenty\/assets\/fonts\/<\/strong> . Si est\u00e1 utilizando un tema diferente, reemplace veinteveinte<\/em> con el nombre de su tema. Arrastre sus archivos de fuentes descargados (incluida la carpeta) a la carpeta de fuentes en sus sitios de WordPress.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

A continuaci\u00f3n, ubique la fuente descargada y arr\u00e1strela a la carpeta de activos\/fuentes de su tema.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Agregar el CSS<\/strong><\/p>\n\n\n\n

A continuaci\u00f3n, necesitaremos agregar un poco de CSS al personalizador del tema para que se reconozca nuestra fuente. Vaya a Apariencia > Personalizar<\/strong> .<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Haga clic en CSS adicional<\/strong> en el personalizador para abrir el \u00e1rea de entrada de css.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

A continuaci\u00f3n, agregue el siguiente c\u00f3digo en el \u00e1rea CSS adicional:<\/p>\n\n\n\n

<\/td>@font-face {     
font-family<\/strong>: Roboto;
src: url(\/wp-content\/themes\/twentytwenty\/assets\/fonts\/Roboto-Regular.ttf);     
font-weight<\/strong>: normal;
}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Para usar su nueva fuente, simplemente haga referencia a la fuente usando CSS. Puede usar la herramienta de inspecci\u00f3n del navegador para aplicar la fuente a cualquier clase de css que desee. En este ejemplo, queremos que el t\u00edtulo del sitio, as\u00ed como el contenido de la p\u00e1gina, utilicen nuestra nueva fuente. Para este ejemplo, ingrese el siguiente CSS:<\/p>\n\n\n\n

<\/td>.entry-title a {
font-family<\/strong>: \"Roboto\", Arial, sans-serif;
}  
.entry-content {
font-family<\/strong>: \"Roboto\", Arial, sans-serif;
}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Haga clic en Publicar<\/strong> para guardar sus cambios.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

L\u00edmite de pesos de fuente<\/strong><\/p>\n\n\n\n

De manera similar a mantener sus familias de fuentes al m\u00ednimo, debe limitar la cantidad de pesos de fuente que usa en su sitio web. Si solo planea usar regular, medio y negrita, no hay una buena raz\u00f3n para incluir 18 variaciones de una fuente. Pedir a Google que entregue pesos de fuente adicionales que no se est\u00e1n utilizando solo aumentar\u00e1 el tiempo que se tarda en cargar las fuentes desde los servidores de Google.<\/p>\n\n\n\n

Uso de fuentes de Google en Divi<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Divi<\/strong><\/a> hace que las fuentes de Google est\u00e9n disponibles de forma predeterminada. Las fuentes est\u00e1n disponibles en cualquier m\u00f3dulo que tenga texto. Tiene la posibilidad de elegir entre cientos de fuentes web de la biblioteca de fuentes de Google.<\/p>\n\n\n\n

En las opciones del tema Divi, puede optar por habilitar Google Fonts, junto con los subconjuntos de fuentes.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Gracias a la funci\u00f3n de b\u00fasqueda de fuentes de Divi, es f\u00e1cil buscar y encontrar cualquier fuente de Google que desee. Otra gran caracter\u00edstica de Divi es la capacidad de ver las fuentes utilizadas recientemente en la parte superior para facilitar el acceso.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Tambi\u00e9n puede ingresar la clave API de Google<\/strong><\/a> para que Divi se mantenga actualizado con las \u00faltimas versiones de fuentes, as\u00ed como con las nuevas que se agregan en el repositorio de fuentes de Google.<\/p>\n\n\n\n

Pensamientos finales<\/strong><\/p>\n\n\n\n

Elegir la fuente adecuada para su sitio web puede ser un proceso abrumador debido a los cientos de opciones disponibles para usted. Solo recuerde elegir una fuente que sea f\u00e1cil de leer y que se vea bien con el estado de \u00e1nimo de su dise\u00f1o. Combine fuentes que se complementen entre s\u00ed y trate de no usar demasiadas fuentes.<\/p>\n","protected":false},"excerpt":{"rendered":"

Las 12 mejores fuentes de Google para sitios web (y mejores pr\u00e1cticas)<\/p>\n","protected":false},"author":9,"featured_media":387,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,25],"tags":[26],"class_list":["post-362","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-diseno","tag-fuentes"],"_links":{"self":[{"href":"https:\/\/edfmultisite.digital\/mainwp\/wp-json\/wp\/v2\/posts\/362","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edfmultisite.digital\/mainwp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/edfmultisite.digital\/mainwp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/edfmultisite.digital\/mainwp\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/edfmultisite.digital\/mainwp\/wp-json\/wp\/v2\/comments?post=362"}],"version-history":[{"count":0,"href":"https:\/\/edfmultisite.digital\/mainwp\/wp-json\/wp\/v2\/posts\/362\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/edfmultisite.digital\/mainwp\/wp-json\/wp\/v2\/media\/387"}],"wp:attachment":[{"href":"https:\/\/edfmultisite.digital\/mainwp\/wp-json\/wp\/v2\/media?parent=362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edfmultisite.digital\/mainwp\/wp-json\/wp\/v2\/categories?post=362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edfmultisite.digital\/mainwp\/wp-json\/wp\/v2\/tags?post=362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}