Tutoriales gratuitos para el aprendizaje de la programacion informatica! Recuerda que si lo puedes imaginar... lo puedes programar!

Insertar Fuentes Gratuitas (No Google)

 Crear una carpeta llamada fonts dentro de tu proyecto:




Seleccionar la fuente deseada y descargar el archivo 


Descomprimir el archivo de tu fuente descargada

Para el siguiente paso se transformara la fuente descargada en archivos WOFF y WOFF2 
(we open file format), para ello ir a https://www.fontsquirrel.com/ 

Hacer clic en Generator


Subir el archivo de tus fuentes descargadas anteriormente haciendo clic en Upload Fonts


Clic en Expert... y verificar que esten tildadas las opciones de WOFF y WOFF2


Por ultimo tildar la opcion  Agreement y hacer clic en Download your kit


Esperar a que se descargue el archivo comprimido y descomprimir, para copiar los archivos 
WOFF y WOFF2 para luego pegarlos en la carpeta fonts previamente creada en tu proyecto


    
Y ya finanlizando insertar en tu css la fuente descargada y transformada:

HTML:

<p>Hola Mundo!</p>

CSS:

@font-face {
    font-family: 'game';
    src: url('../fonts/awesome_possum_shine_demo-webfont.woff2') format('woff2'),
    url('../fonts/awesome_possum_shine_demo-webfont.woff') format('woff');
    }

body{
    font-size: 30px;
    font-family: 'game';
    }

Resultado:


No hay comentarios:

Publicar un comentario