The font from the server is not displaying correctly in the local HTML file

After uploading the ttf font file to the server, I utilized the following CSS code:

@font-face {  
   font-family: "fontname";  
   src: url("http://www.mywebsite.com/Fonts/fontname.ttf");
}

body {
  font-family: "fontname", sans-serif;
}

Within the local HTML file, my setup included:

<!doctype html>
<html>
    <head>
        <title>title</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="cssfile.css">
    </head>
    <body>
        body
    </body>
</html>

I experimented with various ttf files on the server without success. Interestingly, when I placed the font in the same directory as the HTML file on my computer, it displayed correctly. Any insights into this issue would be appreciated. Thank you.

Answer №1

Have you checked for any errors on the console in your browser? It's possible that there is a problem with cross-site scripting.

If you're experiencing issues with cross-domain fonts, I recommend reading this article for a more detailed explanation. Your web server may need to include the following header in the font response:

Access-Control-Allow-Origin: *

http://example.com/cross-font-issues

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

Buttons are not aligned with the rest of the row's height

I'm currently working on designing an upload layout that consists of a container with a row inside. Within the row, there are two buttons (each containing input elements) and one h3. For some reason, I am having difficulty getting them to align at the ...

Tips for maintaining the height of the outer div consistent with that of the inner div

I am encountering an issue with an inner div that is used for overlay and set to a min-height property. Despite changes in the overlay's height, the height of the outer div remains unaffected. #outer { width: 70px; height: 70px; background-co ...

Guide to importing a scss file into a scss class

Is there a way to apply a different theme by adding the "dark-theme" class to the body? I've attempted the following implementation: @import '../../../../node_modules/angular-grids/styles/material.scss'; .app-dark { @import '../../. ...

Using VBA to Populate Dropdown List on Webpage from an iFrame

I am facing an issue with my code that aims to interact with a webpage by clicking on a link and then modifying dropdown lists within an Iframe. Specifically, I am attempting to populate the Manufr dropdown list based on data from the Year iFrame using VBA ...

Issue with border rendering on triangles in CSS on IE8

I currently have a horizontal navigation bar with triangle borders inserted using :before and :after for each list item. This creates the illusion of a white bordered point on the right side of each list item. The issue I'm facing is that this design ...

Enhance your webpage by incorporating various icons and custom spacing using Font Awesome and CSS content

Utilizing Font Awesome icons can be done with the code snippet below: .icon-car { content: "\f1b9"; } Is there a way to include multiple icons (such as \f1b9 and \f1b8), separated by a non-breaking space? ...

Should we make it a routine to include shared sass variables in each vue component for better practice?

Within my Vue application, there are numerous components that rely on shared variables like colors. I'm considering having each component import a global "variables.scss" file. Would this approach have any adverse effects? ...

Creating a fully responsive HTML page with a fullscreen image background

Seeking help from someone who can assist me. I have a challenge in creating a webpage with a background image that fills its <div>. Here is the code I used: <style type="text/css> .myclassdiv { background-image:url('IMAGEURL') ...

Make an angularJS PUT request using $http

After selecting a value from the dropdown selection, I am attempting to make a PUT call in AngularJS. Although I have successfully retrieved the value from the selection, I am encountering difficulty in generating the response for the PUT call. Below is t ...

different ways to dynamically increase CSS ID in PHP

Is there a way to dynamically increment my CSS ID using PHP? foreach ($query_cat->result() as $row_cat) { $row_cat_id = $row_cat->id; echo '<div class="product-wrapper">'; echo '<div id="product-header' . $r ...

Triggering the function once the text field is tapped again

I recently integrated a JavaScript scroll framework to create a stylish scrollbar for windows. I simply added it to a div: this.displayDiv = function () { $("#myDiv").niceScroll(); } <a href="#" onclick="manager.displayDiv();"> It ...

What is the best way to conceal the li elements that exceed a single line?

I have a unordered list containing product information as list items. My goal is to hide the list items that do not fit on a single line based on the screen size. Therefore, the number of products displayed should adjust depending on how many can fit on a ...

Is HTML5 Ajax Upload Degrading?

Recently, I came across a fascinating technique for uploading files using Ajax: http://www.sitepoint.com/html5-javascript-file-upload-progress-bar/ This method has piqued my interest and raised a couple of questions in my mind. Surprisingly, the tech ...

Having trouble setting the CSS width to 100%

Is there a way to assert the CSS width of an element in NightwatchJS to be 100% without hard-coding the value? Currently, when I attempt to do so, it fails and reports that the width is 196px. The specific error message is as follows: Testing if element ...

Upload file to database and move to new location

In order to gain a clearer understanding, I have a question regarding inserting data from a form. Let's say I have the following form: <form action="upload.php" method="post" enctype="multipart/form-data"> Select image to upload: <inp ...

Utilizing jQuery's multiple pseudo selectors with the descendant combinator to target specific elements

My code includes the following: <div class="a"><img></div> and <div class="b"><img></div> I want to dynamically enclose img tags with a div and utilize $(":not('.a, .b) > img") for ...

Unable to stop page refresh following form submission or file upload

Is it possible to upload a photo with Ajax to Express and have the response generate desired HTML? Whenever I submit the form, it redirects me and displays the picture data as an object. Here's the Express code: const storage = multer.diskStorage({ ...

The navigation bar does not display the CSS when in the active state

I created a navigation bar in ReactJS and I need the tabs to stay highlighted when clicked, but the styles are not applying correctly. I have double-checked that the stylesheet is linked properly based on the Reactjs file structure. For reference, I used ...

In what ways can a distant ancestor influence its subsequent generations down the line?

As a beginner utilizing Bootstrap v5, I am in the process of creating a navbar using the following HTML code. Within this code, the parent element (ul) of my link items contains a class called "navbar-nav" which results in my link items being styled to s ...

There was an issue encountered while attempting to utilize orgchart: The property '_aZ' of null could not be read

I've been exploring the use of an organization chart library from Everything goes smoothly with a few nodes, but when I attempt to load the entire organization (approximately 1100 subjects with multiple nested levels), I encounter this console error: ...