Updates +
Devido ao hiatus, não estamos moderando nem respondendo nenhum comentário, porém o blog continua aberto para visualização. Obrigada pela visita ♡

4 de outubro de 2014

Adicionar fontes não padrões no blog


    Olá mi amigos! Hoje eu estava arrumando o Dotted Lines pra disponibilizar pra vocês (visto que algo aconteceu com a fonte que eu usei nos títulos e tudo ficou feio :c) e estava procurando uma maneira de conseguir uma fonte parecida com a silkscreen para utilizar. Eu tentei de todas as maneiras usar todos os font-face que eu conheço, porém nenhum deles dá certo. Foi aí que alguém comentou em um website sobre um lugarzinho mágico chamado Typekit. Vamos aprender a usar essa maravilha?
    Então, primeiramente: Typekit é um site com planos pagos, isto é, para poder utilizar todos os seus recursos, é preciso pagar R$100 per month, porém, é possível usufruir de uma pequena parte do que o site oferece sem nenhum custo. Claro que número de fontes disponíveis nesse caso é limitado, mas ainda assim é melhor que nada (ou font-faces problemáticos que excluem sua fonte sem mais nem menos /chora). De qualquer forma, vamos dar início ao tutorial.
    Bom, você vai até esse site (https://typekit.com/ ), e lá, você desce a página até encontrar a parte onde é explicado os planos e preços e, lá, clique na primeira opção, "Free Trial Plan".


    Após clicar em "Try for free", você deverá logar com seu ID da Adobe. Caso você não possua um, basta cria-lo gratuitamente clicando em "Get an Adobe ID".



    Como eu já possuía um ID, após eu ter feito o login, a página abaixo abriu, porém, se você não possui um ID e criou um, não sei qual página abre, creio que seja a mesma. (Não é necessário checar nenhum email da adobe, sua conta é ativada automaticamente). De qualquer forma, mesmo que não seja a mesma página, você pode acessar a página da qual precisaremos em um link direto (https://typekit.com/fonts).




    Clique em Start browsing fonts, e, finalmente, você pode escolher a fonte que quer usar. Existem 265 fontes disponíveis para esse teste gratuito. Segue abaixo uma review completa de toda a página plus um tutorial de como usar as fontes em layouts (lembrando que o próprio typekit já disponibiliza um tutorial como este em inglês, disponível em http://help.typekit.com/customer/portal/articles/6780-adding-fonts-to-your-site)



    Na coluna lateral marrom na imagem acima, estão os filtros. Com eles você pode filtrar as fontes de sua galeria, a fim de que somente as que batem com as configurações de filtro sejam mostradas a você e que, assim, você encontre com mais facilidade aquilo que procura. Na parte principal da página ficam, é claro, as fontes da sua galeria e, no topo, fica a barra onde encontram-se links úteis, tais como sua conta, configurações de conta, menu, suporte, Aprenda&Apoie e etc,...


    Após clicar em +use fonts, como indicado na imagem acima, uma janelinha aparecerá. Nela, clique em create a new kit

    Após clicar em create a new kit, uma janela pop-up será aberta no seu navegador, nela, defina o nome de seu kit e o url do blog no qual deseja instalar as fontes (ou a fonte) que escolheu. Clique, em seguida, no quadrado verde no canto inferior direito da janela.


    Após clicar em continue, uma nova janela pop-up será aberta em seu navegador. Nela, o código HTML da sua fonte estará em uma caixinha. Copie esse código e cole ele após a tag <head> do HTML do seu blog (encontre-o no painel do blogger: Modelo > HTML). Feito isso, volte até a janela pop-up e clique no mesmo botão da janela anterior.


     Pronto, você já instalou a fonte em seu layout! Mas, e agora, como usa-la? Bem, primeiramente você precisa saber que nome deve usar para sua fonte no CSS. Descobrir isso é muito fácil. Após ter clicado no último "Continue", novamente, uma janela abriu, certo? Bom, nessa janela, existem vários links. Clique no pequeno link na lateral esquerda "Using fonts in CSS".
    Clicando ali outra janela abrirá dentro desta própria e ali existem três códigos. Copie o primeiro.



    Volte até o HTML do seu blog e procure pelo CSS do elemento no qual deseja utilizar sua fonte. Por exemplo, se você quer utilizar no título das postagens, vá até o elemento do CSS correspondente a fonte dos títulos. No caso do blogger, tal elemento é .h3.post-title a {, dentro de seu elemento, escreva font-family: e logo em seguida (na mesma linha) cole o nome da sua fonte (que você copiou anteriormente). Para funcionar corretamente, após o nome da fonte, adicione um ponto e vírgula, sendo assim, seu código vai ficar parecido com este (seguindo o exemplo de título das postagens):


    Pronto! Você sabe utilizar e instalar suas fontes agora. Espero que tenha sido útil para alguns c: Caso queiram mais fontes, é sempre uma opção pagar a taxa anual de cem reais, até porque, se realmente for valer a pena para você (no sentido de ser extremamente útil, de você usar com frequencia e etc,...) então, acho que não é tão caro assim.
    Bom, o próximo post é o nosso layout free, juro juradinho hehe, eu tive de arrumar algumas fontes que foram arruinadas pelo font-face problemático o que me tirou algum tempo a procura de uma fonte que fosse pelo menos parecida com a última :c De qualquer forma, nos vemos em breve!


No plano de teste grátis do typekit, só é possível criar um kit, por conta. Isto não significa que você necessariamente precisa de centenas de contas. Basta, ao invés de criar um novo kit toda vez que querer utilizar uma fonte do site, inserir a nova fonte desejada no mesmo kit de sempre. Para isso, contrariando minhas explicações no passo seis (do post inteiro, desde como se entra no site), clique no botão cinza "Add to an existing kit" e selecione o seu kit já existente. Toda vez que quiser saber o código de seu kit, clique em Embed Code, link localizado no canto superior direito; em verde, para que a caixa com o HTML das suas fontes apareça na tela

Um comentário:

  1. Ótimo post! Já estou usando as fontes. Obrigada =)

    ResponderExcluir