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

Iterate through a directory on the local machine and generate elements dynamically

I am looking to create a jQuery-UI tabs menu that includes 54 images on each tab. I have a total of 880 images stored in a folder, and it would be very time-consuming to manually insert an <img> tag for each one. Is there a way to dynamically cycle t ...

javascriptjqueryhtmlcssdirectory

Why isn't the AngularJS injected view resizing to fit the container?

As a novice delving into a project in the MEAN stack, I'm encountering inconsistent HTML previews. When I view it independently versus running it from the project, the display varies. Here's the intended appearance (in standalone preview): imgu ...

javascripthtmlcssangularjs

Struggling with organizing the layout of your HTML page? Let us lend

I am having difficulty with the layout of a page I'm working on. The lower page navigation is not positioning properly - it wraps below the left column instead of staying below the data columns. Additionally, the border for the navigation appears at t ...

csshtml

Tweaking the placement of the dropdown menu in the subnavigation area

Just getting back into coding after a long hiatus - I've dabbled in the past but it's been about 6 years since I've worked with any code. Currently, I'm working on replicating a website for practice. I have created a nav bar and a drop ...

htmlcssmenudropdownstyling

Arranging elements on a webpage using CSS grid placements

Currently experimenting with css grid, envisioning a scenario where I have a 2x2 grid layout. When there are 4 child elements present, they would form 2 rows of 2 elements each. My challenge is when dealing with an odd number of children, I aim to avoid al ...

htmlcsscss-grid

When resizing the browser, HTML/CSS elements tend to shift positions :(

I've experimented with different position values like absolute, fixed, and static without success. Wrapping the element in a div didn't yield the desired result, so I'm seeking assistance to correct this. (If that is the solution) The issu ...

htmlcssstylesdisplay

Adjust the font color in code function for Woocommerce

I am looking to customize the appearance of a specific part of this code: '% discount' This section displays the percentage amount followed by the word "Discount," and I would like to apply a unique color to this "% discount" * Modify the disp ...

phphtmlcsswordpresswoocommerce

Is there a way for me to superimpose text onto an image in this instance?

I am attempting to place a "Text overlay goes here" over the profilepic.jpg image below. I believe there may be an issue with my CSS code. My approach was to create a new div class named overlay and embed that line within the imgcontainer class. Can some ...

css

Having trouble with the nth-child CSS property in Bootstrap?

My cards need some styling adjustments - specifically, I want the first and third card in each row to have a top margin of 50px. Strangely, this doesn't seem to work with Bootstrap, but it does with pure CSS. Is there a specific class in Bootstrap tha ...

csstwitter-bootstrapbootstrap-4

Modifying the background hue of the element-ui tooltip

I am currently working with vue.js version 2.6.10 and element-ui version 2.15.1. The element-ui component I am using is as follows: <el-tooltip content="Top center" placement="top"> <span>Dark</span> ...

cssvue.jsvuejs2tooltipelement-ui

Having trouble with my ReactJS application where click interactions are functioning properly on the header but not on my content

Objective: Implement an iframe displaying a YouTube video with play/pause functionality for users. Issue: Unable to interact with main content, but works correctly when placed in Navigation or Footer components. Attempted Solutions: Explored various de ...

javascripthtmlcssreactjs

What is the right height and width to use in CSS?

I find it challenging to decide when to use rem, em, px, or % in web design. Although I know the definitions of each unit, I struggle with knowing the appropriate situations to utilize them. What guidelines should I follow to determine which one to use? ...

htmlcssheightwidth

Is it possible to achieve a smooth transition to the right using CSS

I'm attempting to create a sliding box effect from left to right using only transitions, similar to this: #box { width: 150px; height: 150px; background: red; position:absolute; transition: all 2s ease-out; right:auto; } .active{ bac ...

javascripthtmlcss

My draggable item seems stuck in place. Any ideas on how to get it moving again?

I have been trying to implement some code I found on this link. Despite adding all the necessary file links, the code is not functioning as expected. It should be able to move within the bounds of a container, but it's not working properly. var max ...

javascripthtmljquerycssjquery-ui-draggable

`JQuery fadeOut seems to have a limitation where it only applies to the

I have a group of divs, each containing an anchor tag that triggers a JavaScript function (which uses AJAX to delete a row from a table). Here's an example setup: <div id="container"> <div><a id="btn" onclick="deleteRow()">Delet ...

javascriptjqueryhtmlcssajax

How to Preserve Scroll Position when Toggling a Div using jQuery

I've been struggling to find a solution for maintaining the scroll position of my page after a JQUERY toggle event. I've searched extensively but haven't found a fix yet. <script src="Scripts/_hideShowDiv/jquery-1.3.2.min.js" type="text/ ...

javascriptjqueryhtmlasp.netcss

Custom sized box causing Bootstrap Navbar to be unresponsive

I am having trouble loading the Bootstrap 3 navbar inside a .box class with specific CSS rules: .box { height: 600px; width: 320px; position: relative; border: 2px solid #eee; } Unfortunately, it is not displaying re ...

twitter-bootstrapcsstwitter-bootstrap-3

The <nav> and <section> elements are not appearing on the page

Website: CSS: Hello there! I am experiencing an issue where the nav and section elements are not displaying on my website. They seem to only show the height and background-color attributes. Interestingly, they appear correctly on my old Firefox version ( ...

csshtmlnav

Utilizing Bootstrap divs for multiline display in Yii2 platform

Currently, I am utilizing a list in Bootstrap CSS which is responsive and beneficial. However, I am faced with the challenge of creating a notification list with lengthy text akin to that on Facebook. My query pertains to the technique required to make th ...

jqueryhtmlcsstwitter-bootstrap

What methods does Coinbase use to achieve this effect? Is it possible to recreate it in a React application? (Dropdown menu positioned relative to a button on hover or click

Notice the hover effect on the Businesses section, where a prepositioned dropdown menu appears, spanning the full width of the screen. How was this effect achieved and can it be recreated in React if it wasn't originally coded using React? https://i. ...

htmlcssreactjsdrop-down-menumaterial-ui