Ir para conteúdo

POWERED BY:

André Gonçalves Fernandes

CSS @font-face

Por , em Desenvolvimento frontend

Recommended Posts

André Gonçalves Fernandes    0

André Gonçalves Fernandes
Postado

 

O @font-face  descrito abaixo deveria atingir o objetivo do Olá Mundo, e não do texto a seguir do Olá Mundo

 

Alguém pode me mostrar onde está o erro.

 

image.png.d0810caafad16996e0ceb06915963089.png

Título

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur doloribus dolor eveniet eligendi alias debitis blanditiis. Laborum tenetur, repudiandae accusantium architecto modi autem amet excepturi accusamus doloremque repellendus placeat hic.

 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fontes Externas</title>
    <style>
        @font-face  {
           font-family:'Love';
           src: url('fonts/love larry.otf') format ('opentrype'), url('fonts/love larry.ttf') format ('truetrype');
           font-weight: normal;
           font-style: normal;
        }
           /*
             Tipos de format()
             -opentype (otf)
             -truetype (ttf)
             -embedded-opentype
             -trutype-aat (Apple Advanced Typografy)
             -svg
           */
        
        body {
            font-family: Arial, Helvetica, sans-serif;
        }
 
        h1 {
            font-family: 'Love', Times, serif;
            font-size: 3em;
            font-weight: normal;
        } 
 
    </style>
</head>
<body>
         <h1>Título</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur doloribus dolor eveniet eligendi alias debitis blanditiis. Laborum tenetur, repudiandae accusantium architecto modi autem amet excepturi accusamus doloremque repellendus placeat hic.</p>
</body>
</html>
 
 
 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Omar~    87

Omar~
Postado 
/*
font-family: Algum nome para representar-la no CSS. É aconselhavel que use o nome mesmo da fonte
src: Local de armazenamento do arquivo. É aconselhavel que use somente arquivos ".ttf"
*/
@font-face {font-family: 'NOME_REPRESENTATIVO'; src: url('../fonts/ARQUIVO_DE_FONTE.ttf')}

.fonte_personalizada {
  font-family: 'NOME_REPRESENTATIVO' /* tudo que que tiver esse classificador será com a fonte anexada */
}

  

<h1 class="fonte_personalizada">Olá mundo</h1>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

André Gonçalves Fernandes    0

André Gonçalves Fernandes
Postado
Em 25/02/2021 at 16:00, Omar~ disse: 

/*
font-family: Algum nome para representar-la no CSS. É aconselhavel que use o nome mesmo da fonte
src: Local de armazenamento do arquivo. É aconselhavel que use somente arquivos ".ttf"
*/
@font-face {font-family: 'NOME_REPRESENTATIVO'; src: url('../fonts/ARQUIVO_DE_FONTE.ttf')}

.fonte_personalizada {
  font-family: 'NOME_REPRESENTATIVO' /* tudo que que tiver esse classificador será com a fonte anexada */
}

  


<h1 class="fonte_personalizada">Olá mundo</h1>

 

Omar, Já tinha visto, mas só agora estou te dando um retorno. Muito Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • Afrânio Costa
      Fontes especiais em e-mail MKT
      Por Afrânio Costa
      Estou precisando descobrir uma forma de usar fontes que não seja de sistema em e-mails Marketing. Já tentei com @import e @font-face mas as fontes chegam erradas no g-mail, hotmail e outlook.
      Alguém conhece alguma forma que funcione ou pode me ajudar a fazer pois posso estar fazendo errado?
      Desde já agradeço.
    • Danilo Tek
      Firefox não reconhece minha fonte (@font-face)
      Por Danilo Tek
      Olá! Estou desenvolvendo um layout, pra atender minha necessidade fiz uma fonte de símbolos, o problema é que simplesmente o firefox não abre a fonte, todos os navegadores incluindo o IE, sim até o IE abriu a fonte, menos o firefox; Alguém pode me ajudar a resolver este problema?

      Estou usando esse código:
      /* Fonte para os outros navegadores */
      @font-face {
      font-family: "Fonte";
      src: url('fontes/tenda_encantada.eot');
      src: local('scarface'), url('fontes/fonte.ttf') format('truetype');
      }
      /* Fonte para o IE */
      @font-face {
      font-family: "Fonte";
      src: url("fontes/fonte.eot");
      }
    • Igor Augusto
      Problemas para importar fonte
      Por Igor Augusto
      Boa tarde pessoal,
       
      Estou com um problema, faço a importação da fonte, conforme código abaixo:
      @font-face { font-family: 'Regulator'; src: url('fonts/Regulator/regulatm.eot'); src: url('fonts/Regulator/regulatm?#iefix') format('embedded-opentype'), url('fonts/Regulator/regulatm.svg#Locaweb-Icons') format('svg'), url('fonts/Regulator/regulatm.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* NORMAL-ITALIC */ @font-face { font-family: 'Regulator'; src: url('fonts/Regulator/regulatmi.eot'); src: url('fonts/Regulator/regulatmi?#iefix') format('embedded-opentype'), url('fonts/Regulator/regulatmi.svg#Locaweb-Icons') format('svg'), url('fonts/Regulator/regulatmi.ttf') format('truetype'); font-weight: normal; font-style: italic; } /* LIGHT */ @font-face { font-family: 'Regulator'; src: url('fonts/Regulator/regulatl.eot'); src: url('fonts/Regulator/regulatl?#iefix') format('embedded-opentype'), url('fonts/Regulator/regulatl.svg#Locaweb-Icons') format('svg'), url('fonts/Regulator/regulatl.ttf') format('truetype'); font-weight: lighter; font-style: normal; } /* LIGHT-ITALIC */ @font-face { font-family: 'Regulator'; src: url('fonts/Regulator/regulatli.eot'); src: url('fonts/Regulator/regulatli?#iefix') format('embedded-opentype'), url('fonts/Regulator/regulatli.svg#Locaweb-Icons') format('svg'), url('fonts/Regulator/regulatli.ttf') format('truetype'); font-weight: lighter; font-style: italic; } /* BOLD */ @font-face { font-family: 'Regulator'; src: url('fonts/Regulator/regulatb.eot'); src: url('fonts/Regulator/regulatb?#iefix') format('embedded-opentype'), url('fonts/Regulator/regulatb.svg#Locaweb-Icons') format('svg'), url('fonts/Regulator/regulatb.ttf') format('truetype'); font-weight: bold; font-style: normal; } /* BOLD-ITALIC */ @font-face { font-family: 'Regulator'; src: url('fonts/Regulator/regulatbi.eot'); src: url('fonts/Regulator/regulatbi?#iefix') format('embedded-opentype'), url('fonts/Regulator/regulatbi.svg#Locaweb-Icons') format('svg'), url('fonts/Regulator/regulatbi.ttf') format('truetype'); font-weight: bold; font-style: italic; } Na hora da utilização, não consigo usar a fonte corretamente, coloco ela normal e aparece em negrito, já conferi os arquivos e estão corretos... Não sei mais o que fazer, alguma luz?
       
    • Rafael Castelhano
      @font-face aplicado a checkbox não funciona Firefox
      Por Rafael Castelhano
      Estou tentando estilizar o checkbox com @font-face, o Chrome esta renderizando corretamente, porém no firefox não (não sei no IE pois estou rodando no Linux), segue código:
      @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot?tuz516'); src:url('fonts/icomoon.eot?#iefixtuz516') format('embedded-opentype'), url('fonts/icomoon.ttf?tuz516') format('truetype'), url('fonts/icomoon.woff?tuz516') format('woff'), url('fonts/icomoon.svg?tuz516#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } e esse:
      input[type=checkbox]{-webkit-appearance: none;-moz-appearance: none;outline: none;cursor: pointer;margin: 0px;} input[type=checkbox]:before {font-family: 'icomoon';font-size: 22px;position: relative;top: 3px; content: "\ea53";margin-right: 1px;color: #999;} input[type=checkbox]:checked:before {content: "\ea52";color: #333;} A fonte eu peguei no link: https://icomoon.io/app/#/select
       
      Alguém faz ideia do que pode ser?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito