CODEWITHSUNDEEP
htmlcssbootstrap-4
S P
S P

Reputation: 11

My problem is to upload the font to web site

The main problem was that the font was displayed differently than it should, although everything was connected correctly. I managed to find the source in html and css where it is shown how to use this font and it began to appear as it should. The only suggestion as to why the font did not work is that this font in ttf format does not work on the web.

Thank u everyone for the help!

/* #### Generated By: http://www.cufonfonts.com #### */

@font-face {
font-family: 'Voya Nui';
font-style: normal;
font-weight: normal;
src: local('Voya Nui'), url('VoyaNui_1.15_4.woff') format('woff');
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css"
          href="style.css"/>
</head>

<body>

<h1 style="font-family:'Voya Nui';font-weight:normal;font-size:65px">018.0204  BIOLOGICAL CHRONICLE</h1>


</body>
</html>

Upvotes: 1

Views: 111

Answers (3)

Filipa Sim&#227;o
Filipa Sim&#227;o

Reputation: 106

You can't do <link rel="stylesheet" href="fonts/VoyaNui_1.15_4.ttf">.

You need to use @font-face in css or style.

@font-face {
  font-family: 'VoyaNui';
  src:   url('./fonts/VoyaNui_1.15_4') format('woff2'),
    url('./fonts/VoyaNui_1.15_4') format('woff'),
    url('./fonts/VoyaNui_1.15_4') format('ttf');
}

One more thing, I use woff and woff2, because it has a good compression, but be careful with some browsers (IE).

See in caniuse https://caniuse.com/#search=woff and https://caniuse.com/#search=woff2

Upvotes: 1

Sufiyan
Sufiyan

Reputation: 1

You need to generate the fonts from online web font generator and after the generation of fonts put the woff and woff2 generated fonts in your fonts folder.

@font-face {
    font-family: 'VoyaNui';
    src: url(./fonts/VoyaNui_1.15_4) format('ttf'), url(./fonts/VoyaNui_1.15_4) format('woff'), url(./fonts/VoyaNui_1.15_4) format('woff2');
}

Upvotes: 0

Christoph Herold
Christoph Herold

Reputation: 1809

Assuming your pasted stylesheet is styles.css, add the font-face definition before your body rule:

@font-face {
    font-family: 'VoyaNui',
    src: url('fonts/VoyaNui_1.15_4.ttf');
}
body {
    font-family: 'VoyaNui';
}

Then remove the <link> to the font, it will not work.

Upvotes: 0

Related Questions