Creating custom fonts using compass

Apologies if my English is not up to par, as I am French. I'm encountering an issue where I include a font-face in my scss file like so:

@include font-face("Enhanced Dot Digital", font-files("font/enhanced_dot_digital.ttf"));

However, upon compilation, the resulting CSS file looks like this:

@font-face {
  font-family: "Enhanced Dot Digital";
  src: url('///fonts/font/enhanced_dot_digital.ttf') format('truetype');
}

The problem lies with the incorrect path for my font (located at font/enhanced_dot_digital.ttf), which I suspect is causing it not to work. Unfortunately, I am unable to remove the '///fonts' part and I don't know its origin. Could you please assist me with this dilemma?

csscompilationsassfont-facecompass-sass

Answer №1

Before making any changes, make sure to review the config.rb file where the "fonts" path is specified. It appears that the path is already configured in there for your convenience. To modify it, consider updating it to this: 

font-files("enhanced_dot_digital.ttf")
and adjust the path in the config.rb to fonts_dir = "font" or whichever directory contains your font files.

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

Align three or more Font Awesome icons in a row at the center

When it comes to center aligning an icon, I typically use margin: auto;, text-align: center;, or left: 50%; transform: translateX(-50%);. However, I've run into a hurdle trying to center align three icons together. I thought applying these techniques ...

htmlcssless

Browsing HTML Documents with the Click of a Button

After collecting JSON data from a SharePoint list, I am currently in the process of creating an HTML Document. At this point, I have completed approximately 80% of the expected outcome. Due to Cross-Origin Resource Sharing (CORS) restrictions, I have hard ...

javascripthtmljquerycssjson

jQuery will envelop the HTML elements in an inconsequential div

Imagine a website that is visually complex, with various styles and images positioned in different ways. What if we wanted to add a small overlay icon above each image? At first, the solution might seem simple - just use absolute positioning for a span el ...

javascriptjquerycssdomjquery-wrap

Every time I make changes to the page, the outdated CSS keeps reappearing

I recently updated the CSS for React CKEditor 4 on my website to give it a better look. The changes were reflected when I first viewed the page on localhost, but strangely, when I go to another page with CKEditor 4, it reverts back to the original stylin ...

cssreactjssassckeditor

The website is experiencing display issues when viewed on Internet Explorer 10 and above

I am currently managing a few websites running on aspx with an older version of DNN 4.x. While these sites display properly on Google Chrome, Fire Fox, Opera, etc., I have noticed that there are rendering issues specifically on IE 10 and above for the navi ...

htmlcssinternet-explorer-10internet-explorer-11

Using Bootstrap to align items to the right in a navigation bar

I've been attempting to align certain elements to the right in the navbar using Bootstrap by utilizing mr-auto, but it doesn't seem to be functioning properly. What steps should I take to ensure it works correctly? Below is a snippet of my index. ...

htmlcsstwitter-bootstrapbootstrap-5

Fade in and out list items while adjusting the height of the container

Check out this code snippet I put together in Codepen: <div class="slider"> <ul> <li id="S1"> <div class="txt"><p>First slogan</p></div> <div class="img"><img src="http://placehold.it/80 ...

jqueryhtmlcss

The peculiar characteristics of border-radius

Discovering a new way to create elliptical border-radius has opened up my design options. border-radius: horizontal radius / vertical radius At first, I experimented with border-radius: 10px 20px/10px, and it worked perfectly. But when I tested border-r ...

htmlcss

Utilizing form elements within a label_tag in Ruby on Rails

I am looking to wrap my text fields and other form elements in a label tag: <label for="response">Tell me what you think: <input type="text" id="response" name="response"/></label> This allows me to apply CSS like the following: label ...

htmlcssruby-on-railsruby-on-rails-3ruby-on-rails-3.2

Achieving consistent image column heights that decrease evenly

I am trying to create a grid-like layout where each column in a row has the same height and contains an image while maintaining its proportions. Currently, I am using the flex-grow property to adjust the ratio of the images. Although this works, it often ...

htmlcssflexbox

I have a question regarding the CSS universal selector

I've been working on developing a website, but I'm having trouble with the universal selector. No matter how many times I try, it just won't work. If you'd like to see an example of what I'm dealing with, check out this link: https ...

css

increasing the top margin on an HTML document

Looking to create a specific amount of blank space at the top of your HTML page? The space needs to be exactly X pixels tall. How can this be achieved effectively, while ensuring compatibility with Safari? ...

htmlcsssafari

How to target the following sibling element (not a child) with CSS

I am working with the following HTML structure: <div class="col-sm-12"> <input id="my_id"> <div class="col-sm-1 col-3-box" style="position:absolute; margin-left:340px;"> </div> </div> How can I target and change ...

htmlcss

Tips for adjusting the size of a container to fit its child element in a flexbox layout, where the flex-direction is set to column

Below is the functional code: .container{ display: flex; background-color: lightgreen; justify-content: center; alighn-item: center; } .child{ margin-left: 10px; height: 200px; background-color: yellow; display: flex; flex-direction: ...

htmlcssflexbox

Exploring the Design of Autocompletion Lists on Chrome

Today, I need to bring a problem to your attention. For the past few weeks, there has been a design issue on my website in Chrome. My autocompletion list has become a total nightmare... Previously : Current situation : I want the list to be more promine ...

cssangularjsgoogle-chromezurb-foundation

What is the best way to ensure uniformity in my boxes (addressing issues with whitespace and box-sizing using flexbox)?

Below is the code I have written: body { padding-top: 20px; text-align: center; background-color:black; } h1 { display: inline-block; background: white; } h1 { font-size: 30px } p { background: yellow; } .container { display: flex; ...

htmlcss

What is the best way to display two items from a list while hiding the rest?

I received a list generated from the backend that looks like this: <ul> {% for item in items %} <li>{{item }}</li> {% endfor %} </ul> My goal is to display only the first two items and collapse the rest, possibly with a 's ...

jqueryhtmlcsstwitter-bootstrap-3

Maintaining the position of the screen as you type in information that is located outside of the container

I am encountering an issue with the input/text-area element in absolute position extending halfway outside the container. The screen position seems to follow the caret as I type, but I'd prefer to keep writing and have part of the text hidden beyond t ...

javascriptjqueryhtmlcss

Is there a way to enable scrolling in the background when a modal is open?

I recently designed a bootstrap modal, but I encountered an issue where when it appears, the vertical scrollbar on the background page becomes disabled and the content shifts to the right by the width of the scrollbar. I want to prevent this content shif ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Using a background image in CSS

I'm having an issue with this code. It doesn't seem to be displaying anything on the screen: <!DOCTYPE HTML> <head> <title> CSS(lab2) </title> <meta charset="UTF-8"> <style type = "text/css"> ...

htmlcss