Install FONT in HTML?

Asked

Viewed 608 times

0

Good afternoon Personal,

If you can help with the codes below, as you can see I’m new with html and CSS. I searched but could not make work the font I want from a source link I made myself. If it’s possible to do it the way I should?

I need a code for CSS and a code for dry html.

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>

css-font-face font

3 answers

1


Good afternoon, all right? (:

That way you won’t be able to import by link, one solution to your problem is to import the font from @font-face locally. It’s very simple:

First, download the source file .ttf on your computer and put in your project.

Then, just pass the url in parentheses and quotes, as in the example below:

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

div {
  font-family: myFirstFont;
}

That way I tested it here, and it works smoothly. ;)

Now, if your problem is you need to pull directly from the same link, I can try another solution here, just reply in the comments.

Hope I helped, hugs!

  • Matthew, then import place I can do. The problem I have is that I needed it to go through the link because I’m going to put it in an html page where if the person doesn’t have the source works for that person too and I don’t have to leave it on a server.

  • If there is a solution to do this would thank Matthew Daniel

  • @Kasten if the source is on your server, it will work for your user normally, because the source will be loaded along with the site, and the best is that you will not depend on external servers that if they crash will leave your page without source.

  • then more I have no server I uploaded the font to ucoz.com.br as I will host the site ai wanted q it to load the font from the link of the same site. But I guess that’s not possible?

  • If you are going to host the site on ucoz.com.br and the source is also hosted there, isn’t it better to do it all in a single directory? this way you can load the source directly into the same project, in reality will give in the same rs

  • If this answer has helped you, don’t forget to mark it as solved ;)

  • It didn’t. Because I can’t pull the link, it’s not working. Is there a site that I can upload the "font" and get it to work?

  • I can only do it by google fonts and if the font is on my computer then right.

  • Let’s go continue this discussion in chat.

  • Can you give me one more helping?

  • can speak @Kasten

  • The example of yesterday that you sent me, can do another example but with two different fonts one for div and one that works in <p> but are different fonts?

  • @Kaster for you to manage to do this, just create another @font-face by importing the font you want (ex. @font-face { font-family: MinhaFonte; src: url('pasta/nome_da_fonte.ttf'); }) and then apply the css rule to the <div> and the <p> desired, example: div, p { font-family: MinhaFonte }.

Show 8 more comments

0

Hello! You need to see if the web server is configured to give the right mime-type for these extensions you are using from source. On my Apache servers I had to register almost all of them manually. Test with a source from another domain to see if it changes behavior. Test with source from 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

Hello! try to access the Google Fonts website, select the desired template, click the "+" button, and soon it will open a box written "Family Selected", after that click on the box, and you will see a source reference link, which you will add in the head tag, and then you will have the css code that you will add inside the body that is inside the styling tag, see an example below:

<!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>

Note: I recommend using google font, because with the font-face, the user who enters the site will need to have the same font that is on your computer, and sometimes it may not have, so not getting the desired result, however, if using google font, will be visible to any user.

Browser other questions tagged css-font-face font

You are not signed in. Login or sign up in order to post.