Categorias
X
    Clube do Secretariado - Identidade Visual por Ella Jardim
    Portfólio 9 de agosto de 2017

    O Clube das Secretárias é um ideia criada pela Alessandra para “facilitar a vida das secretárias na procura por empresas, prestadores de serviços, cursos e tudo relacionado ao dia a dia delas. O objetivo é ser uma referência nessas buscas, fazer parcerias, construir relacionamentos e direcionar a carreira.”

    Esse é o primeiro cabeçalho cabeçalho rotativo e talvez seja o único que eu não precise acrescentar nenhuma palavra à poesia (música) a qual me inspirei pra criá-lo.


  • Por algum tempo, muitos usavam o método Cufon que é um código Java que convertia sua fonte em imagem, e aí todos que visualizavam seu blog poderiam enxergar essa fonte mesmo sem ela estar instalada no computador do leitor. Mas esse método tem lá seu porém: justamente por a frase ser convertido em imagem, o Google não a enxergava como texto e isso dificultava que seu blog aparecesse nas páginas de busca.

    Atualmente existe outra forma de usar fontes diferentes no blog sem ter necessidade de convertê-la, que é usando Web Fontes (fontes projetadas e licenciadas pra uso na web).

    Como eu já disse algumas vezes por aqui, tudo que estiver pela internet e você for inserir no seu blog, é necessário ser de uma fonte segura, pois caso tenha algum código malicioso pode comprometer seu blog inteiro.

    Pensando nisso, vos trago a fonte mais segura de todas para usar Web Fontes no seu blog: Google Fonts! <3 O acervo de fontes do Google é extremamente grande e simples de usar, não precisando ter grandes conhecimentos técnicos pra inserir a fonte no seu site.

    Escolhendo a fonte ideal

    Como usar fontes diferenciadas no seu blog

    Essa é a tela que irá aparecer ao acessar o acervo de fontes da Google.
    É tudo muito intuitivo, mas vou dar uma explicação rápida (até porque não tem nenhum mistério).

    Em todas as visualizações de fontes, você tem as seguintes opções:

    Google Fontes: a forma mais segura de usar web fontes no seu blog.

    • Sentence: você pode selecionar se você quer que apareça só uma sentença, um parágrafo, uma frase etc. Em costum, você ainda pode escrever o que deseja pra ver como fica. Clicando sobre a frase que já está em visualização você terá o mesmo efeito.
    • Weight: significa a espessura da fonte, ou seja, quão grossa ela é. Por padrão, todas aparecem com weight Regular, mas clicando na setinha, você pode escolher outra espessura (se estiver disponível).
    • Tamanho: você pode deslizar essa barrinha que a visualização irá mudar automaticamente.

    Pra facilitar sua busca, você pode selecionar estilos de fontes na lateral. Basta marcar/desmarcar os itens em Categories.

    Já em Sorting você pode filtrar sua busca por tendência, populares, data de adição ou por ordem alfabética.

    Languages pode deixar como está, mas nosso o idioma utilizada por nós sempre será o Latin.

    Em Number of styles te aconselho a deixar em “All”, mas você pode usar os outros parâmetros pra especificar sua busca, como em Thickness, que você desliza e vai aparecendo só as fontes que tem aquela espessura especifica.

    Ao ter certeza que quer uma determinada fonte, basta clicar nessa bolinha vermelha que todas as fontes selecionadas irão aparecer “Families Selected” automaticamente na parte inferior da tela. Ao clicar nessa barrinha, você pode selecionar “Customize” e irá aparecer a seguinte tela:

    Google Fontes: a forma mais segura de usar web fontes no seu blog.

    É aí que você irá ajustar as fontes que você levar pro seu blog. Te aconselho a selecionar a fonte em itálico, negrito e regular se você for usá-la pro corpo dos seus posts. Mas se for pra títulos, aconselho a selecionar somente a que gostou (ou em itálico, ou em negrito ou regular). Lembre-se de que quanto mais dados seu blog tiver pra carregar, mais lento ele fica.

    É importante você saber que esses números ao lado do estilo da fonte é o valor da espessura que ela tem, a qual você deverá especificar em font-weight, no código que irei explicar mais a frente.

    Instalando a fonte no seu blog

    1. Depois de tudo selecionado, você pode voltar pra “Embed” e copiar o código desse campo cinza.
    2. Código copiado? Basta ir no seu painel do WordPress > Aparência > Editor (caminho para o Blogger: Painel > Modelo > Editar HTML).
    3. Se você usa o WordPress, você procura por header.php na lateral esquerda (usuários do Blogger, podem ir para o próximo passo!).
    4. Agora é só buscar pela tag head (deve estar bem no comecinho do código) e colar logo em seguida.

    Utilizando as fontes

    Você deve inserir o código de estilização no arquivo CSS do seu WordPress (Aparência > Editar CSS), ou após a tag < b:skin > do editor HTML do Blogger (Painel > Modelo > Editar HTML).

    Como você deve ter percebido, nem todas as fontes tem disponíveis o itálico nem negrito, mas no geral, o código é o mesmo utilizado pra qualquer estilização de fonte no CSS.

    Por exemplo, você quer estilizar a tag h1 do seu blog.


    h1 {
    font-family: nome da fonte;
    font-weight: espessura da fonte;
    font-style: italic;
    }

    Em nome da fonte, você vai inserir a fonte que o Google te deu na tela “Families Selected“. Se a fonte tiver espessuras variadas e você quiser usar alguma específica, você deve inserir o valor em font-weight (100, 200, 300 etc.) E se tiver disponível a fonte em itálico, você deve inserir a linha font-style.

    No final, seu código deve ficar mais ou menos assim:


    h1 {
    font-family: 'Droid Serif';
    font-weight: 700;
    font-style: italic;
    }



    ← voltar

    assine a newsletter e receba toda semana muito amor e dicas pra fazer seu blog crescer e deixá-lo ainda mais com sua cara, além de acesso grátis a:

  • Templates de banners
    Vários templates lindos de diversos estilos e temas pra você usar nos posts do seu blog, no Instagram e no Pinterest. É só baixar e editar!
  • E-books & Tutoriais
    Conteúdos exclusivos pra te ajudar em várias áreas do seu blog, sem contar com as listas de tutoriais e códigos pra deixar seu blog mais dinâmico
  • Gráficos diversos
    Se você acha que não tem dom pra montar elementos gráficos pra suas fotos, pode deixar comigo que eu crio e você usa ;)