Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Dúvidas em relação ao font-family

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web

por Bruno Giorgione
| 167.2k xp | 134 posts
Analista Desenvolvedor ASP.NET C#

Boa tarde, Tenho as seguintes dúvidas de como aplicar o font-family de maneira correta.

Vamos supor que eu esteja trabalhando com a font "Proxima Nova" do fonts.com Dessa font eu importei no meu projeto a font regular(Proxima N W01 Reg), a bold(Proxima N W01 Bold) e o itálico( Proxima N W01 Reg It).

Caso eu precise colocar um título em negrito ou um texto em negrito, eu poderia usar o codigo a seguir:

Título:

h1,
    font-family: 'Proxima N W01 Bold', Helvetica, Arial, Sans-Serif;
}

Textos em geral:

strong{
    font-family: 'Proxima N W01 Bold';
}
.italic {
    font-family: 'Proxima N W01 Reg It';
}

Esta certo essa maneira de trabalhar? Pois como tem uma font em bold, eu não preciso usar o font-weight correto?

7 respostas
por Sérgio Lopes
| 604.1k xp | 913 posts
Instrutor CTO na Alura

Ate funciona, mas não está correto. O correto é usar os font-weight certinhos tanto na declaracao da fonte quando na hora de usar.

Na hora de importar a fonte, as diferentes variacoes precisam estar em font-weights nao no font-family. Exemplo simples:

@font-face {
   font-family: 'Proxima Nova';
   font-weight: normal;
   src: url (ProximaNovaNormal.woff);
}

@font-face {
   font-family: 'Proxima Nova';
   font-weight: bold;
   src: url (ProximaNovaBold.woff);
}

Aí na hora de usar vc coloca sempre font-family: Proxima Nova mas variando o font-weight de acordo.

por Bruno Giorgione
| 167.2k xp | 134 posts
Analista Desenvolvedor ASP.NET C#

Boa tarde Sérgio, Muito obrigado pelo o seu retorno. Entendi parcialmente o código apresentado. No meu caso estou importando as fontes via link no head( 

<link type="text/css" rel="stylesheet" href="//fast.fonts.net/cssapi/codigo das fonts)

Está errado essa abordagem? Ou eu sempre importo as fonts dentro do css?

Como ficaria um exemplo de formatação de todos os h1 para bold e para todos os textos que eu precisar que fique em bold?

por Sérgio Lopes
| 604.1k xp | 913 posts
Instrutor CTO na Alura

Nesse caso o serviço que vc esta usando (fast.fonts.net) está gerando o @font-family pra voce.

Ai precisa ver se ele esta gerando corretamente (abre a URL do CSS e analisa). Se nao estiver, precisa ver se a ferramenta suporta alguma forma de arrumar isso ou senao nao tem muito jeito :)

No exemplo que mandei, vc faria o h1 bold com:

h1 {
  font-family: Proxima Nova;
  font-weight: bold;
}
por Bruno Giorgione
| 167.2k xp | 134 posts
Analista Desenvolvedor ASP.NET C#

Olá Sérgio, Sinceramente? Não sei se está certo, eu abri em tempo de execução do projeto e está vindo isso:

@import url(/t/1.css?apiType=css&projectid=fe22df7c-58ca-4005-9984-751637f9d208);
@font-face{
font-family:"Proxima N W01 Reg";
src:url("/dv2/2/7e90123f-e4a7-4689-b41f-6bcfe331c00a.eot?d44f19a684109620e484147ea090e8187841bec9491a39d5f52c56125248e0330b19b529b6b6117bb7e6450eff0ad85f87c89ee556155e1f5693335554d28c7b4be60eaecedc26b5f44e7590f7&projectId=fe22df7c-58ca-4005-9984-751637f9d208#iefix");
src:url("/dv2/2/7e90123f-e4a7-4689-b41f-6bcfe331c00a.eot?d44f19a684109620e484147ea090e8187841bec9491a39d5f52c56125248e0330b19b529b6b6117bb7e6450eff0ad85f87c89ee556155e1f5693335554d28c7b4be60eaecedc26b5f44e7590f7&projectId=fe22df7c-58ca-4005-9984-751637f9d208#iefix") format("eot"),url("/dv2/14/64017d81-9430-4cba-8219-8f5cc28b923e.woff2?d44f19a684109620e484147ea090e8187841bec9491a39d5f52c56125248e0330b19b529b6b6117bb7e6450eff0ad85f87c89ee556155e1f5693335554d28c7b4be60eaecedc26b5f44e7590f7&projectId=fe22df7c-58ca-4005-9984-751637f9d208") format("woff2"),url("/dv2/3/e56ecb6d-da41-4bd9-982d-2d295bec9ab0.woff?d44f19a684109620e484147ea090e8187841bec9491a39d5f52c56125248e0330b19b529b6b6117bb7e6450eff0ad85f87c89ee556155e1f5693335554d28c7b4be60eaecedc26b5f44e7590f7&projectId=fe22df7c-58ca-4005-9984-751637f9d208") format("woff"),url("/dv2/1/2aff4f81-3e97-4a83-9e6c-45e33c024796.ttf?d44f19a684109620e484147ea090e8187841bec9491a39d5f52c56125248e0330b19b529b6b6117bb7e6450eff0ad85f87c89ee556155e1f5693335554d28c7b4be60eaecedc26b5f44e7590f7&projectId=fe22df7c-58ca-4005-9984-751637f9d208") format("truetype"),url("/dv2/11/ab9cd062-380f-4b53-b1a7-c0bec7402235.svg?d44f19a684109620e484147ea090e8187841bec9491a39d5f52c56125248e0330b19b529b6b6117bb7e6450eff0ad85f87c89ee556155e1f5693335554d28c7b4be60eaecedc26b5f44e7590f7&projectId=fe22df7c-58ca-4005-9984-751637f9d208#ab9cd062-380f-4b53-b1a7-c0bec7402235") format("svg");
}
@font-face{
font-family:"Proxima N W01 Bold";
src:url("/dv2/2/fbc6b03a-b3a1-427c-a884-053deca3a53c.eot?d44f19a684109620e484147ea090e8187841bec9491a39d5f52c56125248e0330b19b529b6b6117bb7e6450eff0ad85f87c89ee556155e1f5693335554d28c7b4be60eaecedc26b5f44e7590f7&projectId=fe22df7c-58ca-4005-9984-751637f9d208#iefix");
src:url("/dv2/2/fbc6b03a-b3a1-427c-a884-053deca3a53c.eot?d44f19a684109620e484147ea090e8187841bec9491a39d5f52c56125248e0330b19b529b6b6117bb7e6450eff0ad85f87c89ee556155e1f5693335554d28c7b4be60eaecedc26b5f44e7590f7&projectId=fe22df7c-58ca-4005-9984-751637f9d208#iefix") format("eot"),url("/dv2/14/0d416408-95c6-4ad7-b08d-e60573d3b37d.woff2?d44f19a684109620e484147ea090e8187841bec9491a39d5f52c56125248e0330b19b529b6b6117bb7e6450eff0ad85f87c89ee556155e1f5693335554d28c7b4be60eaecedc26b5f44e7590f7&projectId=fe22df7c-58ca-4005-9984-751637f9d208") format("woff2"),url("/dv2/3/d999c07b-a049-4eb5-b8a6-4f36ae25e67e.woff?d44f19a684109620e484147ea090e8187841bec9491a39d5f52c56125248e0330b19b529b6b6117bb7e6450eff0ad85f87c89ee556155e1f5693335554d28c7b4be60eaecedc26b5f44e7590f7&projectId=fe22df7c-58ca-4005-9984-751637f9d208") format("woff"),url("/dv2/1/4d4a75f5-d32a-4a09-8665-133afd39cc37.ttf?d44f19a684109620e484147ea090e8187841bec9491a39d5f52c56125248e0330b19b529b6b6117bb7e6450eff0ad85f87c89ee556155e1f5693335554d28c7b4be60eaecedc26b5f44e7590f7&projectId=fe22df7c-58ca-4005-9984-751637f9d208") format("truetype"),url("/dv2/11/8152bc4e-d700-4c78-b6be-326893e6f53f.svg?d44f19a684109620e484147ea090e8187841bec9491a39d5f52c56125248e0330b19b529b6b6117bb7e6450eff0ad85f87c89ee556155e1f5693335554d28c7b4be60eaecedc26b5f44e7590f7&projectId=fe22df7c-58ca-4005-9984-751637f9d208#8152bc4e-d700-4c78-b6be-326893e6f53f") format("svg");
}
@font-face{
font-family:"Proxima N W01 Reg It";
src:url("/dv2/2/bc15a635-a09b-40d1-a5c4-70310166177d.eot?d44f19a684109620e484147ea090e8187841bec9491a39d5f52c56125248e0330b19b529b6b6117bb7e6450eff0ad85f87c89ee556155e1f5693335554d28c7b4be60eaecedc26b5f44e7590f7&projectId=fe22df7c-58ca-4005-9984-751637f9d208#iefix");
src:url("/dv2/2/bc15a635-a09b-40d1-a5c4-70310166177d.eot?d44f19a684109620e484147ea090e8187841bec9491a39d5f52c56125248e0330b19b529b6b6117bb7e6450eff0ad85f87c89ee556155e1f5693335554d28c7b4be60eaecedc26b5f44e7590f7&projectId=fe22df7c-58ca-4005-9984-751637f9d208#iefix") format("eot"),url("/dv2/14/129d49d6-5492-4ed1-96f7-0528c6d53abc.woff2?d44f19a684109620e484147ea090e8187841bec9491a39d5f52c56125248e0330b19b529b6b6117bb7e6450eff0ad85f87c89ee556155e1f5693335554d28c7b4be60eaecedc26b5f44e7590f7&projectId=fe22df7c-58ca-4005-9984-751637f9d208") format("woff2"),url("/dv2/3/9c69c878-2255-4027-8632-ed3635cddf45.woff?d44f19a684109620e484147ea090e8187841bec9491a39d5f52c56125248e0330b19b529b6b6117bb7e6450eff0ad85f87c89ee556155e1f5693335554d28c7b4be60eaecedc26b5f44e7590f7&projectId=fe22df7c-58ca-4005-9984-751637f9d208") format("woff"),url("/dv2/1/b7eb3871-e910-4522-9982-effb425a2714.ttf?d44f19a684109620e484147ea090e8187841bec9491a39d5f52c56125248e0330b19b529b6b6117bb7e6450eff0ad85f87c89ee556155e1f5693335554d28c7b4be60eaecedc26b5f44e7590f7&projectId=fe22df7c-58ca-4005-9984-751637f9d208") format("truetype"),url("/dv2/11/a0d89860-20e5-4bc0-b6c5-eae8ae0ebbbf.svg?d44f19a684109620e484147ea090e8187841bec9491a39d5f52c56125248e0330b19b529b6b6117bb7e6450eff0ad85f87c89ee556155e1f5693335554d28c7b4be60eaecedc26b5f44e7590f7&projectId=fe22df7c-58ca-4005-9984-751637f9d208#a0d89860-20e5-4bc0-b6c5-eae8ae0ebbbf") format("svg");
}

Posso aplicar a formatação do h1 da maneira que vc mostrou? rsrss

por Sérgio Lopes
| 604.1k xp | 913 posts
Instrutor CTO na Alura

É, ta estranho mesmo.

Se vc precisa usar essa ferramenta mesmo, entao faz do jeito que vc comentou la no inicio.

Mas ha ferramentas melhores pra gerar esse CSS de fontes. Por exemplo o Google Fonts. Exemplo: https://fonts.googleapis.com/css?family=Montserrat:400,700

por Bruno Giorgione
| 167.2k xp | 134 posts
Analista Desenvolvedor ASP.NET C#

Na verdade os designers bateram o martelo nessa font, acho que pelo motivo fonts.com ser pago e ter que atrelar as fonts ao projeto em questão, deve vir essas paradas criptografadas. Mas bom saber que vc já me deu uma direção. Obrigado mais uma vez abs :)

solução!
por Bruno Giorgione
| 167.2k xp | 134 posts
Analista Desenvolvedor ASP.NET C#

Olá Sergio, acabei dando mais uma procurada aqui na net, e encontrei esse link 

http://blog.fonts.com/2013/11/grouping-web-fonts-by-family/

Aqui ele ensina a usar o fonts.com, no caso na minha dúvida basta usar o nome "Proxima N W01 Bold" com font-weight:normal para ficar bold mesmo, não sendo necessário configurar o font-weight. Veja um exemplo:

p {font-family:'Metro Nova W01 Regular'; font-size:2em;}
p strong {font-family:'Metro Nova W01 Bold'; font-weight:normal;}
p em {font-family:'Metro Nova W01 Italic'; font-style:normal;}