SASS - issue with font face not displaying correctly due to incorrect file path

I've recently delved into the world of SASS and I'm encountering a dilemma with importing two specific fonts: Montserrat and Open Sans. Typically, in regular CSS, you would use something like this:

@font-face {
    font-family: 'Montserrat';
    src: url('../../webfonts/Montserrat.ttf');
}

However, when I try to implement this in my SASS file with the following directory structure:

CSS
   Base
     typography.sass
Webfonts
   Montserrat.ttf

My SASS code looks like this:

@font-face
  font-family: 'Montserrat'
  src: url("../../webfonts/Montserrat.ttf")

@font-face
  font-family: 'Open Sans'
  src: url("../../webfonts/OpenSans.ttf")
  src: url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype")

Despite setting up the font declarations correctly, the fonts still do not load. I have researched similar issues but none of the solutions seem to work for me. What could be causing this problem?

csssass

Answer №1

If your folder name is Webfonts and you reference it with url("../../webfonts/..., then you have found the solution (lowercase vs. uppercase w/W).

Additionally, be aware that your code example leads to a duplicate src attribute. This may be contributing to the issue at hand.

@font-face
  font-family: 'Open Sans'
  src: url("../../webfonts/OpenSans.ttf")
  src: url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype")

The code provided above results in the src overwriting itself each time:

@font-face {
  font-family: "Open Sans";
  src: url("../../webfonts/OpenSans.ttf");
  src: url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype");
}

To address this issue, the src attribute should only be defined once with multiple values instead. A potential solution in Sass could look like this:

@font-face
  font-family: 'Open Sans'
  src: url("../../webfonts/OpenSans.ttf"), url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype")

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

Using jQuery to alter the background position of multiple backgrounds in CSS

I'm using jQuery to dynamically adjust the background image position of an element based on screen resolution. Here's the code: var pwwidth = $(window).width(); var pwheight = $(window).height(); var bg1posx = pwwidth - $('h1.portofolio&ap ...

jquerycssbackground-positionbackground-image

Tips for positioning the footer in HTML and CSS

footer { background-color: #000000 } .footer-nav { list-style: none; } .footer-nav li { display: inline-block; margin: 15px; font-weight: 400; font-size: 80% } .social { list-style: none; } .social li { display ...

javascripthtmlcssstylesfooter

How can I use CSS and jQuery to modify the background color?

I stumbled upon this page and was impressed by the continuous color changes. I looked through the source code but couldn't find the script responsible for the color changes. Can anyone direct me towards the right solution? What script was used to crea ...

jquerycss

Switch between showing and hiding a div by clicking on the panel header and changing the symbol from + to

I need assistance with a panel feature on my website. The panel should expand when the "+" symbol is clicked, displaying the panel body, and the "+" symbol should change to "-" indicating it can be collapsed by clicking it again. There is a slight twist t ...

javascriptjqueryhtmlcss

Ensure child elements do not surpass parent size in HTML/CSS/Javascript without altering the children directly

I am intrigued by how iframes neatly encapsulate all site data within a frame and adjust it to fit the size. Is there any method to achieve this functionality in an HTML wrapper? Can the wrapper be configured so that regardless of the content, it is dis ...

javascripthtmlcss

When hovering over an image to show a text box using JavaScript, it only works on one image due to the use of getElementById

I have been experimenting with some JavaScript code to create a pop-up box that appears when you hover over images. However, I have encountered an issue where it only works for one image. I suspect this is because I have used IDs instead of classes, but I& ...

javascripthtmlcss

A mysterious underscore suddenly materializes within Font Awesome icons when used in HTML

Currently, I'm working on the footer section of a webpage using HTML and Bootstrap 5.3.0. I encountered an issue where an underscore appears next to the icons when I add them. I suspect that this is due to the white spaces between the elements, which ...

htmlcssfont-awesomebootstrap-5

How can I select the specific element within a class when a particular checkbox is selected?

Having a dynamically generated list of elements, each structured like this: <div class="under-item-description"> <span class="under-compare-price">100</span><span class="under-price">50</span> <span class="under-compar ...

javascriptjqueryhtmlcsscheckbox

CSS rotation causing issues with absolute positioning

In the example below, I have demonstrated the current behavior I am experiencing and the desired outcome. // Rotated div rotated.style.left = "50px"; rotated.style.top = "100px"; // Original "untouched" div original.style.left = "50px"; original.style.t ...

javascripthtmlcss

Tips for switching a group of buttons within a userscript by clicking a single button?

Apologies if my wording is not clear, allow me to clarify. I am in the process of developing a userscript that will display a set of buttons below a main button when clicked. These additional buttons will serve different functions and should disappear whe ...

javascripthtmljquerycssuserscripts

Customizing Material UI - Overrides in MakeStyles

Hello there! I'm currently facing a challenge with adding custom CSS to a material UI App Bar. Despite using the makeStyles function, all of my styles are being overridden by the default Material UI styling. The only solution I have found so far is to ...

cssreactjsmaterial-uijssreact-snap

What is the reason behind Drupal 8 appending a GET variable to the end of each CSS file and resulting in a 404 error?

I've been struggling for hours trying to figure out why the CSS is not loading on the Drupal 8 site I'm migrating. Despite successfully resolving other issues, the CSS files are throwing a 404 error, specifically due to a GET variable (?oe62rp) a ...

phpcssdrupaldrupal-8

Maintaining an element's vertical position in relation to the screen with jQuery

I'm very close to achieving what I want, but my goal is a bit unconventional. My setup includes several panels divided into 2 columns, with each panel capable of triggering an expand/compress toggle. My challenge is maintaining the vertical position ...

jquerycss

The battle between nested flexbox heights and max-heights

Note: I am observing some unusual behavior on Chrome 72. FireFox 64 seems to be working fine! I am experiencing an issue with a nested flexbox. In the code snippet below, I have added an artificial XL height to .root.container in order to achieve the des ...

htmlcssgoogle-chromefirefoxflexbox

The overflow property is set to scroll in jQuery, causing continuous scrolling until reaching a certain point, at which it

Continuously adding new chat messages will show the latest one, but eventually it stops scrolling down automatically. How do I resolve this issue? Thank you. http://jsfiddle.net/VMcsU/ $("#button1").click(function(){ $("<div>").html("text").app ...

javascriptjqueryhtmlcss

Form-linked Progress Bar

This is a little project I created (for fun and learning purposes, even though it may not be the most optimized solution). If you're interested, here's the link to the code: https://codepen.io/paschos/pen/xxGXMQb I'm currently seeking assi ...

javascripthtmlcssreactjs

Having trouble setting background images for CSS ID, but it's working perfectly for CSS Body

When working with my .CSS file: Initially, applying the following styling: body { font-size: .85em; font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif; color: #232323; background-color: #fff; background: url('Images/Login_Background.jpg'); ...

htmlcssbackground-imagerelative-path

Minimize the screen dimensions and adjust the margins accordingly

Having a problem with responsive margins? Take a look at this site as an example: When I shrink the screen size, the margins decrease and smoothly transition from 4 to 2 columns. In my case, it does something similar but the issue is that the margin does ...

htmlcsswordpress

CSS: How come this inline-block div is not appearing on the same line as intended?

I've been tinkering with using display:inline-block on my div elements, and I'm puzzled as to why my two inner divs aren't appearing on the same line. Both divs have a width of 200px, while their parent div is set at 400px. If I switch the ...

css

Tips for styling CSS for individual "ID" elements within a primary "Class" container

Struggling with crafting CSS code to style a specific HTML snippet. Take a look at the following HTML: <div class="FourSquares"> <div id="first"></div> <div id="second"></div> <div id="third"></div> ...

htmlcss