Como adicionar fontes personalizadas ao Squarespace como um profissional

Deseja adicionar fontes personalizadas ao Squarespace?

Se você é usuário do Squarespace, já sabe que a plataforma vem com algumas opções de fontes sólidas. Mas há muitos motivos para adicionar fontes aos sites do Squarespace!

Normalmente, é uma fonte de marca, ou mesmo uma que você fez sob medida.

Talvez seja mais sobre uma aparência específica que você deseja criar para elementos em seu site.

Seja qual for o motivo, é fácil adicionar fontes personalizadas ao Squarespace – basta seguir este processo!

Como adicionar uma fonte personalizada ao seu site Squarespace

Adicionar uma fonte que você escolher ao seu site Squarespace é bastante simples, mas há um pouco de CSS para adicionar.

Certifique-se de que você está bem em fazer isso antes de começar, ou pegue alguém que esteja.

Etapa 1. Escolha sua fonte

Se você já escolheu a fonte que deseja usar, pule para a próxima etapa. Caso contrário, certifique-se de escolher uma fonte que você possa usar legalmente em seu blog.

Existem muitos lugares para encontrar fontes gratuitas e pagas, como o Creative Market. Mas verifique o licenciamento antes de adicionar um ao seu site.

Etapa 2. Prepare seus arquivos de fonte da web

Para adicionar uma fonte ao site, você precisará de três formatos de arquivo de fonte:

1. .ttf ou .otf
2. .woff
3. .woff2

Às vezes, você pode ter um tipo de arquivo de fonte da Web e, se tiver, pule esta etapa. Você pode usar apenas isso.

Caso contrário, tenha os três tipos de arquivo prontos para adicionar.

Etapa 3. Envie seus arquivos de fonte para o Squarespace

Vá para Design > CSS personalizado > Gerenciar arquivos personalizados

Aqui você adicionará fontes por meio do botão de upload.

Repita isso para todos os três arquivos ou para o arquivo de fonte da Web, se for o que você tem.

Etapa 4. Nomeie sua fonte personalizada no Squarespace

Depois que a fonte for carregada, você precisa informar ao Squarespace onde e o que ela está com o Editor de CSS.

Utilize o seguinte código:

 @font-face { font-family: 'font-name'; src: url(URL.ttf/.otf), url(URL.woff), url(URL.woff2); }

Pegue isso e adicione as informações relevantes para sua fonte:

• Nome da fonte: substitua isso pelo nome da sua fonte com base no nome do arquivo ou em algo que você se lembrará.
• URLs de fonte: substitua isso pelo(s) URL(s) das fontes que você acabou de enviar. Pegue o URL da sua área de uploads (da mesma forma que você faria para um URL de imagem) e adicione-o no lugar.

Etapa 5. Defina onde e como a fonte personalizada deve ser usada

Por fim, você só precisa informar ao Squarespace onde usar as diferentes fontes em seu site.

Isso pode ser em locais como cabeçalhos ou cabeçalho do site, botões ou até mesmo algo como o bloco de boletim informativo.

Como usar sua fonte em lugares comuns

Depois de enviar sua fonte, você pode começar a fornecer ao Squarespace informações específicas sobre onde usá-la.

Aqui estão alguns exemplos populares e como fazê-lo.

Como alterar as fontes do cabeçalho do site

O cabeçalho do site é a área na parte superior da barra de navegação.

Você pode ter muitos links aqui, um logotipo de texto e talvez um anúncio.

A fonte de todos eles pode ser alterada usando o seguinte trecho de CSS:

 // Site Title // .header-title-text a { font-family: YOURNAME !important; } // Site Navigation // .header-nav-item a { font-family: YOURNAME !important; } // Button // .header-actions-action .btn { font-family: YOURNAME !important; } // Announcement Bar // .sqs-announcement-bar-url a { font-family: YOURNAME !important; }

Lembre-se de substituir YOURNAME pelo nome da sua fonte.

Como alterar as fontes do botão

Outro local popular para usar fontes personalizadas é nos botões do seu site.

Existem três blocos de botões: Pequeno, Médio e Grande. Você pode alterar um ou todos eles com o seguinte código:

 // Small Button // .sqs-block-button-element--small { font-family: YOURNAME !important; } // Medium Button // .sqs-block-button-element--medium { font-family: YOURNAME !important; } // Large Button // .sqs-block-button-element--large { font-family: YOURNAME !important; } // Image Block Button // .image-button a { font-family: YOURNAME !important; }

Lembre-se de substituir YOURNAME pelo nome da sua fonte.

Fixe no Pinterest para poder voltar mais tarde!

(Mais dicas de fontes personalizadas e solução de problemas após o gráfico).

Como alterar as fontes do bloco de boletim informativo

O bloco de Newsletter permite que as pessoas se inscrevam na sua lista de e-mail. Muitas pessoas usam plugins diferentes para isso.

Mas se você usar o bloco no Squarespace, o código a seguir permitirá adicionar uma fonte personalizada.

 // Newsletter Form Title //.newsletter-form-header-title { font-family: YOURNAME !important; } // Newsletter Form Description //.newsletter-form-header-description p { font-family: YOURNAME !important; } // Newsletter Form Fields //.newsletter-form-field-element { font-family: YOURNAME !important; } // Newsletter Form Button //.newsletter-form-button { font-family: YOURNAME !important; } // Newsletter Form Footnote //.newsletter-form-footnote { font-family: YOURNAME !important; }

Lembre-se de substituir YOURNAME pelo nome da sua fonte.

Como alterar as fontes da postagem do blog

Uma das coisas mais populares a se fazer com uma fonte é usá-la para postagens de blog.

Você precisa considerar o título da página, as descrições e os títulos das postagens nas páginas do artigo ao fazer isso.

Você provavelmente vai querer que todos sejam iguais.

 // Blog Page Post Title //.blog-title { font-family: YOURNAME !important; } // Blog Page Post Descriptions //.blog-excerpt p { font-family: YOURNAME !important; } // Blog Page Read More Link //.blog-more-link { font-family: YOURNAME !important; } // Blog Post Entry Titles // .blog-item-title h1.entry-title { font-family: YOURNAME !important; }

Lembre-se de substituir YOURNAME pelo nome da sua fonte.

Como alterar as fontes do bloco de cotação

O último exemplo é alterar o Bloco de Citação para uma fonte diferente.

Isso é usado para citações em postagens, mas também para coisas como depoimentos ou avaliações de clientes.

 // Quote Text //.sqs-block-quote blockquote { font-family: YOURNAME !important; } // Quote Source //.sqs-block-quote .source { font-family: YOURNAME !important; }

Lembre-se de substituir YOURNAME pelo nome da sua fonte.

Você também pode gostar do meu guia de tamanho de imagem do Squarespace.

Problemas de fonte personalizada

Adicionar fontes é um trabalho fácil quando você tem um pouco de CSS. Mas existem alguns erros comuns que são relatados.

Mensagem “Fontes não suportadas” em estilos de site

Ocasionalmente, você pode ver uma mensagem de 'fonte não suportada' em seu site. Isso acontece quando uma Adobe Font é usada e a Adobe a retira.

Na maioria das vezes, o Squarespace o substituirá pela alternativa mais próxima. Mas se não, talvez seja necessário fazer upload de outra fonte para substituí-la.

Minha fonte parece diferente quando estou logado

Às vezes, as pessoas percebem que suas fontes parecem diferentes ao fazer login e ao visualizar o site ao vivo. Normalmente, isso ocorre por causa dos leitores de fontes e como eles visualizam o site.

Se você perceber isso, entre em contato com o suporte do Squarespace e eles poderão analisar as configurações para ver o que precisa ser ajustado.

Não consigo definir minha fonte para um tamanho específico

Os problemas com a definição de um tamanho específico para uma fonte geralmente estão relacionados ao back-end do seu site. Pode ser devido à versão do Squarespace que você está usando.

Portanto, entre em contato com o suporte para obter assistência com o que pode estar errado.

Adicione suas fontes personalizadas ao Squarespace

Com um toque de CSS, você pode adicionar rapidamente arquivos de fonte personalizados ao Squarespace.

Você pode usá-los em lugares diferentes com um pouco de código e ajustar tudo, desde o tamanho até o espaçamento entre letras.

O Editor de estilo facilitou a personalização do seu site além das opções de fonte integradas.

Então, como você pode usar fontes personalizadas para tornar seu site ainda mais inteligente?