Daviwp | Desenvolvedor Web | WordPress Developer

Como gerar fonts personalizada para seu tema

Olá pessoal entrando com mais um post legal como gerar fonts personalizada para seu tema, muitos ja conhece mas o mais legal é que vou mostrar duas dicas utilizando o google web fonts e o site fontface primeiro vamos aprender como utilizar as fonts do google

01 – Vamos acessar o site Google Web Fonts

02 – Escolha a fonte desejada feito isso a sua direita clique no botão azul (Add to Collection) depois use abaixo no box azul.

03 – Depois pegue um codigo parecido este. este codigo abaixo é a chamada da fonte utilizando o google cole no seu header abaixo da tag title do seu html

<link href='http://fonts.googleapis.com/css?family=Skranji' rel='stylesheet' type='text/css'>

04 – Agora mais abaixo você pega um outro codigo parecido este abaixo. o mesmo é o seu style aplica la onde vc deseja utilizar essa fonte se for em tudo aplica na tag body ou h2, tag a, tag p etc feito tudo isso sua fonte ja esta pronta para ser utilizada.

font-family: 'Skranji', cursive;

Utilizando o FontFace

Bom esse outro passo é bem simples basta ja ter a fonte que deseja gerar ela para web a fonte que vai utilizar em seu site as vezes achamos sites na internet com fonts irada e muitos não sabe como aquele cara fez para colcoar aquela fonte será que é imagem não rs ele pegou a fonte do computador ou baixou da propria internet e fez esse procedimento que vamos fazer preste bem ateção

01 – Vamos abrir o site Site Fontface

02 – Depois de aberto o site clique em Basic pois vamos simplesmente so gerar a fonte ok

03 – Agora clique em add fonts, procure a fonte no seu computador que foi escolhida para gerar achou? selecione e precione abrir feito isso aguarde a font ser gerada, note que uma barrinha azul esta crecendo espere os 100%, logo abaixo aparecera download clique.

04 – Agora aguarde o download e baixe para sua area de trabalho o arquivo gerado no site descompacta pegue todos os arquivos dentro dessa pasta copia e leve para uma pasta dentro do seu tema com nome de fonts por exemplo, jogue tudo dentro desta pasta ok.

05 – Abra o arquivo stylesheet.css que esta dentro da pasta que acabou de criar fonts para ficar mais facil copia todo o codigo desse arquivo e cole no seu style.css o estilo principal do seu tema ok como nos criamos uma pasta fonts e todos os arquivos da nossa font esta la dentro agora vamos passar o caminho para nossa pasta que vai ficar assim veja abaixo.

@font-face {
    font-family: 'UniSansBookRegular';
    src: url('fonts/uni_sans_book-webfont.eot');
    src: url('fonts/uni_sans_book-webfont.eot?iefix') format('eot'),
         url('fonts/uni_sans_book-webfont.woff') format('woff'),
         url('fonts/uni_sans_book-webfont.ttf') format('truetype'),
         url('fonts/uni_sans_book-webfont.svg#webfontGG7CwMQf') format('svg');
    font-weight: normal;
    font-style: normal;
 
}

Pronto espero ter esclarecido abraço até a proxíma
Obs: esses codigos acima são exemplos.
Post: DaviWP