Sitio web personalizado y tutorial de WordPress

Quieres aprender ¿Qué es Google Font? con Cómo usar estas fuentes ¿En tu diseño? Bueno, empecemos de nuevo. Es posible que no sepa esto, pero hasta hace poco, si quería asegurarse de que los usuarios veían correctamente la fuente seleccionada al diseñar un sitio web, sus opciones eran limitadas.

Causa: el conjunto predeterminado de fuentes en su computadora es limitado, por lo tanto, los sitios web que exceden esta configuración No mostrará su fuente correctamente (Imagínese el cambio de apariencia que trae consigo el diseño). Como resultado, este problema asfixió seriamente al diseñador y creó una Internet demasiado estandarizada.

Times New Roman, Arial, Courier New ... ya son fuentes muy utilizadas que muchos proyectos no reconocen.

¿Cuándo se tomará la decisión, luego cuándo? Aparecido Fuente webLas fuentes web son fuentes que se almacenan en el servidor, no en la computadora del usuario. Por lo tanto, cuando visita un sitio web que utiliza fuentes web, la fuente, las imágenes y otros archivos se descargan del sitio web.

Las fuentes web abrieron un mundo de posibilidades y, por primera vez, permitieron a los diseñadores elegir entre innumerables posibilidades. Hoy podemos elegir con seguridad una fuente porque siempre se puede mostrar de modo que la apariencia de un sitio web sea independiente de los medios.

Sin embargo, ahora podemos iniciar una empresa.

¿Qué es Google Font?

Google Fonts es un servicio gratuito de Google que Repositorio o directorio de fuentes Esto le permite personalizar la fuente del sitio. Se lanzó en 2010 y desde entonces ha llevado con éxito el uso de fuentes web a la corriente principal de Internet.

Puedes encontrarlo en Google Fonts. Fuentes gratis Y es compatible con todos los dispositivos, pantallas de todos los tamaños y lenguajes de programación. En el momento de escribir este artículo, el catálogo contiene 987 familias de fuentes diferentes. Todas las fuentes de código abierto de Google Fonts se pueden utilizar en varios sitios web, Privado y empresarial...

Fuentes proporcionadas por la API de fuentes de Google Estan comprimidos Para descargarlos al dispositivo lo antes posible. Tan pronto como Google Fonts esté disponible en el navegador del visitante, Se almacena en la caché En caso de que los necesite nuevamente en el futuro. Cuanto más a menudo se utiliza la API de Google Fonts, más a menudo el visitante guarda la fuente en la memoria del navegador y no tiene que descargarla.

Ventajas de las fuentes de Google

Hay dos ventajas principales de utilizar Google Fonts:

1. Puede mejorar la apariencia de su sitio web de forma gratuita: Google Fonts le brinda acceso a cientos de fuentes diferentes de calidad profesional (la mayoría de ellas). Hace solo unos años, el acceso a dichos recursos estaba asociado con tarifas sustanciales.
2. Obtienes coherencia en todas las plataformas: En el momento de redactar este artículo, la API de Google Fonts es compatible con Google Chrome 4.249.1 o superior, Mozilla Firefox 3.5 o superior, Safari 3.1 o superior, Opera 10.5 o superior e Internet Explorer 6 o superior.

Contras de las fuentes de Google

Como expliqué anteriormente, el uso de fuentes web significa que la primera visita conduce a Llamar a un servidor externo Posibilidad de descargar texto. Por esta razón, no se recomienda usar demasiadas fuentes y estilos en una página: no se convierta en cómplice o su sitio web puede ralentizarse. Creo que para cualquier fuente 3 modelos Debería estar satisfecho con: regular, cursiva y negrita (la fuente en cursiva se vuelve cada vez menos notoria).

Una forma de lidiar con consultas externas y posiblemente Reducir los problemas de velocidad de descarga En lugar de aprovisionar recursos de servidores externos de Google, aprovisione recursos de su propio host. Puede alojar fuentes en el mismo servidor en el que está alojado su sitio web y servirlas a través de un CDN. Esto le brinda más opciones para optimizar las consultas que ejecuta (por ejemplo, combinar todas las fuentes en un archivo, es decir, una consulta), el almacenamiento en caché y la compresión.

Así es como funciona el directorio de fuentes de Google

Ahora que he explicado qué es Google Fonts, te mostraré cómo funciona. contenido...

Como puedes ver en la imagen anterior, Google te ofrece un menú desplegable para ayudarte a elegir una fuente. 5 categorías principales:

• Serifas: Una fuente que tiene serifas o serifas al final de cada letra. Garamond o Times New Roman son dos ejemplos bien conocidos.
• Sans serif: No hay fuentes serif como Helvetica o Arial.
• Exposición: Son más decorativas y son fuentes especialmente diseñadas para títulos o texto corto (en lugar de párrafos). Su extrañeza les da personalidad, pero no lo tienen tan claro. Buenos ejemplos son la langosta o lo monótono.
• Escritura: Son fuentes que imitan la escritura a mano. Debe elegir con cuidado, ya que no siempre se escalan bien, lo que afecta su legibilidad. Como puede imaginar, tampoco son adecuados para grandes cantidades de texto. Probablemente conozcas ejemplos como Comic Neue o Pacifico.
• Ancho constante: Las fuentes monoespaciadas son tipos de letra en los que cada letra ocupa el mismo espacio. Uno de los ejemplos más famosos es Courier.

otoño "Idioma" También puede elegir las letras que desea escribir (las letras latinas se muestran de forma predeterminada). "Atributos de fuente" Tienen otras consideraciones importantes como la cantidad de estilos, grosor, inclinación o ancho que desea que tenga la fuente.

Además, la configuración predeterminada es el directorio Ordenar por popularidad de fuentes En algún momento cuando el usuario inicia sesión. Sin embargo, también podemos ordenarlos alfabéticamente, por historial popular (para encontrar las fuentes más exitosas a lo largo del tiempo) o por fecha de lanzamiento del catálogo.

¿Te gustaría probar cómo escribir ciertas oraciones con Google Fonts? Puede escribir las oraciones que desee, ver el alfabeto completo, números o párrafos completos en el tamaño que desee. Todo lo que tiene que hacer es hacer clic en el menú desplegable en la captura de pantalla a continuación y seleccionar la opción que desee:

Otra excelente manera de probar el aspecto de su sitio web (o cualquier otro sitio web) con sus fuentes de Google favoritas es con extensiones. Vista previa de fuentes de Google para ChromeTodo lo que tiene que hacer es instalarlo en su navegador desde el enlace anterior, hacer clic en el icono correspondiente y elegir la fuente que desea probar en la web abierta. No funcionará perfectamente, pero te ayudará a hacerte una idea.

Ahora que ha decidido qué fuente de Google utilizar, todo lo que tiene que hacer es copiar la línea de código proporcionada por Google. En la siguiente sección te lo explicaré usando un ejemplo.

Cómo agregar fuentes de Google manualmente Su página web

¿Ha seleccionado una fuente del directorio de fuentes de Google y ahora desea saber cómo puede usarla en su sitio web? Bueno, te lo explicaré pronto porque es fácil. Una vez que tome una foto, la verá mejor.

Seleccioné la fuente Merienda y marqué la casilla "Elección familiar" Aparece en la esquina inferior derecha de mi pantalla.

Ahora en la pestaña "Inserción" Veo dos códigos. El primer enlace que necesito usar en mi sitio web es el código que aparece en el cuadro gris de arriba.

Si tengo mi propio sitio web ...

es muy fácil:

1. Abro el archivo Index.html O busque el código de encabezado de mi sitio web.
2. Estoy buscando etiqueta Agregué el enlace que les dije que es el enlace en el cuadro gris sobre la imagen anterior Nota: el enlace debe estar entre las etiquetas Marca el comienzo del título de mi sitio web y la etiqueta final. , Marca el final de una pista.
3. Como resultado, mi index.html se ve así:

Si quiero usar Google Fonts en WordPress ...

Hay múltiples posibilidades Anadir Google Fonts y WordPress Pero no tiene que usar ningún complemento para esto. Si tiene un conocimiento mínimo de programación web, le recomiendo que haga lo siguiente:

1. Voy a mi panel de control, voy a la carpeta con mi tema activo y lo abro Archivo Function.php...
2. Estoy agregando el siguiente código en functions.php en una etiqueta personalizada :

Atención: Recuerde reemplazar mi enlace original (https://fonts.googleapis.com/css?family=Merienda&display=swap) Enlace a una fuente de su elección.

Siempre es una buena idea realizar estos cambios en el tema hijo porque si se realizan en el tema padre, los cambios se perderán en la actualización. Si no está seguro, ahora es un buen momento para comenzar a aprender. ¿Qué es un tema hijo? Y lo fácil que es crear plantillas.

Si todo esto suena complicado y no desea acceder directamente al código HTML de WordPress, a continuación explico cómo usar Google Fonts a través de diferentes complementos.

Especifique la fuente en CSS

Ahora que agregué manualmente una llamada a mis fuentes de Google, puedo especificar la fuente en mi código CSS y cómo quiero usar cada estilo Archivo Style.css Use el código en el cuadro gris debajo de la imagen de arriba de mi plantilla. Por ejemplo, en mi sitio web solo quiero usar la fuente Merienda en el título, así que especifico lo siguiente en style.css:

Los 3 mejores complementos de fuentes de Google para WordPress

Hay muchos Contiene plantillas para usar la configuración de fuentes de Google Desde el propio editor de temas. Algunos creadores de páginas (como Elementor) tienen Google Fonts integrado para que no tengas que instalar nada más. Sin embargo, a veces el diseño de la plantilla no está muy optimizado, por lo que puede deshabilitar las fuentes de Google en el diseño y agregarlas usted mismo.

Entonces te dejo 3 complementos Te pueden ayudar mucho. Si su plantilla no tiene la facilidad de uso de Google Fonts, parece que no confía en sus métodos:

Fuente WP Google

Entre los que he probado está WP Google Fonts Mi complemento favorito para cargar fuentes de Google en WordPressEstá instalado, activado, puedes agregar tipografías y asignarlas a los elementos que necesitemos (encabezados, párrafos de texto, listas, etc.). Hay hasta 6 fuentes, pero si necesita más, su sitio tiene una gran mezcolanza instalada.

WP Google Fonts es muy fácil de usar, es muy adecuado para Google Fonts y solo para Google Fonts: no permite cargar otras fuentes.

Usa cualquier fuente

No me gusta WP Google Fonts porque la interfaz de usuario me pareció un poco fea, pero Use Any Font funciona bien y Otra gran opción para agregar fuentes en WordPressLa desventaja es que la versión 100% gratuita solo permite conversiones de una fuente. La buena noticia es que si paga $ 10, puede usarlos indefinidamente.

Es un complemento fácil de usar que tiene instrucciones detalladas (de hecho, no es necesario ya que se explica por sí mismo) después de la activación a través de la API (en la página de activación hay un enlace para obtener una clave Lite o Test, gratis) solo necesita descargar la fuente que necesita. Cualquier formato compatible Por ejemplo, puede utilizar .Ttf, .otf o .woff Asigne títulos, párrafos o comillas.

Si no solo desea usar las fuentes de Google, usar cualquier fuente le da más libertad para agregar otras fuentes personalizadas.

Fuentes de Google

Mucha gente quiere saber cómo usar Easy Google Fonts primero porque es más confuso que antes. Solo un poco diferente porque Utilice Easy Google Fonts del editorY no está listo para bravas. ¿Por qué? Um, porque así ¿Tenías una vista preliminar? Y puede revisar los resultados de la nueva fuente antes de publicarlos. ¡Realmente muy útil!

En el editor puedes configurar la fuente, estilo, color, tamaño, márgenes, etc. para cada elemento. Hay muchas opciones de personalización en el editor, pero sí, solo puede usar fuentes de Google y no descargar ninguna otra fuente personalizada.

Cómo descargar fuentes de Google Fonts

Si está interesado en almacenar fuentes en su computadora, no solo para usar en sitios web, sino para diferentes tipos de documentos, modelos, etc., puede descargar fuentes de Google Fonts de la misma manera fácil. y sigue el enlace "Descarga la familia" Aparece en la esquina superior derecha de esta captura de pantalla:

Tienes que hacer eso como mencioné anteriormente, quieres Tu propio amo Para no enviar solicitudes a los servidores de Google.

¿Cuál es la mejor fuente para Google Fonts?

Debido a la diversidad, a veces puede resultar difícil tomar una decisión. Si somos objetivos y utilizamos datos de uso fiables, es evidente que algunas fuentes ganan. Veamos, por ejemplo Informe de entrevista del año pasado (En el momento de escribir):

Como puede ver, la fuente es similar a robot, Sans abierto con página Es el más popular en 2019-2020.

Si desea ver los recursos más visitados actualizados el día que leyó el artículo, búsquelos aquí: https://fonts.google.com/analytics Pueden cambiar con el tiempo, pero si elige una de las 10 fuentes principales de la lista, rara vez fallará.

¿Qué pasa si no desea utilizar las fuentes más populares? Es posible que desee algo un poco más primitivo, pero no quiere arriesgarse a fuentes desconocidas. Más tarde, Algunas fuentes de Google están ganando popularidad rápidamente. Pero todavía no están en la parte superior de la lista. ¡Puedes probar algunos de ellos!

• Noto Sans o Noto Serif: Noto es una fuente desarrollada por el propio Google y admite más de 30 fuentes. Disponemos de series serif y sans serif. Las fuentes Noto son ópticamente claras, elegantes y sencillas. El caso es que el resultado es muy limpio.
• Exhibición del patio de recreo: La fuente Claus Eggers Sørensen Serif, utilizada para títulos y subtítulos, se ve muy bien cuando se usa con Georgia para el cuerpo del texto.
• Palomitas de maiz: Esta fuente sans serif fue creada por Indian Type Foundry y se utiliza para títulos y texto más extenso. Hasta donde yo sé, también es muy útil en dispositivos móviles.
• De grano completo: Me encanta esta fuente serif de Friedrich Althausen. No es convincente, pero es muy eficaz en la web y en forma impresa, en párrafos y encabezados.
• de nuevo: Fuente Vernon Adams sans serif. Es muy versátil y creo que es perfecto para títulos y texto, ya que tiene suficiente espacio entre las letras.
• Nunito: También es una fuente sans-serif diseñada por Vernon Adams. Es muy adecuado para presentaciones, especialmente para títulos elegantes y modernos.
• Fira Sans: Fuente para Mozilla de Eric Spiekerman y Ralph Du Carroix. Amo cada uso que se le da. Se ve muy bien en la web y en cualquier tamaño.
• Arena movediza: Diseñada por Andrew Paglinavan, esta es una fuente sans serif especialmente diseñada para exhibición. Si bien en teoría también debería funcionar para tamaños más pequeños, pierde legibilidad para mi gusto.
• Ningún trabajo: Tipografía sans serif diseñada por Huang Wei. Los estilos orientados a la familia (normal y medio) se utilizan para los párrafos y el texto, mientras que las opciones más extremas se utilizan para la visualización.

Comprobaciones básicas al elegir fuentes

Cualquiera que sea la fuente que elija, es importante probarla correctamente y evaluar los resultados con cuidado. Déjame darte algunas sugerencias generales:

• ¿Ha elegido una fuente que se adapte a su marca? Tenga en cuenta los valores de su empresa y elija fuentes que funcionen en armonía con ellos.
• Prueba con diferentes dispositivos y resoluciones Observe el comportamiento de la fuente caso por caso.
• ¿Necesitas materiales impresos? Compruebe también si la fuente seleccionada es adecuada para este tipo de comunicación.
• Intente usar diferentes fuentes para el texto de su cuerpo: Párrafos, títulos, subtítulos ... La fuente debe ser lo suficientemente estilística, legible en cualquier caso y rica en contrastes.
• Asegúrate de que todos los personajes estén incluidos Lo que necesitas (por ejemplo, para que no te pierdas el signo "ñ" o te estreses más adelante).
• Elija un número limitado de fuentes y estilos: Con mayor frecuencia, se eligen fuentes primarias y secundarias coordinadas.

Abajo: fuente variable

Fuente variable lanzada oficialmente Opciones de fuente OpenType (Archivo .Otf) Hace solo unos años, en 2016, iniciaron una revolución completa en la tipografía desde el principio. Esto no es sorprendente ya que el proyecto fue iniciado por 4 gigantes de Internet prominentes: Google, Apple, Microsoft y Adobe e.

En pocas palabras, fuentes variables Un archivo de fuente funciona como si hubiera variosPorque es flexible (y no pesa el archivo) en términos de grosor, ancho, pendiente o cualquier otro atributo que la impresora desee diseñar. Así podemos decir que es posible crear una gran cantidad de estilos con una fuente variable sin afectar el tiempo de carga de Internet, ya que en realidad solo hay un archivo OpenType.

Imagina lo que eso significa para él respuesta inútilSe trata de fuentes que, según el dispositivo que utilice para navegar por Internet, pueden reducirse o agrandarse, reducirse o reducirse de tamaño para mejorar la legibilidad. Todo esto sucede automáticamente.

Sin embargo, aún queda trabajo por hacer para que las fuentes variables sean la norma. Algunas fuentes ya están disponibles, pero el diseñador tiene que agregar muchas fuentes, el software y los navegadores también deben ponerse al día (aunque Algunas personas lo hicieron).

¿Le gustaría probar fuentes variables? Tipo de detalles, Ejercicio axial Oh Forma V Y use su interfaz e incluso descárguela para probarla.

Siguiente: ¿Está pensando en utilizar Google Fonts?

Al diseñar un sitio web, parece más fácil ceñirse a la fuente predeterminada. Sin embargo, creo que elegir la fuente adecuada tendrá un efecto muy positivo en el éxito de su sitio web. Desde logotipos hasta números: una buena tipografía crea una comunicación no verbal con los visitantes y, por lo tanto, influye en su percepción de su proyecto.

Por lo tanto, en mi opinión Google Fonts es valioso recurso Para diseñadores web, especialmente considerando la intuición y facilidad de uso de los directorios. Google Fonts ofrece fuentes legibles y asequibles que se pueden utilizar con fines comerciales y personales, así como una variedad de fuentes visuales para una variedad de proyectos.

Dije que si al final decides ir con Google Fonts, deja un comentario y da tu opinión sobre el resultado.