Using a personalized font in CSS isn't functioning correctly and is displaying Times New Roman instead

I've been struggling to include a custom font in my project, but it's not working as expected. Here's how I added it to the .css file:

 @font-face {
    font-family: 'Open Sans';
    src: url('/open-sans.eot');
    src: url('/open-sans.eot?#iefix') format('embedded-opentype'),
         url('/OpenSans-Regular.ttf') format('truetype'),
         url('/open-sans.woff') format('woff');

    font-weight: normal;
    font-style: normal;
}

This is how I'm applying it:

.panel-heading {
    font-family: 'Open Sans';
    font-size: 20px ;
}

Despite having the font file in the correct folder (I even moved it next to the .css files), I'm still seeing Times New Roman instead of my desired font. What am I missing here? Appreciate your help

css

Answer №1

My mistake was that I initially wrote the font path starting from the .css files folder, when in fact it needed to be written from the /root folder.

To rectify this issue, I relocated all fonts back to root/fonts/ and made adjustments to the code as follows:

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/open-sans.eot');
    src: url('/fonts//open-sans.eot?#iefix') format('embedded-opentype'),
         url('/fonts//OpenSans-Regular.ttf') format('truetype'),
         url('/fonts//open-sans.woff') format('woff');

    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

Interactivity with SVG clip-path featuring multiple paths through hover events

I have a unique SVG demo image with multiple circles that are clipping an animated GIF. Can we detect hover events for each individual circle as the user mouses over them? For example, the top-left or middle-right circle? Is it also possible to change th ...

csshtmlsvgclip-path

What is the best way to showcase React Components in a inline format?

I'm attempting to place multiple React Components in the same line so that I can scroll through them later. Unfortunately, React and Material UI are not cooperating. The Card Components consist of a standard div element with text and an image inside. ...

cssreactjsmaterial-ui

Encountering an Uncaught TypeError while trying to read properties of undefined (specifically 'remove') during a Change event is causing an issue for me

Looking to update the icons by changing the class from .fa-plus to .fa-minus for this specific menu section <div class="accordion-menu"> <h2 class="accordion-header" id="subseccOne"> ...

javascripthtmlcssaccordionbootstrap-5

Angular is encountering a CORS issue with the "No Access-Control-Allow-Origin" error when trying to access a CSS file

Currently, in my Angular 5 application with a Web API back-end, my main goal is to reference a CSS file on a production server. I'm facing a cross-origin issue when trying to access the CSS file hosted on the IIS server website. Even though CORS is e ...

cssangularcross-domainaccess-control

What's causing all my carousel slides to stack on top of each other instead of presenting in a

Whenever I click 'run' or 'preview' in a browser, specifically using Chrome, all three slides are displayed stacked from 1 to 3 in a static view. They do not toggle through each slide as intended. This issue only occurs on Codeply, a p ...

htmlcsscarouselbootstrap-5

Organizing CSS DIV code by sections for desktops and mobile devices

My CSS file contains properties that are common for both PC and cellphone browsing, but some vary between the two platforms. I utilize @media screen and (max-width: X px) to handle this, with one set of rules for narrow screens and another for wider screen ...

css

Is there a way to eliminate padding and increase the size of images in mobile view?

Over on my photography blog, I'm working on adjusting the padding within the blue box, increasing the size of my images, and eliminating hover effects for mobile views. Despite my efforts, the code I've implemented hasn't produced the desire ...

cssmobileresponsive-design

Image showcasing the background

I'm facing an issue with adding a background image to my project Even after trying to add it globally, the background image is not showing up on the Next.js index page. import { Inter } from 'next/font/google' const inter = Inter({ subsets: ...

cssreactjsnext.jsbackground-image

Transitioning with an ellipsis

Currently, I am working on a project where I am trying to utilize the CSS property text-overflow: ellipsis to achieve a specific animation. However, despite applying this property along with white-space: nowrap and overflow: hidden to .card-dish__info, I a ...

htmlcssoverflowellipsis

What could be causing the absence of the box within the div element?

I am still learning the ropes of javascript, CSS, HTML and programming in general. Despite being a beginner, I have managed to grasp the basics of simple HTML and CSS. I had successfully created a nested div structure before, but suddenly the inner div is ...

htmlcss

What is the precise width?

Here's a question for you: an HTML element has the following styles applied to it - width: 150px, padding: 3px, border: 4px, margin: 7px. What is the actual width of the element? I'm confused by this question because it specifies that the width ...

htmlcss

What could be causing the incorrect styling of the <h1> tag and certain Bootstrap elements in my Vuejs project when I import Buefy?

In my webpack-simple Vue.js project, I am utilizing Bootstrap 4 and Buefy. However, upon importing Buefy as per the documentation, I noticed that my <tag does not resize the text correctly and the nav-bar in Bootstrap 4 is displaying the wrong width. T ...

javascripthtmlcssvue.jsbuefy

What was the inspiration behind Spotify's section design?

Spotify has cleverly hidden the overflowing content without showing a scrollbar, allowing users to swipe through the list. How did they achieve this? I am currently using tailwindcss if that makes a difference. https://i.stack.imgur.com/z59yv.png ...

cssreactjstailwind-css

Utilizing clip-path polygons for effective styling on Firefox and iOS

I have been working on a plugin to create animated modal boxes by utilizing the clip-path property. However, I have encountered an issue where this code only seems to work in Chrome. You can view the codepen demo here. Unfortunately, it appears that Firef ...

javascriptcsssvgclip-path

The dimensions of images and text in HTML

I'm having trouble adjusting my page to fit the resolution of the screen. The image I'm using is 1920 pixels wide, but it's extending beyond the window. Click this link for the code and images: index1.html and style1.css are not needed. < ...

htmlcss

Utilize the display: flex property to position a div in the bottom right corner of its containing element

I'm trying to showcase a yellow div "icon" at the bottom right corner of its red container "content". Can someone help me figure out what's incorrect in my code? .root { display: inline-flex; background-color: red; } .content { d ...

htmlcssflexbox

"Navigation Side Menu: w3-sidebar with hamburger toggle feature

If you are looking to implement the w3-sidebar, you can find it here: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_over The existing code uses a "hanburger" icon to open the side menu and a "Close X" menu item to close it. To simpl ...

jqueryhtmlcss

Tips for handling null input values when saving to a database

<!DOCTYPE html> <html> <head> <title>Data</title> </head> <body> /* Enter your data here */ <form action="this.php" method="post"> <input type='text&a ...

phphtmlcssmysqldatabase

Is there a way to modify the size and color of a specific word in a CSS animation?

As a newcomer to CSS, I am exploring ways to change the font size and color of a specific word in my sentence after an animation. My initial attempt was to enclose the word within a span class like this: <h2>I'm <span style = "font-size: ...

htmlcss

Troubleshooting problems with scrolling on JavaScript in Edge, Opera, and Chrome

Currently, I am developing a fun CSGO-inspired box opening feature on my food recipe website that randomly selects recipes for users. However, I have encountered some challenges with the scrolling functionality. It seems to be incompatible with certain bro ...

javascripthtmlcss