1

Boa tarde Pessoal,

Se vocês puderem ajudar com os códigos abaixo, como vocês podem ver sou novo com html e CSS. Pesquisei mas não consegui fazer funcionar a font que eu quero a partir de um link de fonte que eu mesmo fiz. Se for possível fazer isso como devo fazer?

Preciso de um código para o CSS e um para html seco.

Att.

<center><p><font size="5px" font="sittella" url=(http://teste-teste.ucoz.com.br/sittella.ttf); color="8ffff4">DVD ON DEMAND</font></p>

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
  font-family: myFirstFont;
  src: url(http://teste-teste.ucoz.com.br/sittella.ttf);
}

div {
  font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>With CSS, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>

<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the WOFF format (only supports EOT format).</p>

</body>
</html>

3 Respostas 3

2

Boa tarde, tudo certo? (:

Dessa maneira você não vai conseguir importar pelo link, uma solução para o seu problema é importar a fonte pelo @font-face localmente. É muito simples:

Primeiro, baixe o arquivo de fonte .ttf no seu computador e coloque no seu projeto.

Depois, basta passar a url dentro de parenteses e aspas, como no exemplo abaixo:

@font-face {
  font-family: myFirstFont;
  src: url("sittella.ttf");
}

div {
  font-family: myFirstFont;
}

Dessa maneira eu testei aqui, e funciona tranquilamente. ;)

Agora, se seu problema for precisar puxar direto do link mesmo, eu posso tentar outra solução aqui, é só responder nos comentários.

Espero ter ajudado, abraços!

13
  • Mateus, então importar local eu consigo fazer. O problema que eu tenho é que eu precisava que fosse pelo link pois eu vou colocar em uma pagina html onde se a pessoa não tiver a fonte funcione pra essa pessoa também e que eu não precise deixar ela em um servidor.
    – kasten
    Commented 11/02/2020 às 19:00
  • Se houver uma solução para fazer isso iria agradecer Mateus Daniel
    – kasten
    Commented 11/02/2020 às 19:01
  • @kasten se a fonte estiver no seu servidor, ela vai funcionar para o seu usuário normalmente, pois a fonte será carregada junto com o site, e o melhor é que você não vai depender de servidores externos que se caírem irão deixar sua página sem fonte. Commented 11/02/2020 às 19:06
  • então mais eu não tenho servidor eu carreguei a font para o ucoz.com.br como vou hospedar o site ai queria q ele carregasse a font a partir do link do site mesmo. Mas acho q assim não é possivel né?
    – kasten
    Commented 11/02/2020 às 19:20
  • se você vai hospedar o site no ucoz.com.br e a fonte também está hospedada lá, não é melhor fazer tudo em um único diretório? dessa maneira você pode carregar a fonte direto no projeto mesmo, na realidade vai dar na mesma rs Commented 11/02/2020 às 19:24
0

Olá! Precisa ver se o servidor web está configurado para dar o mime-type certo para estas extensões que você está usando de fonte. Nos meus servidores apache eu tive que cadastrar quase todas manualmente. Faça seu teste com uma fonte de outro domínio, para ver se muda o comportamento. Teste com fonte do Google Fonts:

@font-face {
  font-family: 'SuaFont';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dancingscript/v14/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

h1 {
  font-family: SuaFont;
}
<h3>Fonte Normal</h3>
<h1>Fonte Inserida</h1>

-2

Olá!, tente acessar o site do Google Fontes, selecione o modelo desejado, clique no botão de "+", e logo abrirá uma caixa escrita "Family selected", após isso, clique na caixa, e você verá um link de referência da fonte, que você vai adicionar na tag head, e depois terá o código css que você vai adicionar dentro da body que está dentro da tag de estilização, veja um exemplo abaixo:

<!DOCTYPE html>
<html>
<head>
<title>Fontes</title>
<link href="https://fonts.googleapis.com/css?family=Sriracha&display=swap" rel="stylesheet">
<style>
   body{
     font-family: 'Sriracha', cursive;

   }
</style>
</head>
</html>

Obs: Eu recomendo utilizar o google fonte, porque com o font-face, o usuário que entrar no site precisará ter a mesma fonte que se encontra no seu computador, e ás vezes ele pode não ter, assim então não obtendo o resultado desejado,porém, se usar o google fonte, estará visível para qualquer usúario.

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 .