Em alguns projetos que uso Elementor e preciso de fonts personalizadas, eu prefiro adicioná-las diretamente no arquivo CSS do meu tema ao invés de usar o recurso Custom Fonts do Elementor. Faço isso porque já vivi a experiência de ter que alterar a font de um projeto depois de ter montado várias páginas no Elementor e ter que abrir modelo por modelo, clicar no elemento e mudar a font.
Para resolver isso, eu adiciono a font no meu arquivo css e preciso disponibilizar essa font no select de Custom Fonts do Elementor. Vamos aos códigos que você vai colocar no functions.php do seu tema:
Primeiro
Você precisa criar um grupo de fontes que vai aparecer no select do elementor:
|
1 2 3 4 5 6 7 8 |
//CUSTOM FONT ELEMENTOR HOOK /** * Add Font Group */ add_filter( 'elementor/fonts/groups', function( $font_groups ) { $font_groups['slug_do_grupo'] = __( 'NOME DO GRUPO' ); return $font_groups; } ); |
Segundo
Agora você pode colocar as fontes do seu tema dentro desse grupo.
|
1 2 3 4 5 6 7 |
add_filter( 'elementor/fonts/additional_fonts', function( $additional_fonts ) { // Key/value //Font name/font group $additional_fonts['Primary'] = 'slug_do_grupo'; $additional_fonts['Secondary'] = 'slug_do_grupo'; return $additional_fonts; } ); |
Terceiro – Seu style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@font-face { font-family: 'Primary'; font-display: swap; src: url('../fonts/GothamBold.woff2') format('woff2'), url('../fonts/GothamBold.woff') format('woff'), url('../fonts/GothamBold.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Secundary'; font-display: swap; src: url('../fonts/GothamLight.woff2') format('woff2'), url('../fonts/GothamLight.woff') format('woff'), url('../fonts/GothamLight.ttf') format('truetype'); font-weight: 300; font-style: normal; } |
Pronto! Agora no Elementor, no campo de fonts de qualquer widget você vai ver o grupo que você criou e as fontes.
Se um dia o cliente precisar mudar as fontes, você pode apenas ir no CSS e mudar os arquivos tff, woff, woff2, etc.
