{"id":262,"date":"2012-07-23T22:11:55","date_gmt":"2012-07-23T20:11:55","guid":{"rendered":"http:\/\/www.avispaverde.es\/?p=262"},"modified":"2012-07-23T22:11:55","modified_gmt":"2012-07-23T20:11:55","slug":"decora-tu-web-con-tipografias-personalizadas-gracias-a-google-fonts","status":"publish","type":"post","link":"http:\/\/pablodelcerro.es\/blog\/2012\/07\/23\/decora-tu-web-con-tipografias-personalizadas-gracias-a-google-fonts\/","title":{"rendered":"Decora tu web con tipograf\u00edas personalizadas gracias a Google fonts"},"content":{"rendered":"

\"Google<\/a>Como el t\u00edtulo indica, dedico la entrada al maravilloso servicio Google Web Fonts<\/a> del monopolista gigante empresarial Google, otro m\u00e1s de los que ofrece de manera libre y gratuita, gracias al cual podremos elegir una tipograf\u00eda<\/strong> (\u00abfuente\u00bb para los amigos y amigas de Microsoft) dentro de su muy amplio abanico de posibilidades, para despu\u00e9s utilizarla en nuestra p\u00e1gina web sin necesidad de recurrir a \u00abtrucos CSS\u00bb ni alojando la tipo en nuestro servidor<\/strong>.<\/p>\n

Para elegir seleccionamos la familia tipogr\u00e1fica, introducimos un texto modelo para visualizar el resultado y vamos escarbando en el listado. La aplicaci\u00f3n nos permite trastear con determinados estilos, ver si dispone de tildes o ver c\u00f3mo resultar\u00eda en un p\u00e1rrafo de texto corrido, incluso podremos seleccionar varias para comparar su uso.<\/p>\n

\u00bfC\u00f3mo incluyo las tipograf\u00edas en mi web?<\/h2>\n

\"GooglePara poder utilizar las fuentes a penas hacen falta unas nociones muy b\u00e1sicas de web. Cuando hemos seleccionado la o las tipograf\u00edas que nos gusten, nos dar\u00e1 tres opciones:<\/p>\n

    \n
  1. una simple l\u00ednea de HTML<\/strong> con la etiqueta LINK para incluir en el HEAD<\/li>\n
  2. un @import<\/strong> para incluir en nuestra hoja de estilos CSS<\/li>\n
  3. un c\u00f3digo JavaScript<\/strong> (viene con las etiquetas <script> para meter en el HEAD, pero puede apartarse a un .JS)<\/li>\n<\/ol>\n

    Mi consejo es utilizar la primera opci\u00f3n<\/strong> y no complicarnos la vida.<\/p>\n

    Como nuestra web ya tendr\u00e1 localizado el elemento correspondiente a nuestra tipo de Google APIs, solo nos quedar\u00e1 asignar el estilo correspondiente a aquellos elementos que deseamos que aparezcan con la tipograf\u00eda pertinente. Por ejemplo, si queremos que los t\u00edtulos H1 tenga nuestra tipo escribiremos lo siguiente en nuestro CSS:<\/p>\n

    h1 {font-family: 'nuestratipo', sans-serif;}<\/pre>\n
    Este c\u00f3digo tambi\u00e9n nos lo facilitar\u00e1 Google, despu\u00e9s lo aplicaremos al gusto.<\/p>\n
    Ventajas<\/h2>\n
    \"page<\/p>\n
      \n
    1. Primero y ante la principal desventaja, que es lo que pueda tardar en cargar desde Google APIs mientras se carga nuestra web, la propia aplicaci\u00f3n incluye un peque\u00f1o reloj que nos indica la repercusi\u00f3n que tendr\u00e1 en la velocidad de carga<\/li>\n
    2. Ahorraremos dolores de cabeza a la hora de incluir tipograf\u00edas completas, antes era m\u00e1s ca\u00f3tico<\/li>\n
    3. Es m\u00e1s c\u00f3modo para el cross-browser, solo deja de funcionar en navegadores desactualizados<\/li>\n
    4. Evitaremos convertir textos en im\u00e1genes para subir t\u00edtulos, mejorando la velocidad de carga, el SEO y ahorr\u00e1ndonos esfuerzo<\/li>\n
    5. No ocupa espacio adicional en nuestro servidor (y el de Google no se cae (o s\u00ed, pero menos que el nuestro) y tiene un ancho de banda buen\u00edsimo)<\/li>\n
    6. La exclusividad que supone tener elementos poco convencionales en nuestro espacio web<\/li>\n<\/ol>\n
      Estamos en Julio de 2012, seguro que el servicio sigue madurando (y como nos descuidemos lo integran en Google+), as\u00ed que como \u00faltima ventaja a\u00f1adir que est\u00e1 en continuo desarrollo, cada vez hay m\u00e1s tipograf\u00edas y mejor experiencia de usuario.<\/p>\n","protected":false},"excerpt":{"rendered":"
      Como el t\u00edtulo indica, dedico la entrada al maravilloso servicio Google Web Fonts del monopolista gigante empresarial Google, otro m\u00e1s de los que ofrece de manera libre y gratuita, gracias al cual podremos elegir una tipograf\u00eda (\u00abfuente\u00bb para los amigos y amigas de Microsoft) dentro de su muy amplio abanico de posibilidades, para despu\u00e9s utilizarla … Seguir leyendo Decora tu web con tipograf\u00edas personalizadas gracias a Google fonts<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,3,14],"tags":[46,75,76,78,79,81,85,92,93,94,95,96,97,107,154,155,156,157,158,168],"_links":{"self":[{"href":"http:\/\/pablodelcerro.es\/blog\/wp-json\/wp\/v2\/posts\/262"}],"collection":[{"href":"http:\/\/pablodelcerro.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/pablodelcerro.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/pablodelcerro.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/pablodelcerro.es\/blog\/wp-json\/wp\/v2\/comments?post=262"}],"version-history":[{"count":0,"href":"http:\/\/pablodelcerro.es\/blog\/wp-json\/wp\/v2\/posts\/262\/revisions"}],"wp:attachment":[{"href":"http:\/\/pablodelcerro.es\/blog\/wp-json\/wp\/v2\/media?parent=262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/pablodelcerro.es\/blog\/wp-json\/wp\/v2\/categories?post=262"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/pablodelcerro.es\/blog\/wp-json\/wp\/v2\/tags?post=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}