Cómo crear tu propia fuente para Windows. Cómo crear tu propia fuente manuscrita. FontCreator en ruso: creación de fuentes
Hola a todos.
No hace mucho, para poder ser admitidos a los exámenes, nos topamos con un problema: todos los que habían faltado a clases tenían que presentar ensayos escritos a mano. Para 1-2 pases 1 ensayo, 2-5 pases 2 ensayos, y así sucesivamente. Cada resumen tiene al menos 10 hojas. Encontrar un resumen sobre un tema en Internet no es difícil, pero ¿cómo se puede transferir todo al papel con el menor esfuerzo?Se encontraron muchas fuentes manuscritas rusas en Internet (enlace). Pero, después de descargar varias copias de estas fuentes, quedó claro que nadie creería en la autenticidad de lo escrito, y no se podía pasar una simple prueba del profesor cuando te pedía que escribieras algo con la misma letra.Por eso se decidió haz tu propia fuente manuscrita. Pero cómo hacer una fuente con tu letra¿Para que nadie pudiera distinguirlo y pudieras demostrar tranquilamente que fuiste tú quien escribió?
Se ha encontrado la solución: el maravilloso programa High-Logic FontCreator Professional 9
fuente de escritura a mano
Instalamos Font Creator, creo que no debería haber problemas con esto.
- En una hoja de papel blanca y limpia escribimos todos los números, letras del alfabeto ruso e inglés, así como los especiales. símbolos.
- Escaneamos (preferiblemente) o fotografiamos el alfabeto resultante.
- En pintura, Photoshop o cualquier otro editor gráfico, abra nuestro alfabeto escaneado (fotografiado).
- Inicie el Font Creator instalado:
- Haga clic en archivo (Archivo) - nuevo (Nuevo) o Ctrl + N
- Le damos un nombre a nuestra fuente de escritura a mano ( mis-fuentes. ru ), marque Regular y No incluir contornos (para obtener un contorno en blanco de siluetas).
- Aparece una ventana con siluetas de carteles, letras inglesas y algún que otro alfabeto. Ahora agreguemos las letras del alfabeto ruso:
1. Haga clic en Insertar en la línea superior y seleccione Caracteres.
2. Aparece una tabla frente a usted con las letras y símbolos de su fuente de su escritura a mano, desplácese hasta la parte inferior de la tabla hasta las letras del alfabeto ruso.
3. Seleccione la letra "A" y haga clic en Agregar, luego seleccione "I" y también haga clic en Agregar.
4. De la misma forma, agregue las letras “Ё”, “е” y letras de otros alfabetos que necesite.
5. En el campo "Agregar estos caracteres...", cambie la coma por el guión entre $0410-$044F.6. Como resultado, en el campo Agregar estos caracteres... debería escribirse así: $0410-$044F,$0401,$0451
7. Haga clic en Aceptar.
Los símbolos rusos y todas las letras y signos que agregaste aparecen en tu plantilla.
Eliminamos todos los caracteres que no necesitamos (excepto los cuatro primeros, que son del sistema).
Si aún no lo has abierto, es hora de hacerlo.
En el editor gráfico, seleccione la primera letra y copie ( Control +C) en Font Creator, seleccione esta letra y haga clic en insertar ( Ctrl+V)
La línea más baja 1 (Win Descent) es el límite máximo para letras con cola (ts, y, shch, z, r, d) todo lo que esté debajo de esta línea no se imprimirá.
La línea 2 (Línea de base) es la línea de soporte de cada letra. Todas las letras deben ubicarse en esta línea.
Línea 3 (x-Height): altura máxima de letras minúsculas.
Línea 4 (CapHeight): la altura máxima de letras grandes, números y letras "c", "d", "b".
Línea 5 (WinAscent ) - el límite superior de caracteres, todo lo que esté por encima de esta línea no se imprimirá.
Las líneas verticales izquierda (6) y derecha (7) determinan cómo se tocarán las letras de su fuente. Si desea que las letras se toquen entre sí como en el manuscrito, mueva la letra cerca de la izquierda (6) y mueva la derecha (7) sobre la letra para que lama ligeramente más allá de la línea.
Ajustamos todas las letras a las líneas; de lo contrario, los caracteres de la fuente se ubicarán al azar y, en consecuencia, no quedará hermoso.Un ejemplo de la disposición de diferentes letras:
OK, todo ha terminado. Instala tu fuente, inicia un editor de texto, encuentra tu fuente y disfruta usándola. Cómo instalar una fuente.
Si es demasiado vago para hacer todo lo descrito anteriormente y desea obtener una fuente hecha profesionalmente con su letra, estamos esperando sus pedidos en nuestro sitio web.
Crea tu propia fuente
Hola chicos. Como prometí, te cuento cómo hacer tu propia fuente.
Diré de inmediato que no le doy un enlace para descargar el programa aquí, pero no le resultará difícil encontrarlo usted mismo. El programa se llama High-Logic Font Creator, comencé con él y es la forma más sencilla de convertir las letras que dibujas en una fuente real. Si notas algún error, por favor escribe, porque todo esto se hizo casi de forma intuitiva, y no pretendo ser una ejecución magistral en absoluto :) Y como de costumbre, al hacer clic se abrirán imágenes más grandes.
Amigos que se ocupan profesionalmente de las fuentes, no lo juren, aquí prácticamente no habrá términos ni reglas. El post está destinado a aquellos que siempre han querido crear algo como esto, pero no sabían cómo hacerlo :)
Entonces, lo primero que debemos hacer es dibujar letras, números, símbolos, es decir, todo lo que necesites. Dibujé este conjunto para stock, hoy lo convertiré en una fuente. No hay letras minúsculas pequeñas, así que dibújelas también para completar la fuente. 
Dibujo todo en Illustrator, pero tú decides. Mucha gente simplemente escribe en papel y escanea, esa también es una opción.
A continuación, debe guardar cada letra por separado. Eso es todo, ahora abre el programa.
Nuestra primera acción es bastante obvia: Archivo - Nuevo... Vemos la ventana:
En la ventana, ingrese el nombre de nuestra fuente en el campo Nombre de la familia de fuentes, seleccione Unicode, Regular, No incluir contornos. Estas son mis configuraciones :)
Haga clic en Aceptar, vemos que se ha abierto una plantilla de fuente con todas las letras, números y otros símbolos posibles.
No recuerdo cuál es la fuente predeterminada, tengo configurada la plantilla de fuente Arial. Para cambiar la fuente, agregar letras, debe ir a Insertar - Caracteres, está en el panel superior. También puedes agregar cirílico allí, pero no lo haremos por ahora.
A continuación, lo más importante es añadir nuestras letras. Busque la letra A mayúscula y haga doble clic en ella.
Vemos una ventana con un montón de celdas y rayas.
Entramos en pánico, minimizamos el programa, respiramos profundamente y volvemos. Ahora Dina te lo explicará todo.
Cada tira tiene su propio propósito, pero lo primero es lo primero. En esta ventana, haga clic derecho en cualquier lugar y haga clic en Importar imagen.
Recordamos dónde guardamos todas nuestras letras, encontramos nuestra A, la abrimos. Otra ventana:
No hay nada complicado aquí, mueva el control deslizante, haga clic en todo lo que vea, la vista previa le dirá qué configuraciones es mejor configurar. La imagen muestra la mía, puedes probar lo mismo. Haga clic en Generar. Aquí está nuestra carta:
Entonces, lo que vemos: dos franjas verticales y cinco horizontales.
La letra debe ubicarse entre dos franjas verticales, indican la distancia antes y después de la letra. No los coloques demasiado cerca o directamente sobre la letra, de lo contrario quedará un desastre.
Y ahora sobre las líneas horizontales. No te agobiaré con términos, te lo explicaré popularmente:
1. La barra superior es la distancia máxima por encima de la línea de base (4).
2. El segundo desde arriba es la altura de las letras mayúsculas.
3. El tercero es la altura de las letras minúsculas.
4. La línea base a lo largo de la cual se alinean todas las letras.
5. Distancia máxima por debajo de la línea de base (4).
Para cambiar los parámetros de las líneas horizontales, debe abrir Configuración en la pestaña Formato. Recomiendo buscar en Google los parámetros de algunas fuentes populares y usarlas como ejemplo si desea cambiar algo. Pero yo no hice nada de eso :)
Como puedes ver, aumenté la letra a la línea 2, CapHeight, solo queda ajustar las rayas verticales. Quiero que haya una distancia decente antes y después de la letra, así que alejo la letra de la línea izquierda, tomo la derecha por el triángulo negro en la parte superior y la acerco a la letra. Como esto:
Esto es exactamente lo que haré con todas mis letras mayúsculas. Si está agregando letras minúsculas, hágalas altura hasta la línea número 3.
Cuando hayamos posicionado la letra, simplemente cerramos esta ventana. Todas las letras encajarán en su lugar y esto se nota:
Tengo una letra Q con cola, no quiero que se destaque de la fila general de letras, así que la coloco en la línea base y dejo la cola debajo.
Haga lo mismo con todas las letras minúsculas (p, q, y, g, j), y algunas, por el contrario, pueden ser ligeramente más altas que la mayúscula (d, b, k, f).
No necesito números todavía, así que mi imagen se ve así:
Si no puede esperar para probar las letras en acción, vaya a Archivo - Guardar como, guarde la fuente en el formato .ttf sugerido por el programa.
Instalamos la fuente, vamos al editor de texto, buscamos nuestra fuente, la verificamos. ¡Obras!
Bueno, ahora puedes darte el gusto. Tomamos la peor foto de los fuegos artificiales del 9 de mayo, hacemos algo de magia en Photoshop, escribimos el texto y ¡listo! :)
No es tan difícil, ¿verdad? No dejes de probarlo y muéstranos los resultados :)
Para crear fuentes recomiendo usar un editor. Creador de fuentes de Alta Lógica. Diré de inmediato que el programa es pago, pero esta es la mejor opción que me llamó la atención. Si necesitas un editor de fuentes gratuito, presta atención al programa. Tipo de luz de cr8software y servicio en línea Estudio Glyphr. Me quedo con FontCreator (si no me equivoco era la versión 6.0).
Paso 1: y así, inicia el editor y usa el comando: Archivo > Nuevo(Archivo > Nuevo): crea una nueva fuente. En la ventana que se abre Nueva fuente (De inglés) Nueva fuente) , deberá especificar una serie de parámetros:
- Nombre de la familia de fuentes- nombre de la familia de fuentes, es decir solo el nombre de la fuente, algo así Times New Roman, Señalé Mi fuente.
- Conjunto de caracteres- un conjunto de caracteres incluidos en la fuente, recomiendo elegir Unicode (caracteres).
- Estilo de fuente- estilo de fuente, para cada estilo necesita crear un archivo separado. Para el estilo de fuente normal (predeterminado), seleccione la opción Regular.
- Contornos predefinidos- circuitos incorporados. Recomiendo seleccionar la opción No incluir contornos, que le permitirá crear un contorno limpio de siluetas.
Paso 2: Aparecerá una ventana frente a usted con forma de siluetas de algunos símbolos, números y letras latinas. Para agregando alfabeto cirílico a la fuente, debe hacer lo siguiente:
2.1. Usando el comando: Insertar > Caracteres… (Insertar > Símbolos...)- Abrir la ventana Insertar caracteres(De inglés) insertando caracteres).
En este caso, puede recibir el siguiente mensaje:
Esta operación no se puede deshacer. ¿Quieres continuar?
Te informa que la operación es irreversible y para completarla necesitas confirmar tu acción, presiona el botón “ Sí».
2.2. A continuación, aparecerá una tabla de símbolos frente a usted. Por conveniencia, en la lista. Fuentes seleccionar fuente arial. En la lista Ir al bloque Unicode seleccionar cirílico. Usando el campo Personaje seleccionado, mira el código de las letras “A” ($0410) e “I” ($044F). en el campo Agregue estos caracteres y/o rangos de caracteres... agregamos los caracteres necesarios y/o rango de caracteres, en nuestro caso es: $0410-$044F . Clic en el botón " DE ACUERDO».
2.3. Se agregarán símbolos de letras cirílicas a su formulario de fuente. De la misma forma, pero por separado, puedes agregar las letras “е” ($0451) y “Ё” ($0401), que no estaban incluidas en el rango de caracteres especificado en el paso anterior.
Paso 3: Ahora puedes empezar a crear símbolos. Aquí, además de la edición de vectores, utilizando las herramientas adecuadas, FontCreator le permite crear personajes a partir de imágenes convirtiéndolas en una imagen vectorial. Obviamente, para cada símbolo necesitarás hacer un dibujo separado.
3.1. Como ejemplo, dibujo una letra "A" mayúscula.
3.2. En principio, después del escaneo, este archivo de imagen se puede utilizar para importar. Para hacer esto, seleccione la imagen del símbolo deseado en el formulario. Luego usando el comando: Herramientas > Importar imagen… (Herramientas > Importar imagen)- Abrir la ventana Importar imagen rasterizada (De inglés) importar mapa de bits) .
3.3. En la ventana que se abre, haga clic en el botón Carga…» (De inglés) descargar) y seleccione el archivo de imagen que necesita.
3.4. Moviendo el control deslizante Límite (De inglés) límite) Establezca el nivel de oscurecimiento de la imagen para crear un contorno más claro. También puedes utilizar filtros:
- Filtro suave- filtro suavizante.
- Erosionar- difuminar, hace que el símbolo sea más negrita.
- Dilatar- estirar hace que la fuente sea más delgada.
Modo de importación (De inglés) modo de importación) mejor déjalo Rastro, para convertir a curvas. CON Negativo (De inglés) negativo) , Creo que todo está claro. Así que haz clic en el botón Generar».
Etapa 4: Al cambiar al modo de edición, hacer doble clic en el símbolo del formulario, todo lo que tiene que hacer es corregir las irregularidades, ajustar el tamaño y establecer la línea de sangría. Deberá hacer lo mismo con otros símbolos.
En general, el proceso de creación de una fuente no puede considerarse particularmente difícil. Esto requiere paciencia y mucho tiempo. Con el editor de fuentes FontCreator, este tiempo se puede ahorrar de muchas maneras importando y convirtiendo la imagen de un personaje en un vector. Sin embargo, incluso esta opción supone mucho trabajo. Eso es todo lo que tengo. Gracias por su atención. ¡Buena suerte!
Me parece que muchos de los apasionados por dibujar letras y crear lettering en algún momento tienen el pensamiento: ¿no deberíamos convertir toda esta belleza en una tipografía? Para que no solo puedas admirar una composición específica, sino también imprimir estas hermosas letras en un teclado real y crear aún más belleza... Bueno, al menos así fue para mí :) Cuando me di cuenta de que puedes crear una fuente usted mismo, literalmente me sucedió una revolución de conciencia (probablemente esto es exactamente lo que se llama un "momento aha" en inglés).
Y comencé a intentar descubrir cómo hacer esto. Había poca información y la que había era incomprensible y compleja. Me perdí en este denso bosque de términos y casi abandoné la idea de aprender a crear fuentes. Pero por algún milagro no me di por vencido, seguí intentándolo e hice mi primera fuente Bronks, lejos de ser ideal, pero muy valiosa en términos de experiencia. Por cierto, ya escribí sobre cómo se creó el Bronx. Y hoy quiero contarte con más detalle sobre el proceso de creación de una fuente en su conjunto, para que te resulte más fácil entender si esta es “tu” actividad y si te interesaría probarla.
LA FUENTE COMIENZA CON BREVE
DIBUJAR GLIFOS ES EL TRABAJO DEL DÍA :)
Habiendo reunido mi coraje, es decir, mi inspiración, normalmente espero hasta tener al menos medio día libre (idealmente todo el día) y me siento a dibujar glifos. Los glifos son los caracteres de una fuente, tanto letras como números, y todos esos símbolos como más, coma, signo de interrogación, etc.
La amplitud con la que dibujo una fuente (es decir, cuántos glifos creo) depende directamente del público objetivo. Está claro que cuantos más glifos, más valiosa es la fuente, pero al mismo tiempo hay glifos a los que vale la pena dedicarle tiempo, y hay otros a los que no tanto (por ejemplo, si estás creando una fuente estándar de handdrone para las pequeñas empresas, un amplio soporte lingüístico será mucho más relevante que todos, todos, todos los signos matemáticos, muchos de los cuales, para ser honesto, los vi por primera vez en el programa Glyphs :)). Hablaré en detalle sobre qué glifos se deben dibujar necesariamente, y cuáles además y en qué cantidades, en el taller sobre creación de una fuente en el que estoy trabajando duro (sobre esto al final de la nota :)).
Puedo decir brevemente que recomendaría hacer la primera fuente simple y concisa; de lo contrario, si intenta hacer inmediatamente la versión inicial y final de las letras y agrega el alfabeto cirílico al alfabeto latino, simplemente no podrá completarlo. la fuente (y si la completa, es poco probable que valga la pena, porque al escribir no puede prescindir de errores, la capacidad de ver pequeñas manchas y detalles que afectan la calidad de la fuente aparece solo con la práctica). Por lo tanto, al principio es mejor arreglárselas con un conjunto estándar de signos de puntuación básicos A-Z, a-z, 0-9.
¿Por qué dedico medio día a dibujar una fuente? Porque cuando “coges la ola”, es decir, sientes un determinado estilo, la atmósfera de la fuente, es mejor dibujar todo de una vez, mientras se desarrolla la mano. Probablemente esto se aplique más a las fuentes escritas a mano (todavía no he probado otras). Si lo dejas a un lado e intentas dibujar el resto de las letras más tarde, seguro que serán diferentes, y te llevará tiempo volver a “afinar tu mano” y empezar a caer en el estilo general.
Dibujar una fuente es el proceso más creativo de todos. Si crees ingenuamente que crear fuentes es cuestión de creatividad y una celebración de la inspiración, me apresuro a decepcionarte: la creatividad y dibujar letras ocupan como máximo el 20% (normalmente menos) del tiempo que lleva crear una fuente. El resto es tecnología: escaneo, procesamiento, alineación alfabética, ajuste, exportación a un programa, espaciado y kerning, configuración de código, pruebas y todo eso. Por lo tanto, si solo quieres dibujar letras y te resulta aburrido incluso pensar en la parte técnica, entonces es mejor crear letras.
PARTE DIGITAL DEL PROCESO
Una vez dibujada la fuente, es hora de digitalizarla. Mi cadena de procesamiento se ve así: escáner - photoshop - ilustrador. En el escáner configuro la configuración máxima, en Photoshop aumento el contraste y limpio un poco los contornos, en Illustrator hago un trazo, encuentro el alfabeto (es decir, organizo las letras en secuencia, intento "ensamblar" un unas palabras para comprobar cómo queda todo) y limpiar-limpiar- estoy limpiando las letras.
Acerca de la etapa de limpieza: solía pensar que "por qué limpiarla, es una fuente escrita a mano". Pero más tarde se reveló este detalle: cuantos más puntos haya en el vector, mayor será la probabilidad de que la fuente tenga errores en todos los sentidos, por la negativa de Glyphs (u otro programa en el que se ensamblará la fuente) a exportar el archivo. , a la imposibilidad de que los usuarios finales lo utilicen sin errores. Por lo tanto, un mínimo de puntos es la clave para la comodidad, y sí, aún es necesario limpiarlos, incluso las fuentes con textura.
Limpio letras en Illustrator de varias maneras: en primer lugar, con un borrador mágico de Astute Graphics (parte complemento pago, del que estoy hablando), lamentablemente no conozco una alternativa gratuita que tenga al menos una calidad aproximada, en segundo lugar, con un lápiz ilustrador estándar: resalto el contorno y lo hago más preciso.
Después de eso, preparo la fuente para exportar (esta es una gran historia separada, sobre la cual probablemente habrá varios videos) y transfiero las letras a Glifos.
UN BUEN PROGRAMA DE FUENTES ES IMPORTANTE
En teoría, ensamblar una fuente, es decir, convertir letras vectoriales en letras funcionales, del tipo que se puede escribir en un teclado, se puede hacer en diferentes programas. Si buscas en Google, encontrarás listas impresionantes de opciones para todos los gustos y presupuestos. No incluyo nombres aquí porque no estoy listo para recomendar algo que no sé o que nunca he probado. Trabajo en el programa Glyphs y solo sé que todos los diseñadores tipográficos serios (los que venden fuentes) las hacen en Glyphs o en Fontlab. Lo más probable es que esto se deba al hecho de que los programas más baratos o gratuitos no ofrecen todas las opciones que necesita para crear historias de fuentes interesantes.
En un momento elegí Glyphs porque quería, por un lado, acostumbrarme inmediatamente al programa de fuentes "correcto" (es decir, uno que pueda usarse para crear fuentes realmente reflexivas, complejas y ricas en elementos, y que no se quede pegado). durante un mes en alguno gratuito (para luego descubrir que allí no se pueden crear ligaduras condicionales), por otro lado, no estaba dispuesto a pagar varias veces más por Fontlab. Aparentemente, la elección fue la correcta: conozco personas que cambiaron de Fontlab a Glyphs y dicen que este último tiene una interfaz más clara :)
Un buen programa de fuentes es importante porque aquí es donde ocurre la transformación mágica de solo letras en una fuente funcional. Si el programa no le permite crear soporte de idioma, no podrá crearlo. Si no puede agregar un conjunto alternativo de letras mayúsculas, no podrá agregarlas, incluso si ya las ha dibujado.
Después de exportar a Glifos, configuré muchas cosas diferentes: grupos de letras, espaciado (espacio negativo a la izquierda y derecha de las letras, en términos generales), interletraje (distancias entre pares específicos de letras), agregar soporte de idioma, ligaduras (especiales). variantes de combinaciones de letras), opciones iniciales y finales (con largas colas de caballo, adornos florales, adornos y todo eso) y conjuntos alternativos, si se proponen. En el camino, se configura el código para que todo funcione para el usuario final como pretendía y sin problemas. Esta etapa, que describí en un par de oraciones, es en realidad lo que toma alrededor del 70% del tiempo al crear una fuente :) Y la describo brevemente no porque sea codicioso, sino porque solo con el kerning podrías escribir. una nota en tres veces más que esto, y todavía no será suficiente. En el curso sobre fuentes, me detendré en todos estos puntos con gran detalle (en este momento estoy tratando de encontrar la línea entre "no lo suficientemente detallado" y "demasiada información para digerir").
En este artículo tutorial, te diré cómo crear tu propia fuente para un sitio web usando íconos que tú mismo creaste. Todo lo que necesitamos para esto es un programa para crear gráficos vectoriales (Adobe Illustrator o Inkspcape) y acceso a Internet. Así que ¡comencemos! Puedes descargar todas las imágenes, iconos y fuentes CSS utilizadas para esto al final del artículo.
Para este tutorial haremos algo simple. Para el primer icono dibujaremos una estrella normal. Para el segundo ícono: un águila con la letra W adentro. Es bastante fácil de dibujar y puedes crear cualquier forma y combinación. Utilicé Illustrator para estos fines.
Una vez que hayas completado la parte creativa, tu creación debe guardarse en formato SVG. Haga clic en "Guardar como" y seleccione el tipo de archivo como SVG. Ahora puedes proceder directamente a crear la fuente.
Para estos fines utilizamos el popular y gratuito servicio IcoMoon.
Lo primero que debe hacer es crear un nuevo proyecto, así que haga clic en el menú en la esquina superior izquierda y haga clic en "Nuevo proyecto". A continuación, cargamos nuestros archivos svg ya preparados después de hacer clic en el botón "Importar iconos". Después de completar estos pasos, deberías ver una imagen como esta en tu monitor:
Ahora tenemos la posibilidad de cambiar el código de cada icono (en nuestro caso será e600 y e601), el nombre de nuestra fuente, el prefijo CSS, etc. Todo esto se hace en “Preferencias”. Además, podemos ver la fuente en acción haciendo clic en el enlace "Habilitar uso rápido", que nos permitirá obtener un enlace temporal a nuestra fuente, así como la opción de ver el código en CodePen.
Una vez que haya configurado todo, haga clic en el botón "Descargar" en la parte inferior de la página y descargue el archivo. En estos archivos encontrará su fuente en formatos ttf, eot, svg y woff + una página de demostración con la fuente.
Usando íconos en el sitio
Ahora, todo lo que necesitamos es incluir la fuente CSS usando @font-face y especificar otros parámetros (todos están escritos en el archivo css en el archivo que descargaste.
@font-face ( font-family: "wdm-eagle"; src: url("//yourwebsitename.com/fonts/wdm-eagle.eot"); , ( font-family: "wdm-eagle"; hablar: ninguno; estilo de fuente: normal; peso de fuente: normal; variante de fuente: normal; transformación de texto: ninguna; altura de línea: 1; /* Mejor representación de fuentes =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: escala de grises; ) .wdm-star:before ( contenido: "\e600"; ) .wdm-eagle:before ( contenido: "\e601"; )
Ahora podemos usar nuestra fuente en código HTML de esta manera:
Especificación del nombre de clase para la etiqueta obtenemos nuestro icono.
