Uno de los problemas con los que han lidiado los dise\u00f1adores web desde siempre, es el limite de \u00a0fuentes \u00a0 para implementar en el dise\u00f1o de un sitio.<\/p>\n
Es decir , que no pod\u00edamos utilizar fuentes extravagantes o fuera de lo com\u00fan \u00a0 ya que si el usuario no las tenia instaladas en el equipo \u00a0estas no se mostraban \u00a0por lo que casi siempre termin\u00e1bamos usando fuentes est\u00e1ndar por ejemplo: Arial , Verdana , Helvetica entre otras \u00a0 debido a que estas se encuentran instaladas por defecto en la mayor\u00eda de sistemas operativos.<\/p>\n
Para resolver este problema han surgido muchas herramientas y t\u00e9cnicas como \u00a0por ejemplo : embeber la fuente en un archivos swf como lo hacia siFR , o utilizar \u00a0 SVG mediante Javascript \u00a0con la herramienta \u00a0Cufon , o generar una imagen a partir de el texto con \u00a0PHP y la libreria GD , \u00a0o \u00a0por ejemplo una de las t\u00e9cnicas \u00a0mas usadas \u00a0era \u00a0reemplazar el texto por una imagen png o gif \u00a0transparente, \u00a0esta ultima nada recomendable para el posicionamiento en buscadores.<\/p>\n
Hoy en d\u00eda con las nuevas versiones de navegadores y el soporte a \u00a0@font-face \u00a0tenemos la libertad de utilizar fuentes que no se encuentren \u00a0instaladas en el sistema del usuario de una manera f\u00e1cil \u00a0sin utilizar scripts raros o t\u00e9cnicas engorrosas \u00a0y todo con el poder de CSS3 :<\/p>\n
Lo \u00fanico que tenemos que hacer , subir \u00a0la fuente con el formato correcto al \u00a0servidor \u00a0y enlazarla desde \u00a0la propiedad @font-face dentro de nuestro archivo CSS.<\/p>\n
@font-face {\r\nfont-family: \"Aller\";\r\nsrc: url(<a href=\"http:\/\/www.tudomino.com\/fonts\/aller.ttf\" title=\"http:\/\/www.tudomino.com\/fonts\/aller.ttf\">http:\/\/www.tudomino.com\/fonts\/aller.ttf<\/a>) format(\"truetype\");\r\n}\r\nh1 { font-family: \"Aller\", sans-serif }<\/pre>\nPero esto tiene un problema y sigue siendo la compatibilidad , ya que mientras en un navegador puedes usar formatos de fuentes TrueTypeFont \u00a0(TTF) , en otro tienes que usar OpenType (OTF) \u00a0e incluso en otros como Safari en IPhone usar el formato \u00a0SVG \u00a0, asi que debes conocer que formato corresponde a cada navegador para que la fuente se muestre correctamente .<\/p>\n
Aqu\u00ed una peque\u00f1a lista de los formatos soportados :<\/p>\n
Tip : En este enlace puedes ver una tabla mas amplia respecto a los formatos web : webfonts.info<\/strong><\/p>\n <\/strong>Una soluci\u00f3n seria enlazar todos los formatos de fuentes dentro de el archivo CSS por ejemplo :<\/p>\n<\/div>\n El problema surge cuando una fuente solo se encuentra en un solo formato , por ejemplo .eot o .ttf \u00a0por lo que tenemos que cambiar la fuente al formato que deseemos utilizar.<\/p>\n Existen herramientas que ayudan a convertir fuentes por ejemplo de .ttf a .eot como esta WEFT \u00a0proporcionada por Microsoft o el sitio web FontSquirrel que nos brinda una herramienta en linea para poder cambiar el formato de fuentes y donde ademas podras descargar kits de fuentes completos listos para utilizar en nuestros dise\u00f1os.<\/p>\n Tambi\u00e9n cabe aclarar que las licencias de algunas fuentes restringen su uso , \u00a0si no has pagado \u00a0por ellas , pero no te preocupes existe una gran cantidad de fuentes gratuitas unas mejor que las de paga.<\/p>\n El tema de @font-face es un poco extenso y en el siguiente articulo veremos diferentes \u00a0t\u00e9cnicas que nos ayudaran a utilizar esta maravillosa propiedad de CSS.<\/p>\n","protected":false},"excerpt":{"rendered":" Uno de los problemas con los que han lidiado los dise\u00f1adores web desde siempre, es…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[9],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/15"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":5,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/15\/revisions"}],"predecessor-version":[{"id":18,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/15\/revisions\/18"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=15"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=15"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}@font-face {\r\nfont-family: 'Aller';\r\n src: url('http:\/\/www.tudomino.com\/fonts\/aller.eot');\r\n src: url('http:\/\/www.tudomino.com\/fonts\/aller.eot?#iefix') format('embedded-opentype'),\r\n url('http:\/\/www.tudomino.com\/fonts\/aller.woff') format('woff'),\r\n url('http:\/\/www.tudomino.com\/fonts\/aller.ttf') format('truetype'),\r\n url('http:\/\/www.tudomino.com\/fonts\/aller') format('svg');\r\n}\r\nh1 { font-family: \"Aller\", sans-serif }<\/pre>\n