Tutorial – Cambiar agregar tipografía manualmente

Club para webmasters Foros ChorriClub Cursos Tutoriales hechos por Chorris Tutorial – Cambiar agregar tipografía manualmente

Viendo 4 entradas - de la 1 a la 4 (de un total de 4)
  • Autor
    Entradas
  • #12105 Karma: 1
    Usuario-Chorri
    Participante
    173

    Hola que tal! Este tutorial trata de como cambiar fuentes predeterminadas al estilo de tu web. Muchas veces no se encuentran en el témplate o simplemente en Google Font no se encuentran. Cuando puede suceder esto?

    Experiencia: Una cliente quería crear su blog personalizado y me empezó a pedir fuentes muy locas. Por lo que tuve que aprender y aun así la cliente solo me señalaba que fuente quería con distintas webs de ejemplos. Ahora, como hacia para averiguar que fuente era? Empecemos el tutorial!

    TUTORIAL: Como instalar una tipografía

    PASO 1: Como saber la fuente que nos señalan en una web o queramos meter a nuestro WordPress.

    Instalamos una extensión de Chrome WhatFont.

    What Font

    What Font

    Una vez instalado activamos apretando el icono y dirigimos el puntero al texto que queremos saber que fuente es!

    What Font

    Acá vemos como nos sale el tipo de fuente en el párrafo seleccionado. En este caso la fuente es Lora! Y la pondremos como ejemplo en este tutorial. Simplemente este paso 1 es por si les piden una fuente especifica de un párrafo en una web ejemplo que les den.

    PASO 2: Buscando nuestra fuente en Google.

    Hay muchas webs que quizas nos den la posibiliad de bajar la fuente que necesitemos y gratis!. Dafont Free es una de ellas. Y generalmente dependiendo lo que quede mejor elegimos Regular. Cuestión de gustos de cada uno de sus clientes.

    Dafont Free

    PASO 3: Que hacer con nuestra fuente una vez bajada.

    En este paso nos interesa tener el archivo con extension .ttf

    Dafont Free

    Vamos a ir a Trans Fonter y ponemos Add fonts ingresando el archivo .ttf, marcamos las opciones WOFF y WOFF2. Estas extensiones es para la compatibilidad de los navegadores!

    Luego convertimos y bajamos el zip que genera.

    Nos interesan estos 3 archivos.

    PASO 4: Colocando nuestra fuente en WordPress

    En este paso instalaremos nuestra fuente para utilizarla en cualquier párrafo de nuestro template.

    En el caso que tengas FTP o acceso al hosting directamente. Agregaremos una carpeta en el lugar donde se encuentre nuestro template. Por ejemplo tenemos el template twentytwentyone(El que viene default en WordPress) Crearemos la carpeta fonts en /wp-content/themes/twentytwentyone/

    Dentro de esa carpeta vamos a colocar los 3 archivos anteriores.

    PASO 5: Avisando a WordPress que nuestra fuente se encuentra disponible!

    En este paso mediante código le diremos a WordPress que la fuente se encuentra disponible para el template twentytwentyone.

    Iremos a Apariencia/Editor de temas en nuestro panel administrativo.

    El código siguiente lo copiamos en functions.php

    
    	
    	add_action('wp_enqueue_scripts', 'fuentes');
    
    function fuentes(){
    	
    	wp_enqueue_style('fuente1', get_stylesheet_directory_uri() . '/fonts/lora/stylesheet.css');
    
    }

    Acá creamos una función en PHP indicando la ubicación de la fuente y de alguna forma estamos activándola en nuestro WordPress.

    Este código también lo podremos agregar con el plugin Code Snippets

    Mas adelante si es posible hare un tutorial de como crear un plugin simple para insertar nuestros códigos personalizados, css, js , html o php.
    No va a requerir mucho conocimiento previo.

    PASO 6: Mostrando nuestra nueva fuente en el template twentytwentyone

    Vamos a crear una clase en personalizar/Additional CSS. No vale la pena que explique para el que no conoce lo que es una clase en CSS, solo que creamos un poco mas de código
    pero esta vez en CSS.

    Ahora bien. Anteriormente teníamos estos 3 archivos. Ahora debemos abrir el stylesheet.css. Y copiamos las 3 líneas marcadas. Y las usamos para armar nuestra clase en el Additonal CSS.


    Debería quedarnos así! En esta ocasion instale 2 fuentes ya que Lora no se veia bien para este ejemplo de tutorial. Las fuentes al final que usamos fue Lora y Kiddo.
    Una vez colocadas le damos a publicar.

    Para poder ver si realmente funciona, agarramos un texto de una pagina a editar. Y a la derecha en avanzado o depende que builder estemos usando ponemos en class el nombre
    que le dimos a la función en CSS. En este caso esos nombres son lora y kiddo

    Update o Actualizar los cambios. Y veremos como se aplica en este caso la fuente Kiddo al párrafo que seleccionamos.

    En este DRIVE les dejo todo lo utilizado y además en formato html el Post por si alguien lo quiere guardar en su baúl de herramientas. Cabe destacar que existen plugins para hacer esto. Pero el que anda muy bien es de pago y solo te deja cargar 1 fuente gratis.

    • Este debate fue modificado hace 3 años, 2 meses por David Cuesta.
    • Este debate fue modificado hace 3 años, 2 meses por David Cuesta. Razón: arreglo de códigos html incorrectos (solo diseño)
    #12108 Karma: 0
    David Cuesta
    Superadministrador
    178

    Muy buen aporte!

    Añado una cosa que no he visto: Google fonts! me gusta mucho más que dafont u otras plataformas.

    Os dejo link: https://fonts.google.com/

    Un saludo!

    #12821 Karma: 0
    Elexonic
    Participante
    6

    Que bueno! Gracias por compartir @gencolate

    #12852 Karma: 0
    Manu Soporte
    Moderador
    24

    Buenos días y feliz martes! Si tienes una frutería cerca de casa, quiero que vayas y te fijes bien. Tú web tiene que ser como esa tienda, toda llena de contenido orgánico.
    Ostia que bueno y que sencillo y limpio! Mis dieses!

Viendo 4 entradas - de la 1 a la 4 (de un total de 4)
  • Debes estar registrado para responder a este debate.