{"id":123610,"date":"2025-03-03T08:20:46","date_gmt":"2025-03-03T06:20:46","guid":{"rendered":"https:\/\/elementor.com\/blog\/como-utilizar-font-face-em-css\/"},"modified":"2025-12-17T17:03:19","modified_gmt":"2025-12-17T15:03:19","slug":"como-utilizar-font-face-em-css","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/","title":{"rendered":"Como Utilizar @font-face em CSS"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

As fontes personalizadas permitem que voc\u00ea:<\/span><\/p>\n

    \n
  1. Estabele\u00e7a um tom \u00fanico:<\/b> Seja voc\u00ea buscando um estilo l\u00fadico, sofisticado, moderno ou vintage, as fontes corretas ajudam a estabelecer a personalidade distintiva do seu website.<\/span><\/li>\n
  2. Aprimore a legibilidade:<\/b> Fontes personalizadas cuidadosamente selecionadas podem melhorar a legibilidade, tornando seu conte\u00fado mais f\u00e1cil e agrad\u00e1vel de consumir.<\/span><\/li>\n
  3. Aumente o reconhecimento da marca:<\/b> Utilizar fontes personalizadas que se alinhem com a identidade da sua marca refor\u00e7a uma experi\u00eancia visual memor\u00e1vel para seus visitantes.<\/span><\/li>\n<\/ol>\n

    Felizmente, implementar fontes personalizadas em seu website \u00e9 mais f\u00e1cil do que voc\u00ea possa imaginar! Este guia explorar\u00e1 o poder da regra CSS<\/a> @font-face, capacitando-o a elevar a tipografia do seu website a um novo patamar.<\/span><\/p>\n

    Uma Observa\u00e7\u00e3o para Usu\u00e1rios do WordPress:<\/b> Se voc\u00ea est\u00e1 construindo no WordPress, ferramentas como o construtor de websites Elementor simplificam todo o processo de adi\u00e7\u00e3o e gerenciamento de fontes personalizadas. Sua interface intuitiva e integra\u00e7\u00e3o perfeita tornam o trabalho com fontes extremamente simples.<\/span><\/p>\n

    Sele\u00e7\u00e3o e Prepara\u00e7\u00e3o de Fontes<\/span><\/h2>\n

    Escolhas de Fontes: Expandindo Seus Horizontes Criativos<\/span><\/h3>\n

    Suas escolhas de fontes estabelecem a base para a linguagem visual do seu website. Dedicar tempo para descobrir as tipografias perfeitas \u00e9 um investimento crucial no sucesso do seu design. Eis onde iniciar sua aventura com fontes:<\/span><\/p>\n

    Servi\u00e7os de Fontes Populares<\/span><\/h4>\n
      \n
    1. Google Fonts:<\/b> esta<\/span> \u00e9 uma vasta biblioteca de c\u00f3digo aberto com estilos diversos. \u00c9 um excelente ponto de partida, oferecendo integra\u00e7\u00e3o r\u00e1pida e f\u00e1cil.<\/span><\/li>\n
    2. Adobe Fonts:<\/b> Este servi\u00e7o fornece fontes de alta qualidade, frequentemente com fam\u00edlias de fontes extensas (diversos pesos e estilos), especialmente se voc\u00ea j\u00e1 possui uma assinatura do Adobe Creative Cloud.<\/span><\/li>\n<\/ol>\n

      Auto-hospedagem vs. Fontes Hospedadas:<\/span><\/h4>\n
        \n
      • Auto-hospedagem:<\/b> Proporciona controle total sobre o carregamento e atualiza\u00e7\u00f5es das fontes, mas requer que voc\u00ea obtenha licen\u00e7as apropriadas e gerencie arquivos em seu servidor.<\/span><\/li>\n
      • Fontes Hospedadas:<\/b> Servi\u00e7os como o Google Fonts lidam com os detalhes t\u00e9cnicos, simplificando a implementa\u00e7\u00e3o. No entanto, voc\u00ea tem menos controle sobre atualiza\u00e7\u00f5es e disponibilidade das fontes.<\/span><\/li>\n<\/ul>\n

        A Import\u00e2ncia do Licenciamento<\/span><\/h3>\n

        Ao selecionar fontes, especialmente de recursos gratuitos, sempre preste aten\u00e7\u00e3o aos termos de licenciamento! Respeitar a propriedade intelectual garante que voc\u00ea utilize as fontes de maneira legal e \u00e9tica. Aqui est\u00e3o alguns tipos comuns de licen\u00e7a:<\/span><\/p>\n

          \n
        1. Licen\u00e7as de C\u00f3digo Aberto:<\/b> Estas geralmente permitem uso, modifica\u00e7\u00e3o e distribui\u00e7\u00e3o gratuitos (por exemplo, SIL Open Font License).<\/span><\/li>\n
        2. Licen\u00e7as Comerciais:<\/b> Estas requerem pagamento para uso, especialmente em projetos comerciais.<\/span><\/li>\n
        3. Licen\u00e7as Restritas:<\/b> Limitam o uso a projetos pessoais ou a um certo n\u00famero de visualiza\u00e7\u00f5es de p\u00e1gina.<\/span><\/li>\n<\/ol>\n

          Dica Profissional:<\/b> O Elementor Hosting simplifica o processo, oferecendo fontes totalmente licenciadas e cuidando da configura\u00e7\u00e3o t\u00e9cnica. Voc\u00ea pode se concentrar na criatividade e deixar as complexidades legais para tr\u00e1s.<\/span><\/p>\n

          Formatos de Fonte: Compreendendo a Sopa de Letras<\/span><\/h3>\n

          As fontes web v\u00eam em v\u00e1rios formatos de arquivo para garantir compatibilidade entre diferentes navegadores e sistemas operacionais. Aqui est\u00e1 uma an\u00e1lise daqueles que voc\u00ea provavelmente encontrar\u00e1:<\/span><\/p>\n

            \n
          • TTF (TrueType Font):<\/b> Um formato de fonte cl\u00e1ssico oferecendo ampla support, tornando-o uma escolha segura.<\/span><\/li>\n
          • OTF (OpenType Font):<\/b> \u00e9 um formato moderno com recursos avan\u00e7ados como ligaduras, glifos alternativos e extensa support de idiomas.<\/span><\/li>\n
          • WOFF (Web Open Font Format): <\/b>\u00e9 especificamente otimizado para entrega web, com um tamanho de arquivo menor para carregamento mais r\u00e1pido.<\/span><\/li>\n
          • WOFF2 (Web Open Font Format 2): <\/b>este \u00e9 uma melhoria em rela\u00e7\u00e3o ao WOFF com compress\u00e3o ainda melhor, resultando nos tempos de carregamento mais r\u00e1pidos.<\/span><\/li>\n
          • EOT (Embedded Open Type): <\/b>\u00e9 um formato legado usado principalmente para garantir compatibilidade com vers\u00f5es mais antigas do Internet Explorer.<\/span><\/li>\n<\/ul>\n

            Melhor Pr\u00e1tica:<\/b> Priorize o WOFF2 por sua compress\u00e3o superior, sempre com WOFF inclu\u00eddo como alternativa para maior support de navegadores.<\/span><\/p>\n

            Necessito Converter Arquivos de Fonte?<\/span><\/h4>\n

            Embora muitos servi\u00e7os de fonte forne\u00e7am arquivos de fonte web otimizados nos formatos necess\u00e1rios, \u00e9 poss\u00edvel que voc\u00ea encontre a fonte perfeita que precisa ser preparada para a web. <\/span><\/p>\n

            Nota:<\/b> Sempre verifique cuidadosamente os termos de licenciamento antes de converter fontes para garantir que a licen\u00e7a adquirida permita esse tipo de modifica\u00e7\u00e3o.<\/span><\/p>\n

            Otimiza\u00e7\u00e3o: A Chave para Fontes de Carregamento R\u00e1pido<\/span><\/h3>\n

            Fontes personalizadas, especialmente m\u00faltiplos estilos e pesos, podem adicionar uma certa sobrecarga \u00e0 velocidade de carregamento do seu website. Vamos abordar isso com algumas t\u00e9cnicas essenciais de otimiza\u00e7\u00e3o:<\/span><\/p>\n

              \n
            • Subconjunto de Fontes:<\/b> A maioria das fontes cont\u00e9m uma ampla gama de caracteres que provavelmente nunca ser\u00e3o utilizados em seu website. O subconjunto cria um arquivo de fonte reduzido que inclui apenas os caracteres necess\u00e1rios, reduzindo significativamente o tamanho do arquivo. Muitos servi\u00e7os de fonte oferecem op\u00e7\u00f5es de subconjunto, ou voc\u00ea pode explorar ferramentas dedicadas a isso.<\/span><\/li>\n<\/ul>\n

              Dicas Adicionais para Aumentar o Desempenho<\/span><\/h3>\n
                \n
              1. Utilize o Cache do Navegador:<\/b> Incentive os navegadores a armazenar fontes localmente usando cabe\u00e7alhos de cache apropriados. O Elementor Hosting cuida das configura\u00e7\u00f5es avan\u00e7adas de cache para voc\u00ea, proporcionando uma vantagem de velocidade.<\/span><\/li>\n
              2. Priorize o Carregamento de Fontes:<\/b> Abordaremos estrat\u00e9gias em torno da propriedade font-display posteriormente para controlar como e quando suas fontes personalizadas s\u00e3o carregadas, prevenindo flashes disruptivos de conte\u00fado n\u00e3o estilizado.<\/span><\/li>\n<\/ol>\n

                Nota:<\/b> Mesmo com otimiza\u00e7\u00e3o, o uso de fontes personalizadas naturalmente adiciona <\/span>algum<\/span><\/i> tempo de carregamento extra em compara\u00e7\u00e3o com as fontes padr\u00e3o do sistema. O trade-off \u00e9 o impacto aprimorado no design e na marca que elas oferecem.<\/span><\/p>\n

                A Anatomia da Regra font-face <\/span><\/h2>\n

                Sintaxe B\u00e1sica: Introduzindo Sua Fonte Personalizada<\/span><\/h3>\n

                Em sua ess\u00eancia, a regra @font-face informa ao navegador como encontrar e utilizar seus arquivos de fonte personalizados. Eis a estrutura b\u00e1sica:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

                \n\t\t\t\t
                \n\t\t\t\t\t\t\t
                \n\t\t\t
                \n\t\t\t\t\n\t\t\t\t\tCSS\r\n@font-face {\r\n  font-family: 'MyCustomFont'; \/* Give your font a unique name *\/\r\n  src: url('path\/to\/my-custom-font.woff2') format('woff2'),\r\n       url('path\/to\/my-custom-font.woff') format('woff'); \/* Path to font files *\/\r\n  font-weight: normal;  \/* Specify the font's weight *\/\r\n  font-style: normal;  \/* Specify the font's style *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e73d7cb elementor-widget elementor-widget-text-editor\" data-id=\"e73d7cb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Vamos decompor as propriedades-chave:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font-family:<\/b><span style=\"font-weight: 400;\"> O nome que voc\u00ea utilizar\u00e1 dentro do seu CSS para referenciar esta fonte espec\u00edfica (por exemplo, em uma declara\u00e7\u00e3o font-family em elementos de texto).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>src:<\/b><span style=\"font-weight: 400;\"> Especifica a localiza\u00e7\u00e3o dos seus arquivos de fonte usando a fun\u00e7\u00e3o url(). M\u00faltiplas linhas src permitem que voc\u00ea forne\u00e7a formatos WOFF2 e WOFF para compatibilidade ideal com navegadores. A fun\u00e7\u00e3o format() informa ao navegador o tipo de cada arquivo de fonte.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font-weight:<\/b><span style=\"font-weight: 400;\"> Define se a fonte \u00e9 normal, negrito, etc. (por exemplo, font-weight: 400 para normal, font-weight: 700 para negrito).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font-style:<\/b><span style=\"font-weight: 400;\"> Indica se a fonte \u00e9 normal, it\u00e1lica ou obl\u00edqua.<\/span><\/li>\n<\/ol>\n<p><b>Nota:<\/b><span style=\"font-weight: 400;\"> Sempre inclua os formatos de arquivo de fonte e caminhos que correspondam \u00e0 estrutura de arquivos do seu website. Se estiver utilizando um servi\u00e7o de fontes, eles frequentemente fornecer\u00e3o o snippet de c\u00f3digo @font-face pronto para voc\u00ea copiar e colar.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Mapeando Pesos e Estilos de Fonte<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Para utilizar diferentes pesos (negrito, extra-negrito, etc.) e estilos (it\u00e1lico) de sua fonte personalizada, voc\u00ea precisar\u00e1 de blocos @font-face separados para cada varia\u00e7\u00e3o. Eis um exemplo:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a596566 elementor-widget elementor-widget-code-highlight\" data-id=\"a596566\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n\/* Normal Weight *\/\r\n@font-face {\r\n  font-family: 'MyCustomFont'; \r\n  src: url('path\/to\/my-custom-font.woff2') format('woff2'),\r\n       url('path\/to\/my-custom-font.woff') format('woff'); \r\n  font-weight: normal;\r\n  font-style: normal; \r\n}\r\n\r\n\/* Bold Weight *\/\r\n@font-face {\r\n  font-family: 'MyCustomFont'; \r\n  src: url('path\/to\/my-custom-font-bold.woff2') format('woff2'),\r\n       url('path\/to\/my-custom-font-bold.woff') format('woff'); \r\n  font-weight: bold; \r\n  font-style: normal; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-00e3cf1 elementor-widget elementor-widget-text-editor\" data-id=\"00e3cf1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Nota Importante:<\/b><span style=\"font-weight: 400;\"> Certifique-se de que os nomes dos arquivos de fonte em suas URLs src correspondam aos nomes reais dos arquivos em seu servidor ou fornecidos pelo seu servi\u00e7o de fontes.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Propriedades Avan\u00e7adas: Ajuste Fino do Carregamento de Fontes<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Vamos aprofundar em uma propriedade que impacta significativamente a experi\u00eancia do usu\u00e1rio:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Font-display<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Esta propriedade controla como um navegador lida com a exibi\u00e7\u00e3o de sua fonte personalizada enquanto ela est\u00e1 sendo baixada. Ela ajuda a minimizar mudan\u00e7as visuais bruscas ou refluxos de p\u00e1gina \u00e0 medida que suas fontes s\u00e3o carregadas. Aqui est\u00e3o algumas op\u00e7\u00f5es comuns:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>swap:<\/b><span style=\"font-weight: 400;\"> Exibe imediatamente uma fonte de fallback e substitui pela sua fonte personalizada assim que estiver pronta.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>block:<\/b><span style=\"font-weight: 400;\"> Oculta brevemente o texto at\u00e9 que sua fonte personalizada seja carregada, ajudando a minimizar grandes altera\u00e7\u00f5es de layout.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>fallback: <\/b><span style=\"font-weight: 400;\">Um curto per\u00edodo de texto invis\u00edvel seguido pela substitui\u00e7\u00e3o pela fonte de fallback.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>optional: <\/b><span style=\"font-weight: 400;\">Per\u00edodo muito curto de texto invis\u00edvel seguido pelo uso da fonte personalizada apenas se j\u00e1 estiver baixada.<\/span><\/li>\n<\/ul>\n<p><b>Dica:<\/b><span style=\"font-weight: 400;\"> Experimente esses valores para encontrar o melhor equil\u00edbrio entre minimizar o tempo de carregamento percebido e altera\u00e7\u00f5es disruptivas de layout em <\/span><i><span style=\"font-weight: 400;\">seu<\/span><\/i><span style=\"font-weight: 400;\"> website.<\/span><\/p>\n<p><b>Dica Pro para Usu\u00e1rios do Elementor:<\/b><span style=\"font-weight: 400;\"> Experimente com valores de font-display, e a experi\u00eancia geral de carregamento de fontes \u00e9 facilitada dentro das configura\u00e7\u00f5es de tipografia global do Elementor.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">unicode-range: Otimizando a Entrega de Fontes<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A propriedade unicode-range dentro da sua regra @font-face permite-lhe definir um conjunto espec\u00edfico de caracteres Unicode a serem inclu\u00eddos no arquivo de fonte baixado. Isso \u00e9 incrivelmente \u00fatil para websites multil\u00edngues ou quando voc\u00ea sabe que precisar\u00e1 apenas de um determinado subconjunto dos caracteres de uma fonte. Eis como se apresenta:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df292b7 elementor-widget elementor-widget-code-highlight\" data-id=\"df292b7\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n@font-face {\r\n  font-family: 'MyCustomFont';\r\n  src: url('path\/to\/my-custom-font.woff2') format('woff2'),\r\n       url('path\/to\/my-custom-font.woff') format('woff');\r\n  font-weight: normal;\r\n  font-style: normal;\r\n  unicode-range: U+0000-00FF (Basic Latin); \/* Include only Basic Latin characters *\/\r\n} \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-04771a3 elementor-widget elementor-widget-text-editor\" data-id=\"04771a3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Por que isso \u00e9 importante?<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Arquivos de fonte menores:<\/b><span style=\"font-weight: 400;\"> Melhora a velocidade de download e reduz o uso de largura de banda, criando uma experi\u00eancia geral mais \u00e1gil.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Desempenho aprimorado para sites multil\u00edngues:<\/b><span style=\"font-weight: 400;\"> Se o seu website suporta m\u00faltiplos idiomas, o uso estrat\u00e9gico do intervalo Unicode pode reduzir significativamente a sobrecarga de carregamento de fontes.<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400;\">Construindo uma pilha de fontes robusta <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">A import\u00e2ncia das fontes de fallback<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Mesmo com uma otimiza\u00e7\u00e3o cuidadosa, pode haver casos em que sua fonte personalizada n\u00e3o carregue. Talvez um usu\u00e1rio tenha uma conex\u00e3o de internet lenta, ou haja um problema com o pr\u00f3prio arquivo de fonte. \u00c9 aqui que as fontes de fallback v\u00eam ao resgate! Uma pilha de fontes permite que voc\u00ea defina uma lista priorizada de fontes para que o navegador tente carreg\u00e1-las em ordem at\u00e9 encontrar uma que funcione.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Estrat\u00e9gias para escolher fontes de fallback<\/span><\/h3>\n<h4><span style=\"font-weight: 400;\">Similaridade visual<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Selecione fontes de fallback que se assemelhem estreitamente ao estilo e \u00e0 sensa\u00e7\u00e3o da sua fonte personalizada principal. Isso garante uma transi\u00e7\u00e3o menos brusca se a fonte personalizada n\u00e3o carregar.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Fontes web-safe comuns<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Incluir fontes amplamente dispon\u00edveis como Arial, Helvetica, Times New Roman, Georgia ou Verdana como o fallback final proporciona uma rede de seguran\u00e7a.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Categorias de fontes<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Escolha fallbacks da mesma categoria geral que sua fonte personalizada:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Serif:<\/b><span style=\"font-weight: 400;\"> Fontes com pequenos tra\u00e7os decorativos nas extremidades das formas das letras (por exemplo, Times New Roman)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sans-serif:<\/b><span style=\"font-weight: 400;\"> Fontes sem serifas, oferecendo um visual limpo e moderno (por exemplo, Arial)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Monospace:<\/b><span style=\"font-weight: 400;\"> Fontes onde todos os caracteres ocupam a mesma quantidade de espa\u00e7o horizontal (por exemplo, Courier New)<\/span><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Exemplo de uma pilha de fontes<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-92d10d8 elementor-widget elementor-widget-code-highlight\" data-id=\"92d10d8\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbody {\r\n  font-family: 'MyCustomFont', Helvetica, sans-serif; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e4ac335 elementor-widget elementor-widget-text-editor\" data-id=\"e4ac335\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Neste exemplo:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">O navegador primeiro tenta usar &#8216;MyCustomFont&#8217;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Se n\u00e3o for bem-sucedido, ele tenta usar a fonte Helvetica padr\u00e3o do sistema.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Se esse for o caso, ele recorre a qualquer fonte sans-serif dispon\u00edvel.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Elaborando uma hierarquia visual<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Sua pilha de fontes n\u00e3o deve ser apenas uma rede de seguran\u00e7a; \u00e9 uma ferramenta para criar estrutura em seu design:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>T\u00edtulos:<\/b><span style=\"font-weight: 400;\"> Frequentemente utilizam fontes mais negrito ou mais distintivas (fontes display) para criar uma separa\u00e7\u00e3o visual clara.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Texto do corpo:<\/b><span style=\"font-weight: 400;\"> Priorize fontes projetadas para legibilidade em tamanhos menores.<\/span><\/li>\n<\/ul>\n<p><b>Dica do Elementor:<\/b><span style=\"font-weight: 400;\"> Os controles de tipografia intuitivos do Elementor permitem que voc\u00ea experimente sem esfor\u00e7o pilhas de fontes, combinando fontes personalizadas com fallbacks complementares para estabelecer uma forte hierarquia visual em todo o seu website.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Compatibilidade com navegadores e testes <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Compreendendo as peculiaridades dos navegadores<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Embora os navegadores modernos tenham excelente support de fontes, podem existir varia\u00e7\u00f5es de renderiza\u00e7\u00e3o entre eles. As fontes aparecem ligeiramente mais espessas ou mais finas ou t\u00eam pequenas diferen\u00e7as de espa\u00e7amento. \u00c9 essencial estar preparado para essas nuances, especialmente para designs pixel-perfect.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Problemas com navegadores legados (Internet Explorer)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Vers\u00f5es mais antigas do Internet Explorer (IE) s\u00e3o not\u00f3rias por support limitado de formatos de fonte e, \u00e0s vezes, comportamento de renderiza\u00e7\u00e3o imprevis\u00edvel. Eis o que se deve ter em mente:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Mantenha-se com EOT:<\/b><span style=\"font-weight: 400;\"> Voc\u00ea deve incluir o formato de fonte EOT para tornar seus blocos @font-face compat\u00edveis com vers\u00f5es realmente antigas do IE.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Abrace a degrada\u00e7\u00e3o graciosa:<\/b><span style=\"font-weight: 400;\"> Projete sua tipografia com fallbacks para que seu conte\u00fado permane\u00e7a leg\u00edvel mesmo em navegadores mais antigos, mesmo que alguns caracteres da sua fonte personalizada n\u00e3o sejam totalmente realizados.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Testes minuciosos: Seu trunfo<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A chave para lidar com problemas de compatibilidade \u00e9 testar seu website em diferentes navegadores e dispositivos. Aqui est\u00e1 o que procurar:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Inconsist\u00eancias visuais:<\/b><span style=\"font-weight: 400;\"> Alguma das suas fontes escolhidas parece drasticamente diferente entre os navegadores? Voc\u00ea pode ter que ajustar sua pilha de fontes ou explorar alternativas de fonte mais amplamente suportadas.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Deslocamentos de layout:<\/b><span style=\"font-weight: 400;\"> Teste seu site em uma variedade de tamanhos de tela para garantir que sua tipografia se adapte de forma responsiva e n\u00e3o cause problemas de layout.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Ferramentas do of\u00edcio<\/span><\/h3>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ferramentas de Desenvolvimento do Navegador:<\/b><span style=\"font-weight: 400;\"> A maioria dos navegadores (Chrome, Firefox, Edge, etc.) possui ferramentas de desenvolvimento integradas que permitem inspecionar fam\u00edlias de fontes, identificar arquivos de fontes carregados e diagnosticar problemas de renderiza\u00e7\u00e3o.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Plataformas de Teste entre Navegadores:<\/b><span style=\"font-weight: 400;\"> Servi\u00e7os como BrowserStack ou LambdaTest podem auxili\u00e1-lo a testar a apar\u00eancia de seu website em uma ampla gama de navegadores e dispositivos sem a necessidade de instal\u00e1-los individualmente.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Mesmo com testes minuciosos, algumas discrep\u00e2ncias menores entre navegadores e dispositivos s\u00e3o inevit\u00e1veis. O objetivo \u00e9 assegurar que suas fontes personalizadas aprimorem a legibilidade e o estilo de maneira abrangente, mesmo que haja varia\u00e7\u00f5es.<\/span><\/p>\n<p><b>Dica do Elementor:<\/b><span style=\"font-weight: 400;\"> A funcionalidade de visualiza\u00e7\u00e3o em tempo real do Elementor e as ferramentas integradas de edi\u00e7\u00e3o responsiva simplificam o teste de combina\u00e7\u00f5es de fontes em diferentes tamanhos de tela.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Melhores Pr\u00e1ticas de Desempenho <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">O Impacto das Fontes na Velocidade do Website<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Embora as fontes personalizadas sejam fant\u00e1sticas para o design, elas podem impactar o tempo necess\u00e1rio para o carregamento do seu website. Eis o que pode ocorrer se n\u00e3o houver cautela:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Flash de Texto N\u00e3o Estilizado (FOUT):<\/b><span style=\"font-weight: 400;\">  Quando sua fonte personalizada n\u00e3o est\u00e1 pronta, o navegador pode inicialmente exibir uma fonte alternativa e, em seguida, mudar abruptamente para sua fonte personalizada quando esta for carregada. Isso cria uma mudan\u00e7a visual abrupta, pois o layout pode ser reajustado.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Flash de Texto Invis\u00edvel (FOIT):<\/b><span style=\"font-weight: 400;\"> Em alguns casos, o navegador pode ocultar completamente o texto at\u00e9 que a fonte personalizada esteja dispon\u00edvel, levando a uma experi\u00eancia frustrante para o usu\u00e1rio.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Equilibrando Est\u00e9tica e Desempenho<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A boa not\u00edcia \u00e9 que, com algumas t\u00e9cnicas inteligentes, \u00e9 poss\u00edvel minimizar o impacto negativo das fontes personalizadas no desempenho!<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">T\u00e9cnicas para Otimiza\u00e7\u00e3o de Fontes<\/span><\/h3>\n<h4><span style=\"font-weight: 400;\">Pr\u00e9-carregamento de Fonte<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">  A tag &lt;link rel=&#8221;preload&#8221;&gt; instrui o navegador a buscar seus arquivos de fonte o mais cedo poss\u00edvel no processo de carregamento da p\u00e1gina. Eis um exemplo:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">HTML<\/span><span style=\"font-weight: 400;\"><br \/><\/span><span style=\"font-weight: 400;\">&lt;link rel=&#8221;preload&#8221; href=&#8221;\/fonts\/my-custom-font.woff2&#8243; as=&#8221;font&#8221; type=&#8221;font\/woff2&#8243; crossorigin&gt;<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Importante:<\/b><span style=\"font-weight: 400;\"> Utilize o pr\u00e9-carregamento com parcim\u00f4nia, apenas para suas fontes mais cr\u00edticas, a fim de evitar a desacelera\u00e7\u00e3o de outros recursos importantes.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Priorizando WOFF2 (com WOFF como alternativa):<\/b><span style=\"font-weight: 400;\">  Navegadores modernos support amplamente o formato WOFF2, oferecendo excelente compress\u00e3o. Sempre ofere\u00e7a WOFF como alternativa para navegadores mais antigos.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Aproveitando o Armazenamento em Cache:<\/b><span style=\"font-weight: 400;\"> Incentive os navegadores a armazenar suas fontes localmente para que visitas subsequentes ao seu website carreguem mais rapidamente.<\/span> <\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Dicas Adicionais<\/span><\/h3>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Limite o N\u00famero de Fontes:<\/b><span style=\"font-weight: 400;\">  Evite utilizar uma multiplicidade de fontes personalizadas. Algumas fontes cuidadosamente escolhidas s\u00e3o suficientes.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Considere uma Abordagem de Fontes do Sistema em Primeiro Lugar:<\/b><span style=\"font-weight: 400;\">  Fontes de sistema modernas (aquelas j\u00e1 presentes nos dispositivos dos usu\u00e1rios) podem, por vezes, ser adequadas para determinadas se\u00e7\u00f5es do seu website. Combine-as com uma fonte personalizada para cabe\u00e7alhos, por exemplo, para equilibrar velocidade de carregamento e identidade visual \u00fanica.<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400;\">Tipografia Avan\u00e7ada com Fontes Personalizadas <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Fontes Vari\u00e1veis: Pot\u00eancia Din\u00e2mica de Design<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Fontes vari\u00e1veis s\u00e3o arquivos de fonte \u00fanicos que cont\u00eam uma ampla gama de varia\u00e7\u00f5es estil\u00edsticas. Isso significa que voc\u00ea pode ajustar o peso da fonte, largura, inclina\u00e7\u00e3o e mais \u2014 tudo em tempo real!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Eis por que elas s\u00e3o excepcionais:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tamanho de Arquivo Reduzido:<\/b><span style=\"font-weight: 400;\"> H\u00e1 menos necessidade de carregar m\u00faltiplos arquivos de fonte para diferentes pesos e estilos.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Controle Minucioso:<\/b><span style=\"font-weight: 400;\"> Anime efeitos de texto ou crie varia\u00e7\u00f5es de fonte perfeitamente ajustadas para responsividade.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Possibilidades Criativas:<\/b><span style=\"font-weight: 400;\"> Experimente estilos que fontes tradicionais simplesmente n\u00e3o oferecem.<\/span><\/li>\n<\/ul>\n<p><b>Observa\u00e7\u00e3o:<\/b><span style=\"font-weight: 400;\"> O support de fontes vari\u00e1veis \u00e9 excelente em navegadores modernos, mas verifique a compatibilidade se seu p\u00fablico inclui usu\u00e1rios de navegadores mais antigos.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Explorando Propriedades CSS para Controle Detalhado<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Vamos examinar algumas propriedades CSS avan\u00e7adas para assumir o comando de sua estiliza\u00e7\u00e3o de texto:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font-variant:<\/b><span style=\"font-weight: 400;\"> Fornece acesso a recursos tipogr\u00e1ficos como versaletes, ligaduras e diferentes estilos de numerais, se suportados pela sua fonte personalizada escolhida.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font-feature-settings:<\/b><span style=\"font-weight: 400;\"> Oferece controle ainda mais granular sobre os recursos dispon\u00edveis dentro de uma fonte.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font-smoothing:<\/b><span style=\"font-weight: 400;\">  Auxilia no ajuste fino de como o texto \u00e9 renderizado, particularmente para tamanhos menores. Experimente valores como grayscale ou antialiased para observar o efeito em suas fontes.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Fontes Decorativas e Efeitos de Texto<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Fontes personalizadas desvendam um universo de express\u00e3o em design. Eis onde \u00e9 poss\u00edvel adotar uma abordagem grandiosa e audaz:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Cabe\u00e7alhos Impactantes:<\/b><span style=\"font-weight: 400;\"> Uma fonte de exibi\u00e7\u00e3o distinta pode causar uma primeira impress\u00e3o poderosa.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Elementos que Capturam a Aten\u00e7\u00e3o:<\/b><span style=\"font-weight: 400;\"> Utilize fontes chamativas com parcim\u00f4nia para destacar chamadas para a\u00e7\u00e3o ou cita\u00e7\u00f5es importantes.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Efeitos de Texto CSS:<\/b><span style=\"font-weight: 400;\"> Combine fontes personalizadas com propriedades CSS como text-shadow, text-transform e text-decoration para criar estilos de texto \u00fanicos.<\/span><\/li>\n<\/ul>\n<p><b>Importante:<\/b><span style=\"font-weight: 400;\">  Utilize fontes decorativas de maneira estrat\u00e9gica. O uso excessivo de fontes de exibi\u00e7\u00e3o dif\u00edceis de ler pode impactar negativamente a acessibilidade.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Garantindo a Acessibilidade com Fontes Personalizadas <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Selecionando Fontes para Legibilidade<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A legibilidade \u00e9 crucial para assegurar que seu conte\u00fado seja acess\u00edvel a todos, incluindo aqueles com defici\u00eancias visuais. Considere estes fatores ao selecionar fontes personalizadas:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tamanho da Fonte:<\/b><span style=\"font-weight: 400;\">  Assegure-se de que o texto do corpo tenha um tamanho confort\u00e1vel para leitura. Um m\u00ednimo de 16px \u00e9 frequentemente recomendado, mas dependendo da fonte, pode-se optar por um tamanho ainda maior.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Altura da Linha (line-height): <\/b><span style=\"font-weight: 400;\"> O espa\u00e7amento adequado entre as linhas auxilia o olho a percorrer de uma linha para a pr\u00f3xima. Uma altura de linha de pelo menos 1,5 vezes o tamanho da fonte \u00e9 uma boa base.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Altura-x:<\/b><span style=\"font-weight: 400;\"> Fontes com alturas-x maiores (a altura das letras min\u00fasculas) tendem a ser mais f\u00e1ceis de ler, especialmente em tamanhos menores.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Contraste:<\/b><span style=\"font-weight: 400;\">  Empenhe-se para obter um forte contraste entre a cor da fonte e a cor de fundo. Utilize verificadores de contraste online para garantir que voc\u00ea atenda aos padr\u00f5es das Diretrizes de Acessibilidade para Conte\u00fado Web (WCAG).<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Considera\u00e7\u00f5es Adicionais de Acessibilidade<\/span><\/h3>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Evite Letras Mai\u00fasculas em Excesso:<\/b><span style=\"font-weight: 400;\"> Grandes blocos de texto em letras mai\u00fasculas s\u00e3o dif\u00edceis de ler para todos, e especialmente para pessoas com dislexia.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Limite o Uso de It\u00e1licos e Fontes Altamente Decorativas:<\/b><span style=\"font-weight: 400;\"> Estas podem ser desafiadoras para ler, particularmente em blocos de texto mais longos.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">As melhores pr\u00e1ticas de acessibilidade v\u00e3o al\u00e9m das fontes. A estrutura geral do seu website, navega\u00e7\u00e3o e texto alternativo para imagens tamb\u00e9m devem ser considerados.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Exemplos Pr\u00e1ticos com o Construtor de Sites Elementor<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Exemplos Passo a Passo<\/span><\/h3>\n<h4><span style=\"font-weight: 400;\">Adicionando uma Fonte Personalizada<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Fontes Globais do Elementor Pro:<\/b><span style=\"font-weight: 400;\">  Navegue at\u00e9 Elementor &gt; Fontes Personalizadas. Fa\u00e7a o upload dos seus arquivos de fonte e atribua um nome memor\u00e1vel \u00e0 sua fonte. Agora, esta fonte est\u00e1 dispon\u00edvel em todo o Elementor.<\/span><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Aplicando Fontes Personalizadas de Maneira Simplificada<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Selecionando a Tipografia:<\/b><span style=\"font-weight: 400;\"> Escolha qualquer elemento de texto (cabe\u00e7alho, par\u00e1grafo, etc.) e abra a se\u00e7\u00e3o &#8216;Tipografia&#8217; no painel de estiliza\u00e7\u00e3o do Elementor.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sele\u00e7\u00e3o de Fonte:<\/b><span style=\"font-weight: 400;\">  Sua fonte personalizada agora aparecer\u00e1 ao lado das fontes web padr\u00e3o no menu suspenso. Escolha-a e ajuste o peso, estilo, etc., conforme necess\u00e1rio.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Efeitos Tipogr\u00e1ficos Avan\u00e7ados no Elementor<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">O Elementor oferece numerosas op\u00e7\u00f5es de estiliza\u00e7\u00e3o para elevar qualquer elemento de texto:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sombras de Texto:<\/b><span style=\"font-weight: 400;\"> Adicione dimens\u00e3o e \u00eanfase com os controles de &#8216;Sombra de Texto&#8217;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Transforma\u00e7\u00f5es de Texto:<\/b><span style=\"font-weight: 400;\"> Configure facilmente o texto para mai\u00fasculas, min\u00fasculas ou capitalize usando a op\u00e7\u00e3o &#8216;Transformar&#8217;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Decora\u00e7\u00e3o de Texto:<\/b><span style=\"font-weight: 400;\"> Sublinhe, sobrelinhe ou risque o texto para efeitos especiais.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Espa\u00e7amento entre Letras e Palavras:<\/b><span style=\"font-weight: 400;\"> Ajuste minuciosamente o espa\u00e7amento para refinamento visual.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Integra\u00e7\u00e3o com as Configura\u00e7\u00f5es Globais do Elementor<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">As Fontes Globais e Estilos Globais do Elementor facilitam a aplica\u00e7\u00e3o de suas fontes personalizadas em todo o seu website:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Defina Sua Hierarquia Visual:<\/b><span style=\"font-weight: 400;\"> Nas configura\u00e7\u00f5es de estilo do tema do Elementor, voc\u00ea pode definir estilos de tipografia padr\u00e3o para cabe\u00e7alhos (H1-H6), par\u00e1grafos e mais.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Consist\u00eancia em Todo o Site:<\/b><span style=\"font-weight: 400;\"> Quaisquer altera\u00e7\u00f5es em seus estilos globais s\u00e3o automaticamente propagadas por todo o seu website, garantindo completa consist\u00eancia e economizando uma quantidade significativa de tempo.<\/span><\/li>\n<\/ul>\n<p><b>Otimiza\u00e7\u00e3o Autom\u00e1tica de Fontes:<\/b><span style=\"font-weight: 400;\"> Suas fontes personalizadas recebem o tratamento de aprimoramento de desempenho sem qualquer configura\u00e7\u00e3o adicional de sua parte.<\/span><\/p>\n<p><b>Solu\u00e7\u00e3o Integrada:<\/b><span style=\"font-weight: 400;\">  N\u00e3o h\u00e1 necessidade de gerenciar contas de hospedagem e construtores de sites separados. O Elementor Hosting re\u00fane tudo em um ambiente unificado e otimizado.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Conclus\u00e3o<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">A esta altura, voc\u00ea compreende que as fontes personalizadas s\u00e3o muito mais do que apenas um adorno visual. Eles incorporam a personalidade do seu website e desempenham um papel significativo em sua identidade visual global. Eis um resumo do que abordamos:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">O Poder da Escolha:<\/ci><ci id=\"gid_1\"> Explore a abund\u00e2ncia de fontes em plataformas como Google Fonts e Adobe Fonts.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Quest\u00f5es de Licenciamento:<\/ci><ci id=\"gid_1\"> Respeite os termos de licenciamento para evitar complica\u00e7\u00f5es legais.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">A Otimiza\u00e7\u00e3o \u00e9 Fundamental:<\/ci><ci id=\"gid_1\"> Subsetting de fontes, caching e pr\u00e9-carregamento garantem uma experi\u00eancia do usu\u00e1rio fluida.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Peculiaridades dos Navegadores:<\/ci><ci id=\"gid_1\"> Realize testes em diferentes navegadores e lide adequadamente com as limita\u00e7\u00f5es de navegadores legados.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Tipografia Avan\u00e7ada:<\/ci><ci id=\"gid_1\"> Utilize fontes vari\u00e1veis e propriedades CSS para efeitos \u00fanicos.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Acessibilidade em Primeiro Lugar:<\/ci><ci id=\"gid_1\"> Opte por fontes leg\u00edveis e priorize contraste suficiente para todos os usu\u00e1rios.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">A Vantagem do Elementor:<\/ci><ci id=\"gid_1\"> Escolha o Elementor Hosting para desfrutar de um fluxo de trabalho otimizado para fontes personalizadas, com f\u00e1cil integra\u00e7\u00e3o, configura\u00e7\u00f5es globais e otimiza\u00e7\u00e3o de desempenho.<\/ci><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">As fontes s\u00e3o uma poderosa ferramenta de design. Utilize-as estrategicamente para moldar a atmosfera geral do seu site. N\u00e3o receie experimentar e encontrar as tipografias perfeitas para fazer com que seu website verdadeiramente se destaque!<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>As fontes que voc\u00ea seleciona transmitem muito sobre o estilo e a marca do seu website. Embora as fontes padr\u00e3o &#8216;web-safe&#8217; cumpram sua fun\u00e7\u00e3o, elas podem deixar seu site com uma apar\u00eancia gen\u00e9rica e pouco inspiradora. \u00c9 a\u00ed que entram as fontes personalizadas, oferecendo possibilidades infinitas para fazer seu design verdadeiramente se destacar da multid\u00e3o.<\/p>\n","protected":false},"author":2024234,"featured_media":113336,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[517],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-123610","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-recursos-pt-br"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como Utilizar @font-face em CSS<\/title>\n<meta name=\"description\" content=\"As fontes que voc\u00ea seleciona transmitem muito sobre o estilo e a marca do seu website. Embora as fontes padr\u00e3o &#039;web-safe&#039; cumpram sua fun\u00e7\u00e3o, elas podem deixar seu site com uma apar\u00eancia gen\u00e9rica e pouco inspiradora. \u00c9 a\u00ed que entram as fontes personalizadas, oferecendo possibilidades infinitas para fazer seu design verdadeiramente se destacar da multid\u00e3o.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Utilizar @font-face em CSS\" \/>\n<meta property=\"og:description\" content=\"As fontes que voc\u00ea seleciona transmitem muito sobre o estilo e a marca do seu website. Embora as fontes padr\u00e3o &#039;web-safe&#039; cumpram sua fun\u00e7\u00e3o, elas podem deixar seu site com uma apar\u00eancia gen\u00e9rica e pouco inspiradora. \u00c9 a\u00ed que entram as fontes personalizadas, oferecendo possibilidades infinitas para fazer seu design verdadeiramente se destacar da multid\u00e3o.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-03T06:20:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-17T15:03:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"Como Utilizar @font-face em CSS\",\"datePublished\":\"2025-03-03T06:20:46+00:00\",\"dateModified\":\"2025-12-17T15:03:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/\"},\"wordCount\":3751,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Recursos\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/\",\"name\":\"Como Utilizar @font-face em CSS\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"datePublished\":\"2025-03-03T06:20:46+00:00\",\"dateModified\":\"2025-12-17T15:03:19+00:00\",\"description\":\"As fontes que voc\u00ea seleciona transmitem muito sobre o estilo e a marca do seu website. Embora as fontes padr\u00e3o 'web-safe' cumpram sua fun\u00e7\u00e3o, elas podem deixar seu site com uma apar\u00eancia gen\u00e9rica e pouco inspiradora. \u00c9 a\u00ed que entram as fontes personalizadas, oferecendo possibilidades infinitas para fazer seu design verdadeiramente se destacar da multid\u00e3o.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"width\":1200,\"height\":631},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/pt-br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Recursos\",\"item\":\"https:\/\/elementor.com\/blog\/pt-br\/category\/recursos-pt-br\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Utilizar @font-face em CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\/\/elementor.com\/blog\/author\/itamarha\/\",\"https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/\"],\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como Utilizar @font-face em CSS","description":"As fontes que voc\u00ea seleciona transmitem muito sobre o estilo e a marca do seu website. Embora as fontes padr\u00e3o 'web-safe' cumpram sua fun\u00e7\u00e3o, elas podem deixar seu site com uma apar\u00eancia gen\u00e9rica e pouco inspiradora. \u00c9 a\u00ed que entram as fontes personalizadas, oferecendo possibilidades infinitas para fazer seu design verdadeiramente se destacar da multid\u00e3o.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/","og_locale":"pt_BR","og_type":"article","og_title":"Como Utilizar @font-face em CSS","og_description":"As fontes que voc\u00ea seleciona transmitem muito sobre o estilo e a marca do seu website. Embora as fontes padr\u00e3o 'web-safe' cumpram sua fun\u00e7\u00e3o, elas podem deixar seu site com uma apar\u00eancia gen\u00e9rica e pouco inspiradora. \u00c9 a\u00ed que entram as fontes personalizadas, oferecendo possibilidades infinitas para fazer seu design verdadeiramente se destacar da multid\u00e3o.","og_url":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-03T06:20:46+00:00","article_modified_time":"2025-12-17T15:03:19+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Escrito por":"Itamar Haim","Est. tempo de leitura":"19 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"Como Utilizar @font-face em CSS","datePublished":"2025-03-03T06:20:46+00:00","dateModified":"2025-12-17T15:03:19+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/"},"wordCount":3751,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Recursos"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/","url":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/","name":"Como Utilizar @font-face em CSS","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","datePublished":"2025-03-03T06:20:46+00:00","dateModified":"2025-12-17T15:03:19+00:00","description":"As fontes que voc\u00ea seleciona transmitem muito sobre o estilo e a marca do seu website. Embora as fontes padr\u00e3o 'web-safe' cumpram sua fun\u00e7\u00e3o, elas podem deixar seu site com uma apar\u00eancia gen\u00e9rica e pouco inspiradora. \u00c9 a\u00ed que entram as fontes personalizadas, oferecendo possibilidades infinitas para fazer seu design verdadeiramente se destacar da multid\u00e3o.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","width":1200,"height":631},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-utilizar-font-face-em-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/pt-br\/"},{"@type":"ListItem","position":2,"name":"Recursos","item":"https:\/\/elementor.com\/blog\/pt-br\/category\/recursos-pt-br\/"},{"@type":"ListItem","position":3,"name":"Como Utilizar @font-face em CSS"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/pt-br\/#website","url":"https:\/\/elementor.com\/blog\/pt-br\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/pt-br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/pt-br\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/123610","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/comments?post=123610"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/123610\/revisions"}],"predecessor-version":[{"id":147894,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/123610\/revisions\/147894"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media\/113336"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media?parent=123610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/categories?post=123610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/tags?post=123610"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_persona?post=123610"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_intent?post=123610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}