I am currently facing the challenge of how to properly upload a font to my website

One issue that arose was the font displaying incorrectly, despite all connections being correct. After investigating the HTML and CSS source code, I found the solution on how to properly implement the font, which resulted in it being displayed correctly. It appears that the reason for the font not working was due to its TTF format being incompatible with web browsers.

Thank you to everyone who assisted!

/* #### 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>

htmlcssbootstrap-4

Answer №1

Instead of using 

<link rel="stylesheet" href="fonts/VoyaNui_1.15_4.ttf">
, try incorporating it with @font-face in your 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');
}

It's recommended to use woff and woff2 formats as they offer better compression, but keep in mind that certain browsers like IE may have limitations.

You can check the compatibility for woff here and for woff2 here.

Answer №2

If you have included a stylesheet called styles.css, make sure to insert the font-face definition above your body rule:

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

After adding the font-face definition, you can safely remove the <link> to the font in order for it to function properly.

Answer №3

To obtain the desired fonts, it is recommended to utilize an online web font generator. Once the fonts are generated, simply place the woff and woff2 files into your designated 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');
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Removing the cloned element is not possible

In my grid, there is a feature where hovering over a box creates a clone of that box which is positioned directly above it (using z-index/overlay). Once the user moves the cursor away from the box, an animation should play, and at the end of it, the box sh ...

javascriptjqueryhtmldom

What happens when dynamically loaded static resources are loaded?

Currently, I am dynamically injecting HTML into a page using JQuery AJAX. The injected HTML contains script and link tags for JS and CSS files respectively. The issue I am facing is that my initPage() function runs before the script containing its definiti ...

javascriptjqueryhtmlcssajax

What is the best way to organize divs in a grid layout that adapts to different screen sizes, similar to the style

Is there a way to align multiple elements of varying heights against the top of a container, similar to what is seen on Wolfram's homepage? I noticed that they used a lot of JavaScript and absolute positioning in their code, but I'm wondering if ...

javascriptjquerycss

The iframe is set to take the source URL from url.com/id using the "id" parameter

Currently, I am attempting to set the src of an iframe by extracting the URL from the toolbar address. The URL consists of the domain plus an ID, which happens to be the same as the YouTube ID. For instance: www.youtube.com/watch=id In my case, my domain ...

javascripthtmliframeyoutube

Creating tabbed interfaces with JQuery

How do I build tabs using jQuery without displaying the content of all tabs until clicked? I have tried using this code, and it works well once a tab is clicked. However, when the page is refreshed, the content of both tabs is visible. jQuery (funct ...

jqueryhtmlcss

Incorporating text overlays on images that are compatible with responsive websites is a top priority for me

This is a piece of HTML code that utilizes bootstrap 3 for design purposes. The challenge faced is related to positioning text over an image. When resizing the browser, the alignment of the text with the background gets disturbed. Assistance is needed in r ...

htmlcsstwitter-bootstrap-3bootstrap-modal

What is the reason behind Bootstrap's size classes becoming ineffective after 5?

Consider this: <div class="container m-5"> is effective, while <div class="container m-9"> does not produce the desired result. It appears that any number greater than 5 does not function as expected. What could be the rea ...

csstwitter-bootstrap

Methods for scaling the size of CSS background images

Can anyone assist me with scaling background image size properly? code: http://codepen.io/AnilSimon123/pen/JRBRZa Below is the code snippet: .bgimage{ background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vec ...

htmlcss

Having trouble getting my soundboard to work properly on mobile devices

I recently created a soundboard using HTML5, CSS3, and JavaScript. While the audio plays back perfectly on my computer when I click the buttons, I encounter an issue when trying to use it on a smartphone. <!DOCTYPE html> <html lang="en"> <h ...

javascripthtmlcssmobile

Combining two table headers into one table and organizing it for a clean appearance

Is it possible to use two different <thead>'s in the same table but have them stacked neatly? Currently, the first heading has 1 fewer column than the second one, resulting in a slightly awkward appearance. If there is a way to extend that first ...

htmldjangobootstrap-5

After a slight delay, the animated element twitches into action

I am currently working on implementing a menu item behaviour in the header similar to the one found at: . On this webpage, there is a bar that slides back and forth when hovering over elements. However, I am unable to add another element to my header, so I ...

cssanimationcss-transitionstransitionpseudo-element

Positioning a Box tag at the bottom using MUI 5

My goal is to position a Box tag at the bottom of the page. Current Behavior: https://i.stack.imgur.com/ZupNo.png I am looking to place a TextField and send button at the bottom of the page on both browser and mobile. I want user messages to be above th ...

htmlcsstypescriptmaterial-ui

Put a watch on a variable as soon as it is set

When initializing a variable, I want to use the $watch function in Angular without it automatically initializing right away. Is there a way to accomplish this? $watch $scope.$watch(function () { return $scope.character.level; }, function (ne ...

javascripthtmlangularjs

How can I reset the mousemove event in jQuery?

I need to create a mechanism where I can move a div by clicking on it, and then click again to stop the div in that position. However, encountering an issue when trying to move the div again as the mousemove event does not get activated. How can this be ...

javascriptjqueryhtmlcssmousemove

Creating a user-friendly interface with Dropdown menus paired with Labels and Buttons, structured to repeat row by row

I have a query regarding my design. My concern is about adding products to the bill. Each product needs to be added on a separate line. View Image of Adding One Product per Line Upon adding a product, I also want to display its warranty in the Warranty c ...

javascriptjqueryhtmlcsscouch-cms

What is the best way to access the front camera on both Android and iOS devices in order to capture a photo using Vue.J

I am currently developing a PWA Vue.Js application and I am trying to implement a feature that allows users to take a picture with the front camera on their mobile devices. Although I have managed to write code that works on my desktop browser, I have bee ...

javascripthtmlcssvue.js

Ways to update the div's appearance depending on the current website's domain

There is a piece of code that is shared between two websites, referred to as www.firstsite.com and www.secondsite.com The goal is to conceal a specific div only when the user is on secondsite. The access to the HTML is limited, but there is an option to ...

javascripthtmlcss

Discover the steps for incorporating the substring method into JavaScript to manipulate input strings

Is there a way to extract the specified portion of text from an input string using HTML and Javascript? <!DOCTYPE html> <html> <body> <input type="text" value="exampleString"></input> <button onclick=& ...

javascripthtmlsubstring

How can I prevent an endless loop in jQuery?

Look at the code snippet below: function myFunction(z){ if(z == 1){ $(".cloud").each(function(index, element) { if(!$(this).attr('id')){ $(this).css("left", -20+'%'); $(this).next('a').css ...

javascriptjquerycssanimation

Unable to resolve issue with Display:flex in my CSS, despite numerous attempts

Here is the structure of my CSS and HTML: #TopBar{ display: flex; justify-content: space-between; z-index: 1; position: fixed; top: 0px; left: 0px; background-color: rgb(25,25,25); height:115px; width: 2000px; } #Logo{ top: 0px; height: 110px ...

javascripthtmlcsswebflexbox