I've been attempting to change my font using the font-face rule, but it's not working. Every time I try, it displays an error saying "@font-face declaration doesn't follow the fontspring bulletproof syntax". I've searched online for a solution but haven't found one yet. Here's the code I'm using:
@font-face {
font-family: "MyFont";
src: url(fonts/Benne-Regular.ttf) format("truetype");
}
h1 {
font-family: "MyFont";
}
Can anyone help me figure out what I'm doing wrong?
There may be other linters besides CSS Lint that check for this particular issue. It involves using the ?#iefix string as a workaround for a historical Internet Explorer bug related to parsing font URLs. Fontspring refers to this workaround as the bulletproof @font-face syntax.
If you are not concerned with supporting outdated versions of Internet Explorer, you can safely disregard this warning. It is recommended to switch from CSS Lint to a more current tool like stylelint, as CSS Lint has not been updated in quite some time. The bulletproof syntax is a relic of the past and is no longer necessary in modern web development.
If you do need to support older versions of Internet Explorer, or if you are unable to disable CSS Lint and wish to resolve this warning, you can adjust your code as follows:
@font-face {
font-family: "MyFont";
src: url("fonts/Benne-Regular.ttf?#iefix") format("truetype");
}
h1 {
font-family: "MyFont";
}
It appears that your format is correct, as Roddy mentioned. Please double check your URL. Below is your code using the Benne font from Google CDN:
@font-face {
font-family: "MyFont";
src: url(https://fonts.gstatic.com/s/benne/v10/L0xzDFAhn18E6Wj2nN8.woff2) format('woff2');
}
h1 {
font-family: "MyFont";
}<h1>test</h1>Hey there! I'm new to working with nodejs and mongodb, and I'm trying to create a function that updates the win, lose, and draw record in my UserSchema. Here's my Schema: UserSchema = new mongoose.Schema({ username:'string', ...
I have been trying to figure out how to make an image a link in NivoSlider. I know that I can use captions to create a link, but I want the actual image to be clickable for better accessibility. I found a similar question on StackOverflow, but it was rela ...
Currently, I am in the process of creating a simple quiz application. While working on this project, I encountered an issue with linking a JS file in an HTML template. Even though I have confirmed that the path is correct, every time I run my node app, the ...
Is there a way for a specific form component to function as radio buttons, with only one option selectable at a time, without displaying the actual radio bullets? I am looking for alternative presentation methods like highlighting the selected option or ...
I'm a beginner when it comes to Javascript, Python, and PHP. In my Javascript program, I have a button that triggers a Python script and displays the returned value on the screen. My goal is to steer clear of using Jquery and Json. Here are the snipp ...
I've encountered an issue with the borders of the text fields in my React project. Here's how I want the text fields to look: https://i.stack.imgur.com/MP6DG.png Currently, the borders appear straight in the browser even though I want them rou ...
I am currently utilizing Create React App for my react application but I am in the process of migrating to Next.js. Accessing URL data such as host, protocol, and query parameters has posed a significant challenge. After some trial and error, I realized t ...
I am working with multiple product elements that are dynamically assigned their class and ID using PHP: $product1["codename"] = "product-1"; $product1["short"] = "Great Product 1"; $product2["codename"] = "product-2"; $product2["short"] = "Great Product ...
Currently, I am working on a website that was started by a former colleague. One issue I have noticed is that when the browser window's resolution reaches 768px or lower, the navigation transforms into a drop-down menu that appears wider than the page ...
I am trying to create a range input with a dynamic background color that changes as the slider is moved. Currently, the background is blue but I want it to start as red and transition to yellow and then green as the slider moves to the right. Does anyone ...
I'm trying to create a button that displays three consecutive posts After clicking on "view all", the three "div" elements should become visible I'm attempting to use jQuery to make the three 'div' elements appear when the view all bu ...
Hi everyone, I'm a newcomer to form creation and I'm excited to hear all of your insights. Currently, I'm working on a small website and I've encountered an issue with generating unique HTML ids. I am using a loop in PHP to generate th ...
Currently, I am immersed in a project that requires storing webpages in a database. To accomplish this task, I am utilizing crawler4j for crawling, along with Proxool and MySQL Java Connector to establish connections with my database. During testing, an e ...
In the process of creating a comparison table for products, I have designed a table with vertical rows. The header is positioned on the left side, with two or more product descriptions displayed in vertical rows within the table body. To accommodate a scen ...
Currently, I am practicing flexbox and breakpoints in material UI using React.js and I am attempting to achieve a layout similar to this: https://i.sstatic.net/vAkdo.png My goal is to have the product images and type displayed in columns, while the produc ...
Is there a way to replicate the shadow effect seen on the slider at using pure CSS? I've managed to recreate it in Photoshop, but I'm hoping to achieve the same result through CSS for a cleaner solution. ...
My website has a navigation menu with a sub-menu that appears when hovering over the parent element. While this works smoothly on modern browsers, Internet Explorer 8 presents an issue. When hovering over the parent li element in IE 8, the sub-menu is disp ...
Presented here is a collection of data points and a button nested within an ul <ul> <li class="mix" category-1="" data-value="600.35" style="display:block;"> <figure> <figcaption> <h3> ...
My AJAX function is set up like this: function update_session(val) { var session_id_to_change=document.getElementById('select_path').value; $.ajax({ type: "GET", url: "/modify_path/", asy ...
Despite using the "dancing script" Google webfont and adding it through @font-face, font-family, I am unable to see it in the browser. I would like to know how to determine which fonts are correctly uploaded and rendering properly while viewing a website ...