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

@Font-face

por André Bisewski
| 148.2k xp | 96 posts
Dev Front-end

Boa noite!

Pesquisando a respeito de fontes, encontrei o tal do "@font-face" porém até o momento não encontrei nenhum material que fale a respeito disso, apenas do "google fonts".

Alguém sabe informar se há algum material aqui no Alura falando a respeito disso?

Mas minha dúvida por ora é caso eu queria usar mais de uma fonte como eu devo fazer?

@font-face { font-family: FuturaLT; src: url("FuturaLT.eot"); src: url("FuturaLT.woff"); } @font-face { font-family: FuturaLT-Book; src: url("FuturaLT-Book.eot"); src: url("FuturaLT-Book.woff"); } @font-face { font-family: FuturaLT-Light; src: url("FuturaLT-Light.eot"); src: url("FuturaLT-Light.woff"); }

Esta correto eu fazer dessa forma? E tem algum problema eu colocar todos eles no início do CSS?

Abraço!

3 respostas
por Natan Souza
| 2115.9k xp | 3725 posts
Instrutor Product Design Lead

Oi André, tudo bem?

Com relação ao material, aqui na apostila de HTML/CSS da Caelum tem uma explicação sobre o font-face.

Agora a outra dúvida, não consegui ver o código 100%, me perdi devido a formatação, mas aparentemente a forma está correta sim.

Se quiser ver outro exemplo:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* gambi para IE9 */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Browsers bem modernos */
       url('webfont.woff') format('woff'), /* Browser modernos */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* iOS antigo */
}

Fonte

Espero ter ajudado,

Abcs!

por André Bisewski
| 148.2k xp | 96 posts
Dev Front-end

Pois é, eu esqueci de adicionar a opção de "inserir código".

Caso então eu queira usar mais de uma fonte, uso quantos "@font-face" necessários, da seguinte forma:

@font-face { 
    font-family: FuturaLT; 
    src: url("FuturaLT.eot");
    src: url("FuturaLT.woff");
} 

@font-face {
    font-family: FuturaLT-Book;
    src: url("FuturaLT-Book.eot");
    src: url("FuturaLT-Book.woff");
}

@font-face {
    font-family: FuturaLT-Light;
    src: url("FuturaLT-Light.eot");
    src: url("FuturaLT-Light.woff");
}

Correto?

solução!
por Natan Souza
| 2115.9k xp | 3725 posts
Instrutor Product Design Lead

Isso mesmo, André!