9.8.13

@font-face ::: use e abuse!



Hey, olá para todos!

Estou cheia, com um monte mesmo, de trabalhos para escola! Acho que vou precisar de alguém que me ajude e poste aqui. Mas isso irei pensar mais tarde, em quanto isso vamos viver felizes =D 
E hoje eu estou muito feliz, muito feliz mesmo eu baixei o topaz para meu PhotoShop haha. Ah e em breve teremos um jogo valendo divulgação, aguardem rsrs e participem, vai ser bem legal! ♥♥♥

Agora vamos falar sobre o assunto da postagem. Enfim, como vocês podem ver no título vou falar da propriedade @font-face que te permite usar qualquer fonte no blog. Sabe, não adianta você ter somente o nome da fonte no seu computador, e pras outras pessoas que não a tenha instalada? O layout fica todo feio no nosso computador mesmo que no seu esteja tudo arrumadinho. Então use @font-face além de útil deixa seu blog + bonito :3

Comecei a usar a font-face desde meu layout anterior, eu usava uma fonte chamada 'Harrington' acho que poucas pessoas conhecem essa fonte. E tipo eu usava ela pra tudo, mas fui visitar meu blog pelo pc da minha tia(que por sinal quase não tem fontes) ele ficou horroroso aos meus olhos ele ficou com a fonte padrão do blogger a 'georgia' ninguém merece né. E foi ai que achei a tal de font-face que te permite usar qualquer fonte no blog, sem que o computador de alguém fique feio.


Estrutura Básica

Antes lembre-se: Todas as @font-face's são coladas no css ou seja ACIMA de ]]></b:skin>
A propriedade básica, que te permite usar a fonte no formato .ttf Veja o modelo:
@font-face {font-family: "NOME_DA_FONTE"; src: url('URL_DA_FONTE');} 
 Viram? Bem fácil né, mas onde encontrar o url da fonte, já que a maioria vem zipada? 

1. Vá na sua aréa de trabalho e clique em Computador, ou qualquer outra pasta que esteja ligada com o Windows. Depois vá em Disco Local Windows > Veja o print

2. Clique em Windows e procure a pasta fonts chegando lá você verá todas as suas fontes veja: 

3. Procure a fonte que você quer usar e clique nela com o botão direito do mouse, e depois clique em copiar. Agora vá na sua Areá de trabalho(tela inicial) e com o botão direito do mouse clique em algum lugar vazio e colar. 

4. Vá no static tumblr, mas antes você precisa ter conta, então se você não tem crie uma! Clique em Escolher Arquivos, vá na sua área de trabalho e selecione a fonte que você colou.

Depois é só clicar em carregar, logo o tumblr te dará um link imediato, veja por exemplo o meu:

Na verdade eu hospedei uma imagem mais é exatamente a mesma coisa com as fontes, em vez do .png estria .tff ou .wof sei-lá o formato de fonte que você tiver.

E depois e só mudar o código lá, o que se pede, mas lembre-se de colocar tudo certinho e bonitinho.



Estrutura Avançada

Como vocês sabem o Internet Explorer não funciona do mesmo jeito que o Google Chrome. Por isso que temos vários tipos de fontes, por exemplo quem usa o Mozila Firefox não aceita o formato True Type Font(.ttf) por isso que temos essa outra estrutura avançada, seria mais ou menos assim:


@font-face {   font-family: 'Helvetica Neue';   src: url('HelveticaNeue.eot');   src: url('HelveticaNeue?#iefix') format('embedded-opentype'),     url('HelveticaNeue.svg#Helvetica Neue') format('svg'),     url('HelveticaNeue.ttf') format('truetype');   font-weight: normal;   font-style: normal; }

Claro que é praticamente impossível deixar sua fonte em todos os formatos, então super aconselho a estrutura básica além de simples é bem fácil. O tutorial ficou super grande, mas esta super fácil de se entender. Próximo post teremos o download do Google Chrome aguardem muahahahahaha.

5 comentários:

  1. isso vai me ajudar mt ehueheuheuehu eu n sabia fazer agora eu sei o/

    ResponderExcluir
    Respostas
    1. Ahuassau que legal :) essas font's-face's são realmente muito úteis!
      Obrigada

      Excluir
  2. Obrigada Rafah :3 Isso vai ajudar baaastante hahahha (ainda pq as fontes do blogger não são muito bonitas) Thanks :)

    ResponderExcluir

Hey, que bom que irá comentar! Mas, leia as regras;

- Comente sobre o post >3<
- Deixe o link do seu blog no final, retribuirei
- Respondo todos os comentários
- Retribuo todos os comentários
- Não comente besteira, nem seja racista :3
- Criticas construtivas são bem vindas :D
- Sigo de Volta todos que me seguirem primeiro.