27 fevereiro 2014

Como colocar qualquer fonte no blog?


Oi! Eu estive a ler as respostas àquilo que eu tenho feito sobre "O que achas do Bibokices?" e já vi muitas coisas em que podia melhorar! Obrigado a todos e se ainda não respondeste ainda podes responder!
Uma coisa que eu adoro personalizar no blog são as fontes! Há uma tão fofinhas e cuteee e umas com um ar tão jornalístico. Eu antes colocava através do Google Fonts só que tinha poucas e não podia usar as que eu criava, com um tempo descobri um método de colocar as que eu quisesse sozinha, e a seguir encontrei um tutorial muito mais fácil do que como fazia antes! É através do @font-face
Clica em ler mais para aprenderes como fazer!
Dificuldade: Média



Vais precisar de:
-Ter o código @font-face
-Ter a fonte que gostas downloadeada no PC
-Abrir este site: http://www.tumblr.com/themes/upload_static_file

O código necessário é este:
@font-face {  font-family: NOME DA FONTE;  src: url(URL DE ONDE HOSPEDASTE);}

Agora cola esse código acima de ]]></b:skin
Depois no site de hospedagem que referi acima hospeda a tua fonte. Vai aparecer algo do tipo isto:

Copia esse código e cola onde diz URL DE ONDE HOSPEDASTE escolhe o nome que quisseres para a fonte e podes usar!
Alguns exemplos:


@font-face { font-family: "honey"; src: url(http://static.tumblr.com/fmvhucp/r9Cn17b5u/honeyscript-light.ttf); }


@font-face { font-family: "running"; src: url(http://static.tumblr.com/fmvhucp/2RQmy7wug/running_for_a_cause.ttf); }


@font-face { font-family: "amati"; src: url(http://static.tumblr.com/fmvhucp/ILHmy7tju/amaticsc-regular.ttf); }


@font-face { font-family: "are you"; src: url(http://static.tumblr.com/fmvhucp/at7my7ofj/are_you_freakin__serious.ttf); }


@font-face { font-family: "love"; src: url(http://static.tumblr.com/fmvhucp/2Htmyccu5/amandarae.ttf); }


Exemplos by: Jackie Dream

Agora para utilizares, por exemplo, no titulo do post procura por este código
E antes da chavinha cola:

font-family: "NOME DA FONTE AQUI";

O nome tem que ser o mesmo que colocaste acima, senão não resulta, apaga o font: $(post.title.font); e já está pronto!


Kisses fofos da Bia *3*
Alguma dúvida é só comentar.

Sem comentários:

Enviar um comentário