Personalize o estilo, o tamanho, a cor e o espaçamento dos textos no seu site.
Este guia aborda as alterações nas fontes do seu site, incluindo estilo, tamanho, cor e espaçamento. Todos os sites já vêm com um estilo padrão, que você pode alterar e ajustar nos estilos do site.
Assista ao vídeo
Como as fontes funcionam no Squarespace
Ao conferir o menu de fontes:
- Nossa coleção inclui 600 fontes do Google Fonts e 1.000 fontes do Adobe Fonts. Ela não inclui todas as fontes disponíveis do Google nem do Adobe. Role a página para ver nossa biblioteca completa; ou use o campo de busca do menu para achar uma fonte específica.
- Para manter os menus curtos, limitamos o que aparece primeiro e focamos as fontes recentemente usadas e as opções mais usadas. Nem todas as opções de formatação oferecidas pelo Google Fonts ou Adobe Fonts são aceitas no Squarespace.
Ao escolher as fontes:
- Os pacotes de fontes do Squarespace dão ao seu site um estilo coeso sem a necessidade de escolher manualmente cada fonte. Os pacotes usam fontes amplamente disponíveis do Google, tudo para você a manter a padronização da marca em todas as plataformas.
- As opções de estilo das fontes são intencionalmente limitadas para manter a padronização em todo o site. Para editar uma fonte além dos ajustes disponíveis, você pode adicionar uma fonte personalizada com CSS. Na versão 7.0, É possível adicionar fontes personalizadas do Adobe Fonts.
- Dependendo do aparelho, algumas fontes são renderizadas de forma diferente; são os casos de Windows x Mac ou iOS x Android. Browsers diferentes também podem variar a renderização das fontes em alguns casos, como no menu suspenso.
- Às vezes, o Google e o Adobe excluem fontes da biblioteca. Os textos que usam essa fonte no site não são alterados, mas, ao trocar de fonte, não é mais possível voltar para a original. Em vez disso, trocamos a fonte na nossa biblioteca por outra semelhante.
Ao usar as fontes no site:
- Na categoria da fonte, a maioria das alterações (como título e parágrafo) afeta todo o site. Uma alteração na fonte do texto do Título 1, por exemplo, afeta todos os textos definidos como Título 1 no site.
- Para criar cabeçalhos no texto principal, use o menu suspenso Formatar no editor do bloco de texto. Criados os cabeçalhos, é possível alterar os estilos do título. Saiba mais em "Formatação do texto".
- A alteração do formato do texto na barra de ferramentas de texto afeta os estilos dessa área de texto nos estilos do site. Por exemplo: ao usar a caixa de ferramentas do texto para alterar para Título 1 o texto do trecho de uma publicação do blog, depois editar a fonte ou o tamanho dos trechos do blog nos estilos do site, o texto alterado não muda.
Dica: para ajuda para escolher as melhores fontes para o seu site, confira Escolhendo as fontes e as cores certas.
Como funciona o ajuste do tamanho do texto no Squarespace
O ajuste do tamanho do texto ocorre para preencher uma determinada área do site. Nosso design responsivo garante que o texto caiba em telas de qualquer tamanho. O ajuste do texto depende da versão do site.
O texto é ajustado com base no tamanho-base da fonte. Você pode usar o ajuste do tamanho do texto para preencher um bloco de texto, independentemente das configurações da fonte.
O tamanho do texto é ajustado com base no tamanho do browser. Algumas famílias de templates incluem a opção de configurar o ajuste do tamanho do texto.
Encontre um ajuste de fonte
Os ajustes da fonte funcionam de forma diferente dependendo da versão do site.
Para alterar todas as fontes no site:
- Ao editar uma página, abra "Estilos do site" e clique em > ao lado de "Fontes".
- Clique em Trocar no pacote atual de fontes para ver todos os pacotes disponíveis. Clique em Sans-serif, Serif ou Misto para ver diferentes pacotes de fontes para cada estilo.
- Clique em um novo pacote de fontes para ver uma prévia do seu site.
- Clique em Voltar para retornar ao painel "Fontes" e fixe o Tamanho-base da fonte. Todos os outros textos são ajustados em relação a esse tamanho.
- As alterações permanecerão enquanto você edita outro conteúdo da página. Para salvar as alterações, clique em Salvar. Para interromper a edição, clique em Sair.
Para que o Google Fonts ou o Adobe Fonts (antigo Typekit) carregue no seu site, selecione um dos nossos pacotes de fontes integradas:
- Em Sans-serif, selecione Helvetica Neue
- Em Serif, selecione Georgia
- Em Misto, selecione Verdana
Para alterar um ajuste específico nas fontes:
- No painel Fontes, clique em Alocar estilos.
- Encontre o grupo de textos específicos que você quer alterar, como Título ou Botão, e clique nele para abrir todas as opções de ajuste desse grupo. Você também pode clicar em um texto na prévia da página para ver as opções de ajuste.
- Clique no menu suspenso ao lado do nome do ajuste para usar um novo estilo de fonte. Para personalizar ainda mais, clique em Personalizar e use as outras opções.
- Clique em Mostrar tudo ou Voltar para retornar à lista completa.
Para ajustar a fonte, abra os estilos do site. Dependendo do template, você verá opções e nomes diferentes dos grupos de fontes. Os ajustes das fontes podem ser identificados pelo título do grupo que afetam e pela setinha que abre as opções extras.
Para que o Google Fonts ou o Adobe Fonts (antigo Typekit) não carregue no seu site, clique em Definir tudo como fontes do sistema na parte inferior do painel dos estilos do site.
Se você não achar o grupo de texto a ser alterado, confira no guia do seu template as opções de estilo que ele tem. Para ver os ajustes disponíveis nos estilos do site, você pode também clicar no texto de uma página. Clique em Mostrar tudo para retornar à lista completa.
Encontre uma fonte específica
O modo de procurar uma fonte depende da versão do Squarespace do site.
Para usar uma fonte específica do Google, procure-a na opção Explorar todas as fontes.
- Abra o painel "Estilos do site" e clique em > ao lado de "Fontes".
- Clique no tipo de texto a ser alterado: Cabeçalhos, Parágrafos, Botões ou Outros.
- Clique no nome da fonte
- Para procurar as fontes disponíveis, role a tela ou digite o nome da fonte no campo Buscar fontes no topo do painel. Para explorar o Adobe Fonts, clique em Conferir fontes antigas na parte inferior da lista.
- As alterações permanecerão enquanto você edita outro conteúdo da página. Para salvar as alterações, clique em Salvar. Para interromper a edição, clique em Sair.
Dica: a categoria Diversos vale na maioria dos textos que não são título ou texto de parágrafo normal, como preços do produto, navegação no bloco de menu e outros metadados de conteúdo.
Para usar uma fonte específica do Adobe ou do Google, use o campo de busca dentro de um ajuste de fonte para encontrá-la.
- Abra o painel Design e clique em Estilos do site.
- Clique no ajuste desejado e depois no menu suspenso ao lado do nome da fonte.
- Para procurar as fontes disponíveis, role a tela ou digite o nome da fonte no campo Buscar fontes no topo do menu.
- Clique na fonte desejada e depois clique em Salvar no topo do painel para aplicar as alterações.
Se você não tem nenhuma fonte em mente, o Adobe e o Google têm recursos para você procurar e ver as fontes nas respectivas plataformas:
Após escolher a fonte, procure-a no Squarespace. Algumas fontes não estão disponíveis.
Ajuste o estilo de uma fonte
O modo de ajustar o estilo da fonte depende da versão do Squarespace do site.
Para ajustar o estilo de uma fonte:
- Abra o painel "Estilos do site" e clique em > ao lado de "Fontes".
- Clique no tipo de texto a ser alterado: Cabeçalhos, Parágrafos, Botões ou Outros.
- O nome da fonte aparece no topo. Use os ajustes e as várias opções de tamanho para alterar o estilo.
- As alterações permanecerão enquanto você edita outro conteúdo da página. Para salvar as alterações, clique em Salvar. Para interromper a edição, clique em Sair.
Ajuste os estilos conforme a tabela abaixo.
Dica: para alterar a cor do texto, altere as cores gerais do site ou da seção. No bloco de texto, você também pode usar a barra de ferramentas de texto.
|
Nome do estilo |
Opções |
|
Peso |
Deixe o texto mais espesso ou mais fino. |
|
Estilo |
Defina o texto como normal, negrito, itálico ou outros formatos, dependendo da fonte. |
|
Altura da linha |
Altere o espaço entre as linhas do texto. |
|
Espaçamento entre as letras |
Altere o espaço entre as letras. |
|
Transformação do texto |
Use maiúsculas em alguns, todos ou nenhum texto. Esse ajuste só funciona em determinadas fontes. |
|
Tamanho |
Deixe o texto maior ou menor. Cada tipo de texto apresenta uma ou mais opções de tamanho. Os cabeçalhos, por exemplo, incluem um controle para formatar Título 1, Título 2, Título 3 e Título 4 na seção "Tamanho". Também é possível alterar o tamanho do texto em um bloco de texto específico na barra de ferramentas de texto. |
Clique em um ajuste de fonte ou tipografia para abrir outras opções, como nome, tamanho e espaçamento das letras da fonte.
Dependendo do texto e do template, é possível ajustar as opções de tipografia indicadas na tabela abaixo. Há outras opções e ajustes de estilo disponíveis para diferentes fontes e templates.
Dica: para alterar a cor do texto, use o ajuste da cor para esse tipo de texto nos estilos do site. Saiba mais em Alterando as cores.
|
Nome do ajuste |
Opções |
|
Fonte |
Selecione ou procure uma fonte do Google ou do Adobe. O topo do menu mostrará algumas opções selecionados. Role a tela para conferir toda nossa biblioteca; ou use o campo de busca (topo do menu) se você souber o nome da fonte desejada. |
|
Tamanho da fonte |
Use o controle deslizante ou informe um valor para o tamanho dela. |
|
Altura da linha |
Fixe o espaço entre as linhas. Atenção: a altura no valor 0 pode sobrepor o texto, principalmente na versão móvel. |
|
Espaçamento entre letras |
Fixe o espaço entre a letras. Valores negativos podem causar sobreposição de caracteres. |
|
Transformação do texto |
Selecione Nenhuma, Capitalizar, Maiúsculas ou Minúsculas. |
|
Ornamentos do texto |
Selecione Nenhum, Sublinhado, Linha sobreposta ou Tachado. |
|
Alinhamento do texto |
Selecione Esquerda, Centralizado ou Direita. |
Adicione uma fonte personalizada do Adobe Fonts (somente versão 7.0)
Na versão 7.0, você pode adicionar uma fonte personalizada ao seu site Squarespace com a nossa integração com o Adobe Fonts. Essas fontes personalizadas não são aceitas na versão 7.1.
- Esse processo troca as opções do Adobe Fonts nos menus dos estilos do site pelas fontes no seu projeto personalizado. O Adobe Fonts do Squarespace não pode ser usado enquanto seu projeto personalizado com o Adobe Fonts estiver ativado.
- As fontes personalizadas estão disponíveis com a assinatura do Adobe Creative Cloud. Antes de cadastrar, escolha um plano que inclua o Adobe Fonts.
Passo 1 - crie um projeto da web e adicione as fontes
Para adicionar suas fontes personalizadas ao Squarespace, você primeiro precisa criar um projeto da web no Adobe. Faça login na sua conta Adobe Fonts e siga os passos para criar um projeto da web.
Criado seu projeto da web, aparecerá um código personalizado de incorporação HTML. Você não precisará dele - não o adicione ao site. Em vez disso, siga a próxima etapa para gerar o ID do projeto da web, que é mais curto.
Passo 2 - adicione as fontes personalizadas ao Squarespace
Quando seu projeto da web tiver todas as fontes necessárias, adicione o projeto ao seu site Squarespace com o ID do projeto.
- Na sua conta Adobe Fonts, clique em Meu Adobe Fonts no canto superior direito.
- Clique em Projetos da web e localize o projeto a ser adicionado ao Squarespace.
- Copie o ID do projeto, que é uma string e números acima do código de incorporação. Copie o ID exclusivo do projeto, e não o que aparece no exemplo.
- Abra o painel "Ferramentas para desenvolvedores".
- Clique em Chaves API externas.
- Role a tela até a caixa ID do projeto do Adobe Fonts.
- Cole na caixa o ID do projeto que você copiou no Adobe.
- Clique em Salvar.
Passo 3 - use suas fontes do Adobe Fonts
Adicionadas as fontes do Adobe Fonts, você pode usá-las nos textos do seu site. As fontes no seu projeto da web substituem as fontes integradas do Adobe Fonts nos estilos do site. Para achar rapidamente uma fonte personalizada do Adobe Fonts, procure pelo nome na caixa Procurar .
Como gerenciar as alterações nas fontes
- Ao alterar uma fonte do Adobe Fonts, republique para que as mudanças apareçam no Squarespace. Saiba mais na documentação do Adobe.
- Se o Adobe Fonts excluir da coleção uma fonte que você está usando, ela ainda funcionará no seu site. No entanto, você não poderá usá-la em textos novos nem voltar para ela se trocar por outra, pois ela não aparecerá mais em Estilos do Site.
Aparece a mensagem "Fontes não aceitas" em Estilos do Site
Você verá essa mensagem se o site usar uma fonte que o Adobe Fonts já retirou de circulação. Quando a fonte não é mais aceita, o Squarespace a troca pela fonte mais parecida possível. Confira as seções de estilo listadas no erro para aprovar ou alterar a fonte alternativa.
O Adobe Fonts também excluirá todas as fontes antigas da sua página do Adobe Fonts.
Minhas fontes personalizadas da Adobe não aparecem no meu site
Se alguns caracteres especiais não aparecerem corretamente, edite o projeto da web e selecione Todos os caracteres antes de adicionar o ID do projeto ao Squarespace.
Se nenhuma das suas fontes aparecer, veja se o seu site tem JavaScript. Se você já usou o método JavaScript do Adobe Fonts para adicionar fontes ao seu site, suas fontes talvez não carreguem corretamente. Exclua o JavaScript e siga os passos acima para adicionar suas fontes do Adobe Fonts.
Onde receber suporte
Em caso de dificuldades ao adicionar o ID do seu projeto do Adobe Fonts; ou se as fontes do Adobe Fonts não aparecerem no seu site, fale conosco para chegarmos a uma solução. Para demais dúvidas sobre o uso do Adobe Fonts, procure a Adobe ou leia a documentação dela.
Solução de problemas com a fonte
Antes de seguir estes passos, veja se o problema está relacionado ao seu browser. Se a solução de problemas do browser não resolver, consulte esta seção para outras situações comuns na hora de alterar uma fonte.
Copiei e colei o texto, mas está diferente da minha formatação
Quando você copia e cola um texto, talvez copie também formatações que interferem no CSS do Squarespace. Isso faz com que o texto seja exibido com a formatação diferente da configurada no painel Estilos do Site.
Para evitar isso, recomendamos copiar e colar os textos primeiro em um processador de textos que elimine qualquer formatação especial; ou use um atalho de teclado que retire a formatação.
- No Windows, aperte Ctrl + Shift + V quando colar os textos.
- No Mac, aperte ⌘ + Shift + V quando colar os textos.
- Você pode também colar o texto sem formatação; basta clicar no ícone da área de transferência. Se você já inseriu o texto, destaque o texto e clique no ícone Retirar formatação.
Minha fonte fica diferente quando estou logado
O modo como as fontes são renderizadas no seu site ativo pode ser afetada pelo seu domínio.
Se houver um domínio externo vinculado ao seu site, procure o provedor do domínio e veja se não há algum redirecionamento mascarado. O mascaramento controla como o domínio direciona ao seu site e pode interferir nas configurações de estilo do Squarespace.
Não consigo deixar a fonte em um determinado tamanho
Se você não conseguir deixar uma fonte em um tamanho específico em px (pixel), é porque seu site talvez use um valor em ou rem.
- Todos os sites da versão 7.1 utilizam valores rem nos tamanhos das fontes. Isso significa que o tamanho dela é relativo ao tamanho da fonte-base. Para alterar o valor rem de uma fonte, use o controle ou clique no valor atual e informe manualmente um novo valor. Para alterar o tamanho da fonte-base, ajuste o Tamanho-base no pacote de fontes.
- Nos sites da versão 7.0, alguns templates usam em no lugar de px no tamanho da fonte e do espaçamento. Ao informar um valor diretamente no campo de número, você pode manter o tamanho ajustável com o valor em ou informar em px para mantê-lo fixo. No entanto, se o seu template utilizar somente um valor px, não informe nenhum valor em no lugar, pois isso pode impedir que a fonte seja ajustada em telas menores.
Minha fonte é difícil de ler na versão móvel
As fontes com espessura inferior a 100 podem ficar muito claras ou apagadas em dispositivos móveis. Para que o texto fique visível em todos os dispositivos, abra Estilos do Site e defina a espessura da fonte com um valor maior do que 100.