The font cannot be located by font-face: file not found

I am a beginner in CSS and want to incorporate the fonts poppins and open-sans in doxygen.

Here is my font-face code for Open_Sans:

    @font-face {
    font-family: 'Open_Sans';
    src: url('fonts\Open_Sans\OpenSans-Regular.ttf') format('truetype');
}

The fonts folder is located in the same directory as the CSS file in my DIR structure.

View DIR structure 1

Check out DIR structure 2

Although I can access the file path successfully in VS Code editor, the webpage displays an error message in the console stating `net::ERR_FILE_NOT_FOUND'

I have tried various paths including /fonts/, ./fonts/, and C:/complete-path/fonts/ without any luck. I suspect it might be related to doxygen rather than a syntax error.

EDIT

To troubleshoot, I attempted using an online version of Open Sans which did not trigger any errors on the console, yet the font still failed to display correctly. Here is the link for reference. I am leaning towards an issue with doxygen causing this problem.

@font-face {
    font-family: 'Open_Sans';
    src: url('https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2') format('woff2');
}

Answer №1

    @font-face {
        font-family: 'Open_Sans';
        src: url('Open_Sans/OpenSans-Regular.ttf') format('truetype');
    }
Make sure to exclude the "fonts/" from the file path. If your CSS file is located in the "fonts" folder, the corrected path should be 'fonts/Open_Sans/OpenSans-Regular.ttf'

Answer №2

After some troubleshooting, I managed to find the solution, but unfortunately forgot to provide an update. Once Doxygen completes its process, it places all files into the output directory and will not include any additional files that have not been explicitly specified in your configuration.

To resolve this issue, simply navigate to the HTML_EXTRA_FILES section in your doxyfile and list the file(s) or directories that need to be included. This will ensure that copies are placed in the output directory as needed.

In my specific scenario, I added the following entry:

HTML_EXTRA_FILES = fonts\Open_Sans\OpenSans-Regular.ttf
. Alternatively, just including fonts\ would achieve the same result. However, I am still puzzled by why the online URL did not function correctly.

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

Is it possible for you to generate an array containing only one element?

I've encountered an issue with my code. It functions correctly when the JSON data for "Customers" is in array form. However, if there is only one customer present, the code erroneously creates 11 table columns (corresponding to the number of keys in t ...

Developing web applications using a combination of PHP, MySQL, and

I am in need of creating an HTML form that functions as CRUD. This form should be able to record inputs such as "row_number", "channel_name", and "ip_address". It will store all the data in a MySQL table using the "ORDER BY row_number" function. The form i ...

Error: NS_ERROR_CORRUPTED_CONTENT encountered while running a Live Server with TypeScript-generated JavaScript files

Currently, I am working on creating a straightforward banking website using vanilla TypeScript, HTML, and CSS. My plan is to integrate the Plaid API later on to conduct operational tests. To get started, I am testing the project structure locally using Liv ...

What is the best way to align text in the center of a button?

When creating custom buttons in CSS using <button>, I noticed that the text appears to be centered both horizontally and vertically across all browsers without the need for padding, text-align, or other properties. Simply adjusting the width and heig ...

Why is my CSS input field not aligning to the top left corner?

I'm attempting to position the text in an Input Text Field to display at the top left corner, but currently it is centered both vertically and horizontally in the middle. <input class="userInput" type="text"> <style> .userInput { text-ali ...

Issue with slide animation in carousel on Bootstrap version 4.5.2 not functioning as intended

Recently, I've been diving into learning Bootstrap (v4.5.2) and decided to implement a basic carousel on my website that slides automatically. Following the documentation on Bootstrap's website, I copied the example code for a simple carousel wit ...

Storing, Transmitting, and Fetching information using AngularJS

My goal is to create a news object with separate sub-sections that can be added and removed by the user. You can see an example of how it should look here. When the save button is pressed, the data should be sent in the following JSON structure with each ...

What is a straightforward way to add Pagination to an HTML page using Javascript?

I'm in the process of developing an HTML table with pagination. To achieve this, I am utilizing a GET API to fetch JSON data and presenting it in a dynamic table layout. Pagination is being managed by the API through page number parameters. How can we ...

Alternative image loading in a figure element

I'm currently in the process of putting together an image gallery using Angular 4.3.0, where images are displayed as background images within figure elements rather than img tags. The images are initially resized to smaller dimensions before being use ...

Putting the second line of a list in a paragraph element with indentation (excluding UL or OL)

I am working with a table that has the following structure: html { width: 400px; } <table> <tr> <td>Description:</td> <td style="white-space: pre-wrap;"> Some text which could be quite long with some &apos ...

Display a loading symbol when the iframe is being loaded and also when its source is being changed

Is it possible to have a loading.gif displayed when my iframe is loaded? I managed to do this using some code I came across here: Displaying a loading gif while iframe content loads However, there is a new issue on my website. I have checkboxes and radio ...

Is there a way to trigger an alert within an iframe without having to place the code outside of the iframe

I attempted running the following code snippet: document.getElementById('targetFrame').contentWindow.targetFunction(); sourced from this forum post but it seems like it only works outside of the iframe. Is there a way to make it function solely w ...

How come my content is overflowing beyond the edges of the page?

Hey there! Check out my webpage I'm working on: I've run into an issue where there is a lot of unnecessary whitespace after the footer, but oddly enough it only shows up in browsers other than Mozilla Firefox. I attempted to investigate using i ...

Utilizing Tailwind's layer component directives on a Remix React component

I've been experimenting with creating Tailwind directives in my Remix project. However, when I define CSS classes under the components layer of tailwind.css and apply them to my React components' className(s), the styles don't seem to be tak ...

What is the proper way to utilize CSS animation delays in order to design a collapsible HTML container?

I'm trying to implement responsive CSS animation delay to create an accordion effect when a user clicks on an arrow associated with a table, all without using JavaScript and only utilizing HTML/CSS. Check out the mobile view in action here: https://w ...

AgGrid's magical dropdown feature

Struggling to integrate a bootstrap-4 dropdown menu with AgGrid, I'm facing an issue where the data table overlaps the dropdown when the html is present. Attempts to increase the z-index have not yielded results. Below is the html code snippet: < ...

Ways to update a JavaScript variable without needing to refresh the entire webpage

I am working on a Three.JS application where objects are colored based on values from a text file: let color1 = 0x00ff00; let color2 = 0xFF04F0; Within the Three.JS code: var cubeGeometry = new THREE.BoxGeometry(15, 1, 5); var cubeMaterial = new THREE.M ...

My Javascript file in AngularJS is giving me trouble with the error message: "Uncaught Error: [$injector:modulerr]"

I am currently enrolled in an AngularJS course and the instructor is using version 1.0.8, while I have version 1.7.8 installed. I would like to update my version. Can anyone provide guidance on how to do this? File: index.html <!doctype html> <h ...

Ensure that when selecting an item from a CakePHP dropdown, any duplicate names are automatically removed to prevent confusion

I am facing an issue with the following code snippet: $customerList = $this->Project->Contact->find('list', array( 'fields' => array('Contact.id', 'Contact.displayName', 'Contact.companyName&apos ...

Resolving Uncaught TypeError in React when trying to read properties of undefined (specifically 'map')

As a newcomer to React and API usage, I am facing difficulty resolving the error below. My goal is to showcase a carousel of images using React.js but encountered this issue: Error message: Popular.jsx:26 Uncaught TypeError: Cannot read properties of unde ...