The Typography
Demo – Documentation – GitHub
Add Typography to your Gutenberg site using Google Fonts. Enter CSS selectors or select Blocks to apply custom typography.
Typography style
Available typography options include:
- Familia de fuente y variantes de Google Fonts
- Color (hex o rgba)
- Tamaño de fuente
- Alto de línea
- Peso de fuente
- Estilo de fuente (italic, normal, oblique)
- Espaciado de letras
- Transformación de texto (capitalize, uppercase, lowercase)
- Decoración de texto (line-through, overline, underline)
Typography context
Las tipografías pueden asignarse a un contexto específico:
- Todo el sitio
- Tipo/s de contenido (tipos de contenido disponibles en el sitio)
- Plantilla de tipos de contenido (index, single)
- Página de inicio
- Página 404
Typography selectors
Cada tipografía puede tener varios grupos de selectores con modificaciones particulares a partir de la tipografía base. Por ejemplo: una tipografía se puede establecer con una determinada fuente, un determinado color y un determinado tamaño de fuente; cada uno de sus grupos de selectores heredan esas propiedades y uno de ellos podría modificar el color heredado y otro modificar el tamaño de fuente heredado.
Available CSS selectors include:
- Selector CSS de texto (por ejemplo: .site-title a)
- Selector de bloque (por ejemplo: Bloque de cita > Cita)
Uso
The plugin can be accesed from the Customizer inside the tab The Typography. It can also be accesed from any Block editor’s The Typography sidebar (top right corner of the editor). Create a typography and assign it some options; create a group of selectors and inside it create some CSS or Block selectors. That’s it! If you want to preview the different fonts before selecting one you can preview them in the Google Fonts repository. Note: The typography editing is assigned to the ‘edit_theme_options’ capability. This means that, by default, only admin and super admin will be able to use the features.