Free content

Bem-vindo ao WASD.in!

O WASD Fórum é um ambiente virtual feito com o intuito de compartilhar ideias e disponibilizar conteúdos de diversas áreas, sendo assim um Fórum bem democrático no que diz respeito aos Direitos Humanos. A principal finalidade do fórum é coletar e compartilhar dados, visando espalhar o conhecimento para todos aqueles que desejam obter de forma legal, ressaltando que não trabalhamos com pirataria nem afins. Leia as Regras Gerais para evitar constrangimentos.

Você não está conectado. Conecte-se ou registre-se

Adicionando uma fonte externa em seu WebSite

Ver o tópico anterior Ver o tópico seguinte Ir para baixo Mensagem [Página 1 de 1]

#1

AndréGama
AndréGama
Membro
Olá Convidado, bom, esse tutorial não é meu, estava na PFF procurando alguns tutoriais de HTML e CSS  e achei um do Example, que eu admiro assim como o Je4n, e decidi postar aqui, porque eu não vi nenhum tutorial sobre isso, acho que todos sabem mas vamos lá, deve ter alguém que não saiba fazer.

Fonte utilizada no tutorial: OpenSans Light, [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] para baixar.

Crie sua div e CSS.

HTML:

Código:
<div class="tutorialfonte">TEXTO DE TESTE</div>


CSS:

Código:
@font-face {
font-family: OpenSans;
font-style: normal;
font-weight: normal;
src: url(http://www.maniateenfm.com.br/ppf/OpenSans-Light.ttf);
}
.tutorialfonte {
font-family: OpenSans;
}

O CSS para adicionar a fonte é:

Código:
@font-face {
font-family: (NOME DA FONTE);
font-style: normal;
font-weight: normal;
src: url(LINK DA FONTE);
}
.tutorialfonte {
font-family: NOME DA FONTE;
}


3 - Antes e depois:

Antes:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Depois:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

HTML Pronto:


Código:
<html>
    <head>
        <title>SEU TITULO</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css.css" rel="stylesheet" type="text/css">
    </head>
    <style type="text/css">
@font-face {
font-family: OpenSans;
font-style: normal;
font-weight: normal[size=11][/size]
src: url(http://www.maniateenfm.com.br/ppf/OpenSans-Light.ttf);
}
.tutorialfonte {
font-size: 50px;
font-family: OpenSans;
}
    </style>
    <body>
      <div class="tutorialfonte">Texto de textes</div>
    </body>
</html>






Créditos a; Example por disponibilizar o tutorial.



Última edição por AndréGama em Dom Mar 01, 2015 5:53 pm, editado 1 vez(es) (Motivo da edição : Correção do HTML e CSS - BBCodes pelo código.)

#2

Li0n
Li0n
Membro
funciona mas não recomendo, pois irá diminuir a velocidade do site.
Recomendo usar o google fonts. OFF: só comentei para nao ser mais turista

#3

Je4n
Je4n
Administrador
Olá, o código está todo bagunçado com bbcodes no meio. Tente arrumar.

#4

AndréGama
AndréGama
Membro
BumbumGuloso escreveu:funciona mas não recomendo, pois irá diminuir a velocidade do site.
Recomendo usar o google fonts. OFF: só comentei para nao ser mais turista

- Como falei, aquele site foi usado no tutorial do Example, e eu peguei esse tutorial lá, você pode hospedar em seu site ou usar a Google Fonts, tanto faz.

Je4n escreveu:Olá, o código está todo bagunçado com bbcodes no meio. Tente arrumar.

- Código arrumado srt.Je4n. Obrigado pela informação.

#5

Conteúdo patrocinado

Ver o tópico anterior Ver o tópico seguinte Ir para o topo Mensagem [Página 1 de 1]


Permissões neste sub-fórum
Não podes responder a tópicos