How to Fix the Issue of CSS Font Face Path Not Working in Your Express Application

My current font files are stored in the public/fonts/ directory.

The CSS files can be found in public/css/.

Despite trying various path and css adjustments, I am unable to successfully load the fonts...

@font-face {font-family: trend_sans_oneregular; 
 src: url('TrendSans-One-webfont.eot'),
      url('TrendSans-One-webfont.eot?#iefix') format('embedded-opentype'), 
      url('TrendSans-One-webfont.woff') format('woff'), 
      url('TrendSans-One-webfont.ttf') format('truetype'), 
      url('TrendSans-One-webfont.svg#trend_sans_oneregular') format('svg'); 
      font-weight: normal; 
      font-style: normal; }
      
.btn {border:none;font-family:trend_sans_oneregular!important}

Could the issue lie with the file paths? Do I need to make any additional configurations for an Express app?

//Setting the fav icon and static folder
    app.use(express.favicon());
    app.use(express.static(config.root + '/public'));

Answer №1

Here is the correct solution:

@font-face {font-family: 'trend_sans_oneregular'; 
 src: url('/fonts/TrendSans-One-webfont.eot');
 src: url('/fonts/TrendSans-One-webfont.eot?#iefix') format('embedded-opentype'), 
  url('/fonts/TrendSans-One-webfont.woff') format('woff'), 
  url('/fonts/TrendSans-One-webfont.ttf') format('truetype'), 
  url('/fonts/TrendSans-One-webfont.svg#trend_sans_oneregular') format('svg'); 
 }

Answer №2

Ensure to include the path in the src section as shown below. Please inform me if you need further assistance.

@font-face {font-family: trend_sans_oneregular; 
 src: url('public/fonts/TrendSans-One-webfont.eot'),
  url('public/fonts/TrendSans-One-webfont.eot?#iefix') format('embedded-opentype'), 
  url('public/fonts/TrendSans-One-webfont.woff') format('woff'), 
  url('public/fonts/TrendSans-One-webfont.ttf') format('truetype'), 
  url('public/fonts/TrendSans-One-webfont.svg#trend_sans_oneregular') format('svg'); 
  font-weight: normal; 
  font-style: normal; }

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

When organizing Node.js express routes in separate files, the Express object seamlessly transforms into a Router object for efficient routing

I am currently working on a Node.js application with Express. I organize my routes using tsoa, but when I introduce swagger-ui-express to the project, an error occurs Error: TypeError: Router.use() requires a middleware function but got undefined Here is ...

The application is unable to interpret parameterized queries when utilizing Express and PostgreSQL

Complete newbie over here, I'm attempting to revamp my endpoint in order to enable sorting the return table by multiple columns read in via variables 'sort_by' and 'order', which have default values. However, when running the test ...

New line displaying pagination for Bootstrap datatable

I am currently utilizing the datatable feature with bootstrap version 4.3.1. The necessary CSS and JS files have been integrated as shown below: <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script ...

On iPhone, links located under a fixed-positioned div can be easily clicked

I am facing an issue on our mobile website where the footer with fixed positioning overlaps with a scrolling feed underneath it, causing the links in the feed to be clickable from the footer area. Footer CSS: .footer { position: fixed; bottom: 0; right: ...

Switch the orientation of the dropdown menu from vertical to horizontal in CSS

After downloading a CSS dropdown menu from purecss.menus.com, I attempted to modify it by changing the main menu to display horizontally instead of vertically. However, I am now struggling to figure out which part of the CSS code needs to be adjusted in or ...

In the following code, to what is the term "this" pointing?

While following a tutorial, I stumbled upon a piece of code that I am having trouble understanding. Can someone please help me decipher this code? I have marked my questions within the comments. Code UserSchema.pre('save', function(next){ // ...

Building a custom shadowDOM with a dynamic bootstrap dropdown menu using JavaScript

As I work on developing a Chrome extension, I found myself in need of incorporating the split-button feature provided by Bootstrap within a shadow DOM. Despite my efforts, I have not been able to find clear guidelines on how to achieve this. Can anyone pro ...

"Mastering the implementation of routes within a parallel function in Node.js"

I am looking for a way to optimize the rendering speed of node. I have decided to try using parallel processing. How can I implement routes in the parallel function? Before var app = express(); var index = require('./routes/index')(); var aut ...

Best practices for interacting with a REST API using Angular

I am currently working on a web Angular app where in globalservice.ts I have defined basepath:string = "https://myapi.com/api/v2/". I need to retrieve data from this API. To achieve this, I have included the following code snippet in server.js. Any recomme ...

Show two choices in a select box next to each other

I've been attempting to display a select box with two options side by side in a list format. Struggling to find any libraries that can achieve this functionality. Here is an example: <select> <option x><option y> <optio ...

Aligning a title and a subheading in a horizontal manner

I want to align my h3 headings with my h5, using Bootstrap, so they are on the same line. UPDATE: I aim to leverage existing Bootstrap functionality and avoid modifying CSS unless absolutely necessary. Here is a screenshot illustrating what I mean: https ...

Launch the sidebar window using jQuery

I've been attempting to create something similar to this. However, I'm having trouble replicating it exactly. What I've attempted I've managed to create a replica, but the issue is that the buttons are fixed. Could setting the left ...

Disable responsiveness for low-resolution devices

Is there a way to disable responsive design on small resolution devices? The responsive layout appears distorted when accessed on a phone. See screenshots for more details. Phone Desktop ...

Custom CSS styles for purchasing stocks using percentages

Can someone assist me in fixing the CSS for this custom card within a modal box? <!--Card--> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <input type="text" id="market-searc ...

Designing an HTML banner with 100% width and 660 pixels in height for optimal responsiveness

I am in need of a responsive banner that will be displayed at 100% width and 600px height on fullscreen. Below is the code I have: <style> /* default height */ #ad { height: 660px; width: 100%; } @media o ...

Is there a way to determine the dimensions of the print area?

Looking to find the print area size in pixels for content calculation purposes. I am using the following CSS for sizing: @page { size: 11in 8.5in; margin: 1in; } ...

Enhance Your Website Design: Implement an expanded input field that overlaps menu items

I have implemented a feature in my Bootstrap .navbar where an expanding input field appears only when the search button is clicked. However, the expanded input field currently pushes the menu-items to the left. When I position #search-form absolutely, the ...

Creating animated effects through Javascript and CSS triggered by user events

As a beginner in javascript and CSS, I am experimenting with creating a simple animation that adjusts the transparency of an image when triggered by an event. However, I am facing an issue where the animation only works every other time the function is cal ...

Ways to turn off keep-alive feature on node server

Currently, I am in the process of developing an application backend using a node.js server and express. The application is designed to receive an external flux from an apache server which requires the "keep alive" function to be disabled. I attempted to d ...

Express JS error: Invalid Parameters Detected

My Express JS application has the following route: app.get('/fetchnotes/:id', function(req, res) { var id = req.params.id; console.log(id); connection.query('SELECT * from dn_notes where id=?',[id], function(err, rows, fiel ...