An issue with the font display

I'm having trouble with a specific font on my webpage and jsfiddle, even though it works fine on w3schools website.

Here's an example on jsfiddle

HTML

<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>

CSS

@font-face {
   font-family: "Penultimate";
    src: url("http://db.onlinewebfonts.com/t/17a456c0eb7e6bd88cb1d090126915f7.eot");
    src: url("http://db.onlinewebfonts.com/t/17a456c0eb7e6bd88cb1d090126915f7.eot?#iefix") format("embedded-opentype"),
    url("http://db.onlinewebfonts.com/t/17a456c0eb7e6bd88cb1d090126915f7.woff") format("woff"),
    url("http://db.onlinewebfonts.com/t/17a456c0eb7e6bd88cb1d090126915f7.ttf") format("truetype"),
    url("http://db.onlinewebfonts.com/t/17a456c0eb7e6bd88cb1d090126915f7.svg#Penultimate") format("svg");
}

div {
   font-family: Penultimate;
}

Answer №1

Due to the use of HTTPS on JSFiddle, some browsers may block loading the font as a security measure, resulting in errors appearing in the browser console.

If you're using Firefox, you have the option to temporarily bypass these errors by clicking on the certificate section located in the address bar.

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

The height auto transition in CSS3 begins by shrinking to a height of 0 before expanding to

My CSS code looks like this: .foo { height:100px; overflow:hidden; -webkit-transition: height 200ms; -moz-transition: height 200ms; -o-transition: height 200ms; transition: height 200ms; } .foo.open { height:auto; } When the ...

Customize Material UI components by incorporating SASS classes

Currently, I am using Material UI components but I want to streamline my styles by moving them all into a .scss file. Right now, I have a significant styles object within the same JavaScript file where I am utilizing the Material UI components. This styles ...

How can I line up elements in different divs when the width is adjusting based on the window size?

Trying to align a search input and a result element in separate containers when the window size changes. Looking for a solution without using Javascript. One window size: https://i.sstatic.net/LiQtY.png A smaller window: https://i.sstatic.net/dgj4I.png C ...

Optimizing Divs for Maximum Layout Efficiency

My current issue involves a series of divs that contain varying amounts of content. These divs are floated left and I am striving to align them seamlessly without any vertical space between them (except for the 10px margin that I have included). You can v ...

Retrieve the concealed division element's HTML content along with its formatting

Help needed with appending a hidden div with its styles intact. Despite using the code provided below, the appended div does not retain its styles. Any suggestions for an alternative method? var warningMessage = $('#warningDiv').html() fun ...

Enlarge the image to fill the entire screen

Currently, I am working on a webpage where I am displaying data fetched from a database using Laravel framework. The code snippet is shown below: Here is how the webpage looks like - image1 What I aim to achieve is to make the div go fullscreen upon clic ...

What could be causing the absence of the margin in my code?

I am currently working on a website layout where I want to display an image with some information below it, and the information should have a colored background with some margin around it. However, when I try to view the code I have written, the margin i ...

When you hover over a Wordpress page, the entire text on the page will be underlined

Currently designing my own website using WordPress with the Elementor free plugin and Phlox theme. I've made some progress by completing a few sections which include text, buttons, and images. However, I'm encountering an issue where all the text ...

Styling elements conditionally in React JS using inline styles

If the status of this task is 'Completed', I would like to hide the button (similar to adding a display: none property). Code: <Button size="small" style={{display:this.state.task.status == "Completed" ? "none":""}} ...

Can someone explain the purpose of `svg:not(:root) {overflow: hidden}` in simple

I am facing an issue with displaying my .svg file in my next-js project. It seems that the CSS code svg:not(:root) { overflow: hidden; } is causing the problem. Could someone explain what this particular CSS rule is for? After changing the code to svg:no ...

Ways to adjust flex division to occupy the entire height of its container

https://i.sstatic.net/4YInI.png https://i.sstatic.net/hu8mG.png https://i.sstatic.net/Q51ha.png I am looking to activate an onClick event on the body where discussions and icons are located. While triggering onClick on the body itself poses no issue, I a ...

Center text in form-control items on Bootstrap 3 grids

Can you provide guidance on achieving proper alignment of inputs and labels across bootstrap grids? I am looking to ensure that the labels are positioned exactly the same as the first column. Please refer to my plunk: http://plnkr.co/edit/jaMAp38Rr1g7BLW ...

Guide on adding CSS3 ribbons to elements on both sides

I recently came across a tutorial that teaches how to create a CSS ribbon. However, after following the tutorial, I found that the ribbon only appears on one side of the element. This has left me wondering if it's possible to have the ribbon display o ...

displaying the information when we mouse over a specific row in the table

I need to display a pop-up with data from a table row, similar to the image at this URL for CS WHOLESALE GROCERS. I've implemented the following AngularJS code in my controller: app.directive('tooltip', function(){ return { res ...

What is the reason behind the CSS not rendering when async:false is used?

I find it peculiar and am actively seeking an explanation for this anomaly. In my code snippet, the AJAX call seems to be causing unexpected behavior: $('.edit-config').click(function() { var that = this; var msg; ip ...

What is the best way to create an impact?

Need help fixing the parallax effect on this page. I attempted to implement a parallax effect but encountered some issues. Here is the JavaScript code: $objWindow = $(window); $('section[data-type="background"]').each(function(){ var $bgOb ...

How to create a dynamic background color animation in jQuery similar to a progress bar animation

I have a container with text content (for example: My Name) and it is displayed in a RED background color along with a button. What I am looking for : When the button is clicked, I want to change the background color of the container from RED to BLUE, si ...

developing a fluid grid system with flexible ordering

I'm currently working on a section for my app that consists of one row with 3 columns, each column containing 3 divs. JSFIDDLE: demo Here is how it should appear in desktop view: https://i.sstatic.net/ugAXd.png And here is the expected appearance ...

Achieving a Side-Along Sidebar with CSS, Fully Embracing

I'm encountering an issue with achieving 100% height using CSS. Despite my extensive search for tutorials and solutions, I haven't been able to achieve the desired results. My layout consists of a sidebar and a main column where the content will ...

Similar to the :has() in jQuery, the equivalent in CSS

Consider the code snippet below: <div class="section"> <div class="row">...</div> <div class="row"> <!-- bottom margin here needs to be 0 --> <div class="section"> &l ...