2

Estou tentando inserir uma fonte não padrão no meu html, mas ela não está funcionando. Baixei a fonte e coloquei numa pasta /font dentro da pasta css. Segue o código:

@font-face {
    font-family: sans-pro;
    src: url("/font/source-sans-pro/SourceSansPro-Regular.ttf");
}

#header1 {
  font-family: sans-pro;
  color: red;
}

estou usando windows7 e wampserver.

segue a localização da fonte: Localização das fontes dentro da pasta "css/font"

0

4 Respostas 4

1

Não seria melhor chamar a fonte via Google Api?

Exemplo no css:

    <style>
        @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
    </style>

Exemplo no html dentro da tag <head>:

    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

Para usar:

    font-family: 'Source Sans Pro', sans-serif;

Você pode customiza-la como quiser pelo Google Fonts

0
src: url("font/source-sans-pro/SourceSansPro-Regular.ttf");

ou assim

src: url("./font/source-sans-pro/SourceSansPro-Regular.ttf");
5
  • tentei ambas as sugestões, mas nenhum sucesso. Commented 16/04/2016 às 14:23
  • @FernandoWilliam tenta sem as aspas assim src: url(font/source-sans-pro/SourceSansPro-Regular.ttf);
    – M8n
    Commented 16/04/2016 às 15:02
  • Nada feito, amigo! Commented 16/04/2016 às 15:41
  • Qual navegador? Faz assim (é cross-browser): @font-face { font-family: 'sans-pro'; src:url(font/source-sans-pro/SourceSansPro-Regular.eot?#iefix) format('embedded-opentype'); /*Para navegadores Internet Explorer*/ src: local("sans-pro"), url(font/source-sans-pro/SourceSansPro-Regular.ttf); font-weight: normal; font-style: normal; } A única coisa que tu precisa fazer é uma cópia da fonte ttf em formato eot. Use esse site pra isso: onlinefontconverter.com Commented 16/04/2016 às 15:57
  • André, eu estou usando o chrome, mas após sua dica converti a fonte no site indicado, utilizei o código sugerido, testei também no IE e Mozilla mas nada aconteceu. Pensei que pudesse existir algum erro no meu código, mas quando testo com outra fonte (cursive,arial, times...) funciona normalmente. Commented 16/04/2016 às 17:38
0

Olá, eu acho que o problema não é relacionado com a localização da fonte, porque senão este código:

src: url("font/source-sans-pro/SourceSansPro-Regular.ttf");

Já mencionado acima iria funcionar. Eu acho que o problema está relacionado no bloqueio do acesso a esse ficheiro através do servidor, por acaso não mexeu nas páginas de bloqueio???

Também experimente acessar ao ficheiro da ttf pelo browser para verificar esse tipo de erro exemplo:

localhost/CodeNumberOne/css/font/source-sans-pro/SourceSansPro-Regular.ttf

Espero ter ajudado

0

Eu consegui fazer funcionar com a fonte instalada no PC, porém foi necessário colocar o código na página do css e na página principal. Veja só:


NO HTML:

<head>

    <title> :: TEXTO EM CSS ::</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css_style/h12_texto_css.css" type="text/css" 
          rel="stylesheet">

    <!-- IMPORTANDO DE DENTRO DO PRÓPRIO PC! -->
    <style type="text/css">
        @font-face {
            font-family: 'Tiza';
            src: url('fonts/tiza.eot');
            src: url('fonts/tiza.eot?#iefix') format('embedded-opentype'),
                 url('fonts/tiza.woff') format('woff'),
                 url('fonts/tiza.ttf') format('truetype'),
                 url('fonts/tiza.svg#Tiza') format('svg');  
        }
    </style>


    <!-- IMPORTANDO DA API DO GOOLE OUTRAS FONTE - VEJA EM 
    http://fonts.google.com -->

    <style> /* mantenha dessa forma, mesmo que o editor sinalizee erro! */
        @import url('https://fonts.googleapis.com/css?family=Bad+Script');
        @import url('https://fonts.googleapis.com/css?family=Patua+One');
    </style>

</head>

NO CSS: veja como fica no CSS


Aí então, no CSS basta chamar as fontes normalmente. Relmente pelo Google API é muitoooooo mais simples! Muito mesmo! Entretanto, você fica na dependência do servidor deles (embora eu ache que NUNCA vá dar problema hehehe).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .