{"id":1763,"date":"2017-10-09T13:22:53","date_gmt":"2017-10-09T11:22:53","guid":{"rendered":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/?p=1763"},"modified":"2019-12-24T13:53:38","modified_gmt":"2019-12-24T12:53:38","slug":"web-fonts","status":"publish","type":"post","link":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts","title":{"rendered":"Web Fonts. La revoluci\u00f3n de las tipograf\u00edas predefinidas"},"content":{"rendered":"<p style=\"text-align: justify;\">Durante a\u00f1os, el dise\u00f1o web se ha visto obligado a usar \u00fanicamente un peque\u00f1o ramillete de fuentes instaladas en (casi) todos los ordenadores. \u00bfPor qu\u00e9? Porque si la fuente que usa la web no est\u00e1 instalada en el dispositivo del usuario, el sistema la sustituye por otra y es muy probable que afecte a la <a href=\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/tipografia\/\" target=\"_blank\" rel=\"noopener noreferrer\">maquetaci\u00f3n original<\/a> y rompa el dise\u00f1o. Tras un largo camino, las <strong>web fonts<\/strong> han terminado con la dependencia de las fuentes seguras, abriendo un amplio cat\u00e1logo de posibilidades.<\/p>\n<p style=\"text-align: justify;\">El dise\u00f1o web es una disciplina a\u00fan en pa\u00f1ales pero evoluciona cada d\u00eda hacia una mayor <strong>expresividad y originalidad<\/strong>. Tras millones de p\u00e1ginas generadas con el selecto grupo de <a href=\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/tipografia\/\">fuentes<\/a> seguras, es hora de romper con la homogeneidad y abrir nuevas puertas. Durante alg\u00fan tiempo se probaron soluciones extremas como convertir el texto en imagen. Un truco poco recomendable porque aumenta el peso de la web, reduce la legibilidad del texto, afecta al SEO, ensucia el c\u00f3digo y complica las tareas de gesti\u00f3n de los contenidos. Por no hablar de c\u00f3mo adaptar un <strong>texto en imagen a un dise\u00f1o responsive<\/strong>\u2026<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_72 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts\/#La_revolucion_de_las_web_fonts\" title=\"La revoluci\u00f3n de las web fonts\">La revoluci\u00f3n de las web fonts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts\/#Consejos_a_la_hora_de_escoger_y_usar_web_fonts\" title=\"Consejos a la hora de escoger y usar web fonts\">Consejos a la hora de escoger y usar web fonts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts\/#Extra_una_mirada_al_futuro\" title=\"Extra: una mirada al futuro\">Extra: una mirada al futuro<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"La_revolucion_de_las_web_fonts\"><\/span>La revoluci\u00f3n de las web fonts<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">La verdadera revoluci\u00f3n ha venido de la mano de las web fonts. En vez de depender de las fuentes instaladas en el ordenador del usuario, las web font se almacenan en el propio servidor y se descargan junto con las im\u00e1genes y el resto de recursos. Las web fonts, adem\u00e1s, funcionan como cualquier otra fuente, son<strong> formateables, escalables y visibles<\/strong> para los buscadores, algo fundamental ahora que el SEO es clave en la vida de una web. A todo esto le sumamos el hecho de que cualquier fuente puede convertirse en una web font con generadores como Font Squirrell. As\u00ed, ahora tenemos un vasto cat\u00e1logo de opciones y la seguridad de que el dise\u00f1o de la web mantendr\u00e1 su apariencia original en casi cualquier ordenador o dispositivo.<\/p>\n<p style=\"text-align: justify;\">No obstante, hay que mantener el entusiasmo a raya y no caer en el error de hacer una macedonia tipogr\u00e1fica en nuestros proyectos. La contenci\u00f3n sigue siendo el mantra del dise\u00f1o: una <strong>tipo base y otra de contraste<\/strong> deber\u00edan ser m\u00e1s que suficiente para crear una web coherente. Tampoco es recomendable a nivel t\u00e9cnico ya que, cuantas m\u00e1s fuentes se incluyan mayor ser\u00e1 el tiempo de descarga. Existen cuatro tipos de archivo de webfont (TTF, WOFF, WOFF2, EOT) y es recomendable insertarlos todos para asegurar que en todos los navegadores se visualizan correctamente.<\/p>\n<p style=\"text-align: justify;\">El uso de<strong> web fonts<\/strong> se ha generalizado a ra\u00edz de que el todopoderoso Google lanzara <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Google Fonts<\/strong><\/a>, su cat\u00e1logo de fuentes web libres de derechos. Aunque existen otros cat\u00e1logos, Google nos lo ha puesto f\u00e1cil. El cat\u00e1logo es muy intuitivo y visual, repleto de filtros de b\u00fasqueda y opciones de prueba. Los dise\u00f1adores pueden descargar las fuentes para trabajar con ellas, escoger el lenguaje que necesitamos y hacer sus propias selecciones. Incluso Google Fonts cuenta con un apartado de colecciones tem\u00e1ticas que sirven de inspiraci\u00f3n. Para los desarrolladores, la propia web genera la<strong> l\u00ednea de c\u00f3digo<\/strong> necesaria para insertar la fuente en el proyecto.<\/p>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Consejos_a_la_hora_de_escoger_y_usar_web_fonts\"><\/span>Consejos a la hora de escoger y usar web fonts<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">La elecci\u00f3n de una familia tipogr\u00e1fica es una de las m\u00e1s relevantes a la hora de empezar un proyecto (expresividad, variables disponibles, compresi\u00f3n, interlineado\u2026) Al usar una web font se suman variables nuevas:<\/p>\n<ul>\n<li style=\"text-align: justify;\">Elegir una <strong>paleta limitada y coherente<\/strong>: al concebir un proyecto de larga duraci\u00f3n, los dise\u00f1adores debemos pensar m\u00e1s all\u00e1 de tendencias y gustos. Como se ha comentado m\u00e1s arriba, se recomienda usar un m\u00e1ximo de dos familias arm\u00f3nicas entre s\u00ed y que cubran todas las necesidades tipogr\u00e1ficas del proyecto<\/li>\n<li style=\"text-align: justify;\">Establecer una <strong>fuente de respaldo:<\/strong> aunque la principal ventaja de las web font es que su visualizaci\u00f3n est\u00e1 casi asegurada, no est\u00e1 de m\u00e1s establecer una fuente secundaria o de respaldo lo m\u00e1s parecida posible a la primaria por si \u00e9sta fallara.<\/li>\n<li style=\"text-align: justify;\">Hacer <strong>pruebas y examinar la fuente<\/strong>: existen cientos de web fonts, algunas est\u00e1n bien construidas, otras no. Antes de tomar una decisi\u00f3n es importante hacer pruebas y valorar los resultados. Para un proyecto web hay que observar, por ejemplo, c\u00f3mo se comporta en diferentes cuerpos de texto y su funcionamiento en dispositivos y resoluciones. Tambi\u00e9n ahorrar\u00e1 futuros problemas comprobar que la fuente tiene todos los caracteres que vamos a necesitar (comillas, ap\u00f3strofes, tildes, letras como la \u00f1, la \u00e7\u2026)<\/li>\n<li style=\"text-align: justify;\">Pensar en<strong> proyectos integrales<\/strong>: la tipograf\u00eda marca el car\u00e1cter de todo un proyecto o empresa. Por ello, al pensar en una tipograf\u00eda para la web de una empresa, pensemos si puede usarse en sus comunicaciones offline para mantener una misma l\u00ednea visual. O, al menos, si existen fuentes alternativas para el material impreso que mantengan la identidad corporativa.<\/li>\n<li style=\"text-align: justify;\">Comprobar la <strong>licencia de la fuente<\/strong>: atenci\u00f3n, no todas las webfont son de uso libre, algunas requieren de un permiso expl\u00edcito del autor o son de pago. Cualquier fuente puede convertirse en una webfont con sitios como Fontsquirrel pero es fundamental asegurarse de sus condiciones de uso antes.<\/li>\n<\/ul>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Extra_una_mirada_al_futuro\"><\/span>Extra: una mirada al futuro<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">Las web fonts son ya la pen\u00faltima revoluci\u00f3n en dise\u00f1o web. Lo que est\u00e1 por venir son las <strong>Variable Fonts<\/strong>, un concepto desarrollado en conjunto nada menos que por Microsoft, Google, Apple y Adobe. Una fuente variable incluye en un \u00fanico archivo todos los pesos y variantes. Esto no es demasiado novedoso pero este archivo alberga una verdadera revoluci\u00f3n en su interior. Al trabajar con una fuente variable el dise\u00f1ador podr\u00e1 establecer una serie de condiciones que transformar\u00e1n diferentes aspectos de la <a href=\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/el-libro-de-tipos-formales-gratis-en-pdf\/\" target=\"_blank\" rel=\"noopener noreferrer\">tipograf\u00eda<\/a>.<\/p>\n<p style=\"text-align: justify;\">No s\u00f3lo se trata de modificar el cuerpo de texto para diferentes dispositivos. Una fuente variable puede, por ejemplo, variar el grosor del trazo a medida que disminuye el tama\u00f1o, variar el contraste en funci\u00f3n de la luz ambiente, modificar su color seg\u00fan el fondo, variar la compresi\u00f3n, el peso, el kerning y, en definitiva, cualquier <strong>aspecto de su apariencia<\/strong> seg\u00fan los deseos del dise\u00f1ador. Aunque a\u00fan no est\u00e1n del todo desarrolladas y hay varias inc\u00f3gnitas a su alrededor, la llegada de las fuentes variables augura una nueva concepci\u00f3n de la tipograf\u00eda.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La elecci\u00f3n de la tipograf\u00eda es muy importante. Descubre la que se llaman web fonts<\/p>\n","protected":false},"author":89299,"featured_media":2390,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"class_list":["post-1763","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-grafico"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Web Fonts. \u00bfQu\u00e9 son las Google Fonts y c\u00f3mo se usan?<\/title>\n<meta name=\"description\" content=\"Las tipograf\u00edas cl\u00e1sicas o predefinidas en nuestros equipos ya se han quedado obsoletas. Surgen entonces lo que se denomina Web Fonts\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Fonts. \u00bfQu\u00e9 son las Google Fonts y c\u00f3mo se usan?\" \/>\n<meta property=\"og:description\" content=\"Las tipograf\u00edas cl\u00e1sicas o predefinidas en nuestros equipos ya se han quedado obsoletas. Surgen entonces lo que se denomina Web Fonts\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts\" \/>\n<meta property=\"og:site_name\" content=\"Canal Dise\u00f1o y Arquitectura\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/InesemBusinessSchool\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-09T11:22:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-12-24T12:53:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1620\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sara Navarro\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@inesem\" \/>\n<meta name=\"twitter:site\" content=\"@inesem\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sara Navarro\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts\"},\"author\":{\"name\":\"Sara Navarro\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#\/schema\/person\/f0bb1e82318c8fddea414aa8a4c16207\"},\"headline\":\"Web Fonts. La revoluci\u00f3n de las tipograf\u00edas predefinidas\",\"datePublished\":\"2017-10-09T11:22:53+00:00\",\"dateModified\":\"2019-12-24T12:53:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts\"},\"wordCount\":1105,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts.jpg\",\"keywords\":[\"tipograf\u00eda\"],\"articleSection\":[\"Dise\u00f1o Gr\u00e1fico\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts\",\"name\":\"Web Fonts. \u00bfQu\u00e9 son las Google Fonts y c\u00f3mo se usan?\",\"isPartOf\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts.jpg\",\"datePublished\":\"2017-10-09T11:22:53+00:00\",\"dateModified\":\"2019-12-24T12:53:38+00:00\",\"description\":\"Las tipograf\u00edas cl\u00e1sicas o predefinidas en nuestros equipos ya se han quedado obsoletas. Surgen entonces lo que se denomina Web Fonts\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts#primaryimage\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts.jpg\",\"contentUrl\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts.jpg\",\"width\":\"1620\",\"height\":\"1080\",\"caption\":\"novedad web fonts\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dise\u00f1o Gr\u00e1fico\",\"item\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/categorias\/diseno-grafico\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Web Fonts. La revoluci\u00f3n de las tipograf\u00edas predefinidas\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#website\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/\",\"name\":\"Canal Dise\u00f1o y Arquitectura\",\"description\":\"En los art\u00edculos de Dise\u00f1o y Arquitectura de Revista Digital INESEM encontrar\u00e1s informaci\u00f3n actualizada e innovadora sobre tu sector. Nuestros art\u00edculos est\u00e1n elaborados y contrastados por profesionales de diferentes especialidades del sector. Si est\u00e1s buscando informaci\u00f3n sobre Arquitectura y Edificaci\u00f3n, Decoraci\u00f3n e Interiorismo, Dise\u00f1o Gr\u00e1fico, Dise\u00f1o Web o Edici\u00f3n y Posproducci\u00f3n Digital, est\u00e1s en el sitio indicado.\",\"publisher\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#organization\",\"name\":\"Canal Dise\u00f1o y Arquitectura\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#\/schema\/logo\/image\/\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Canal Dise\u00f1o y Arquitectura\"},\"image\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/InesemBusinessSchool\/\",\"https:\/\/x.com\/inesem\",\"http:\/\/www.linkedin.com\/company\/2370697\",\"https:\/\/www.youtube.com\/user\/inesembusinesschool\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#\/schema\/person\/f0bb1e82318c8fddea414aa8a4c16207\",\"name\":\"Sara Navarro\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/wp-content\/uploads\/2017\/01\/Sara-Navarro_avatar_1484042304-96x96.jpg\",\"contentUrl\":\"https:\/\/www.inesem.es\/revistadigital\/wp-content\/uploads\/2017\/01\/Sara-Navarro_avatar_1484042304-96x96.jpg\",\"caption\":\"Sara Navarro\"},\"description\":\"EDUCACI\u00d3N: \u2022 M\u00e1ster en Dise\u00f1o Web en la Escuela Estaci\u00f3n Dise\u00f1o. \u2022 M\u00e1ster en Dise\u00f1o de Publicaciones Impresas y Digitales en la Escuela Estaci\u00f3n Dise\u00f1o. \u2022 M\u00e1ster Superior de Dise\u00f1o Gr\u00e1fico en INESEM Business School. \u2022 Licenciada en Periodismo y Comunicaci\u00f3n Audiovisual en la Universidad Carlos III de Madrid. \u2022 Curso La web 2.0 y el auge del Social Media en la Universidad Carlos III de Madrid. \u2022 Curso de Fotograf\u00eda en Movimiento en la Universidad Carlos III de Madrid. \u2022 Curso Comunicaci\u00f3n y Dise\u00f1o en la Empresa en la Escuela de J\u00f3venes Emprendedores de Cantabria. EXPERIENCIA: \u2022 Dise\u00f1adora gr\u00e1fica de INESEM Business School. \u2022 Dise\u00f1adora de la revista AOSMA- Asociaci\u00f3n de Orientadores de M\u00e1laga. \u2022 Responsable de comunicaci\u00f3n corporativa y marketing. \u2022 Redactora de actualidad y de cultura. \u2022 T\u00e9cnico de comunicaci\u00f3n en publicidad. ESCRIBE SOBRE:Dise\u00f1o gr\u00e1fico \u2022 Publicaciones \u2022 Usabilidad \u2022 Web \u2022 Editorial \u2022 Tipograf\u00eda Licenciada en Periodismo y Comunicaci\u00f3n Audiovisual, apasionada por el qu\u00e9 y el c\u00f3mo se escribe. Actualmente se ocupa de la l\u00ednea gr\u00e1fica de INESEM Business School\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/autores\/saranavarro\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web Fonts. \u00bfQu\u00e9 son las Google Fonts y c\u00f3mo se usan?","description":"Las tipograf\u00edas cl\u00e1sicas o predefinidas en nuestros equipos ya se han quedado obsoletas. Surgen entonces lo que se denomina Web Fonts","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:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts","og_locale":"es_ES","og_type":"article","og_title":"Web Fonts. \u00bfQu\u00e9 son las Google Fonts y c\u00f3mo se usan?","og_description":"Las tipograf\u00edas cl\u00e1sicas o predefinidas en nuestros equipos ya se han quedado obsoletas. Surgen entonces lo que se denomina Web Fonts","og_url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts","og_site_name":"Canal Dise\u00f1o y Arquitectura","article_publisher":"https:\/\/www.facebook.com\/InesemBusinessSchool\/","article_published_time":"2017-10-09T11:22:53+00:00","article_modified_time":"2019-12-24T12:53:38+00:00","og_image":[{"width":1620,"height":1080,"url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts.jpg","type":"image\/jpeg"}],"author":"Sara Navarro","twitter_card":"summary_large_image","twitter_creator":"@inesem","twitter_site":"@inesem","twitter_misc":{"Escrito por":"Sara Navarro","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts#article","isPartOf":{"@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts"},"author":{"name":"Sara Navarro","@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#\/schema\/person\/f0bb1e82318c8fddea414aa8a4c16207"},"headline":"Web Fonts. La revoluci\u00f3n de las tipograf\u00edas predefinidas","datePublished":"2017-10-09T11:22:53+00:00","dateModified":"2019-12-24T12:53:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts"},"wordCount":1105,"commentCount":4,"publisher":{"@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#organization"},"image":{"@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts#primaryimage"},"thumbnailUrl":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts.jpg","keywords":["tipograf\u00eda"],"articleSection":["Dise\u00f1o Gr\u00e1fico"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts","name":"Web Fonts. \u00bfQu\u00e9 son las Google Fonts y c\u00f3mo se usan?","isPartOf":{"@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts#primaryimage"},"image":{"@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts#primaryimage"},"thumbnailUrl":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts.jpg","datePublished":"2017-10-09T11:22:53+00:00","dateModified":"2019-12-24T12:53:38+00:00","description":"Las tipograf\u00edas cl\u00e1sicas o predefinidas en nuestros equipos ya se han quedado obsoletas. Surgen entonces lo que se denomina Web Fonts","breadcrumb":{"@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts#primaryimage","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts.jpg","contentUrl":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts.jpg","width":"1620","height":"1080","caption":"novedad web fonts"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/web-fonts#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/"},{"@type":"ListItem","position":2,"name":"Dise\u00f1o Gr\u00e1fico","item":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/categorias\/diseno-grafico"},{"@type":"ListItem","position":3,"name":"Web Fonts. La revoluci\u00f3n de las tipograf\u00edas predefinidas"}]},{"@type":"WebSite","@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#website","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/","name":"Canal Dise\u00f1o y Arquitectura","description":"En los art\u00edculos de Dise\u00f1o y Arquitectura de Revista Digital INESEM encontrar\u00e1s informaci\u00f3n actualizada e innovadora sobre tu sector. Nuestros art\u00edculos est\u00e1n elaborados y contrastados por profesionales de diferentes especialidades del sector. Si est\u00e1s buscando informaci\u00f3n sobre Arquitectura y Edificaci\u00f3n, Decoraci\u00f3n e Interiorismo, Dise\u00f1o Gr\u00e1fico, Dise\u00f1o Web o Edici\u00f3n y Posproducci\u00f3n Digital, est\u00e1s en el sitio indicado.","publisher":{"@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#organization","name":"Canal Dise\u00f1o y Arquitectura","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Canal Dise\u00f1o y Arquitectura"},"image":{"@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/InesemBusinessSchool\/","https:\/\/x.com\/inesem","http:\/\/www.linkedin.com\/company\/2370697","https:\/\/www.youtube.com\/user\/inesembusinesschool\/"]},{"@type":"Person","@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#\/schema\/person\/f0bb1e82318c8fddea414aa8a4c16207","name":"Sara Navarro","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/#\/schema\/person\/image\/","url":"https:\/\/www.inesem.es\/revistadigital\/wp-content\/uploads\/2017\/01\/Sara-Navarro_avatar_1484042304-96x96.jpg","contentUrl":"https:\/\/www.inesem.es\/revistadigital\/wp-content\/uploads\/2017\/01\/Sara-Navarro_avatar_1484042304-96x96.jpg","caption":"Sara Navarro"},"description":"EDUCACI\u00d3N: \u2022 M\u00e1ster en Dise\u00f1o Web en la Escuela Estaci\u00f3n Dise\u00f1o. \u2022 M\u00e1ster en Dise\u00f1o de Publicaciones Impresas y Digitales en la Escuela Estaci\u00f3n Dise\u00f1o. \u2022 M\u00e1ster Superior de Dise\u00f1o Gr\u00e1fico en INESEM Business School. \u2022 Licenciada en Periodismo y Comunicaci\u00f3n Audiovisual en la Universidad Carlos III de Madrid. \u2022 Curso La web 2.0 y el auge del Social Media en la Universidad Carlos III de Madrid. \u2022 Curso de Fotograf\u00eda en Movimiento en la Universidad Carlos III de Madrid. \u2022 Curso Comunicaci\u00f3n y Dise\u00f1o en la Empresa en la Escuela de J\u00f3venes Emprendedores de Cantabria. EXPERIENCIA: \u2022 Dise\u00f1adora gr\u00e1fica de INESEM Business School. \u2022 Dise\u00f1adora de la revista AOSMA- Asociaci\u00f3n de Orientadores de M\u00e1laga. \u2022 Responsable de comunicaci\u00f3n corporativa y marketing. \u2022 Redactora de actualidad y de cultura. \u2022 T\u00e9cnico de comunicaci\u00f3n en publicidad. ESCRIBE SOBRE:Dise\u00f1o gr\u00e1fico \u2022 Publicaciones \u2022 Usabilidad \u2022 Web \u2022 Editorial \u2022 Tipograf\u00eda Licenciada en Periodismo y Comunicaci\u00f3n Audiovisual, apasionada por el qu\u00e9 y el c\u00f3mo se escribe. Actualmente se ocupa de la l\u00ednea gr\u00e1fica de INESEM Business School","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/autores\/saranavarro"}]}},"autor_name":{"name":"Sara Navarro"},"featured_image":{"attachment_meta":{"width":"1620","height":"1080","file":"2017\/10\/web-fonts.jpg","sizes":{"thumbnail":{"file":"web-fonts-345x180.jpg","width":"345","height":"180","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts-345x180.jpg"},"medium":{"file":"web-fonts-300x200.jpg","width":"300","height":"200","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts-300x200.jpg"},"medium_large":{"file":"web-fonts-768x512.jpg","width":"768","height":"512","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts-768x512.jpg"},"large":{"file":"web-fonts-1020x680.jpg","width":"1020","height":"680","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts-1020x680.jpg"},"wysija-newsletters-max":{"file":"web-fonts-600x400.jpg","width":"600","height":"400","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts-600x400.jpg"},"thumb-small":{"file":"web-fonts-59x42.jpg","width":"59","height":"42","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts-59x42.jpg"},"thumb-standard":{"file":"web-fonts-110x110.jpg","width":"110","height":"110","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts-110x110.jpg"},"thumb-medium":{"file":"web-fonts-196x166.jpg","width":"196","height":"166","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts-196x166.jpg"},"thumb-large":{"file":"web-fonts-283x190.jpg","width":"283","height":"190","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts-283x190.jpg"},"thumb-anteriores":{"file":"web-fonts-230x163.jpg","width":"230","height":"163","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts-230x163.jpg"},"thumb-inverso":{"file":"web-fonts-369x261.jpg","width":"369","height":"261","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts-369x261.jpg"},"thumb-cercano":{"file":"web-fonts-650x200.jpg","width":"650","height":"200","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts-650x200.jpg"},"thumb-slider":{"file":"web-fonts-574x430.jpg","width":"574","height":"430","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts-574x430.jpg"},"thumb-busqueda":{"file":"web-fonts-580x375.jpg","width":"580","height":"375","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts-580x375.jpg"},"thumb-formacion-continua":{"file":"web-fonts-440x336.jpg","width":"440","height":"336","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts-440x336.jpg"},"advps-thumb-one":{"file":"web-fonts-600x220.jpg","width":"600","height":"220","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/files\/2017\/10\/web-fonts-600x220.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}}},"_links":{"self":[{"href":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/wp-json\/wp\/v2\/posts\/1763"}],"collection":[{"href":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/wp-json\/wp\/v2\/users\/89299"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/wp-json\/wp\/v2\/comments?post=1763"}],"version-history":[{"count":0,"href":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/wp-json\/wp\/v2\/posts\/1763\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/wp-json\/wp\/v2\/media\/2390"}],"wp:attachment":[{"href":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/wp-json\/wp\/v2\/media?parent=1763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/wp-json\/wp\/v2\/categories?post=1763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}