Issue with custom font display malfunction

I'm having difficulty getting my custom @font-face to function properly. When I apply this class style to a <p>, it always defaults to Arial. Can anyone point out what might be going wrong here?

<style>
.stonefont
@font-face {
    font-family: 'effrastdltwebfontwoff';
    src: url('http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.eot');
    src: url('http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.eot?#iefix'),     format('embedded-opentype'),
     url('http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.woff') format('woff'),
     url('http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.ttf') format('truetype'),
     url('http://s3.amazonaws.com/ManualUploads/rosettastone/font/stone-webfont.svg#effrastdltwebfontwoff') format('svg');
font-weight: normal;
font-style: normal;

}

p{

font-family: "effrastdltwebfontwoff"; 
background:transparent; text-shadow: none; border-radius: 0; box-shadow: none; position:absolute;     font-size:18px;text-align:center; z-index:99; top:157px; left:64.5px; padding: 0 7px; overflow:hidden; color:black; margin:0; border:0;height:37px;width:184px;"

}
</style>

Thanks
htmlcssfont-face

Answer №1

Make sure to delete the .stonefont declaration before defining @font-face in order for your font to function correctly.

Answer №2

Initially, eliminate the .stonefont from @font-face.

I suggest uploading the font files to your FTP instead of relying on external requests to avoid loading errors.

In addition to including the font files in your CSS, you must also specify that the p element should use the font. (don't forget to provide a fallback option)

p {font-family: 'effrastdltwebfontwoff', Arial, sans-serif;}

Alternatively, if you want to apply this font as a class, modify p to .stonefont and remember to add the class to any element where you want to apply the font.

HTML:

<p class='stonefont'>Some text</p>

CSS: (Remember the single quotes)

.stonefont {font-family: 'effrastdltwebfontwoff', Arial, sans-serif;}

Answer №3

Once the erroneous .stonefont has been removed as recommended in previous responses, a new error message may appear on the Firefox console:

downloadable font: download failed (font-family: "effrastdltwebfontwoff" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed
source: http://s3.amazonaws.com/CustomUploads/rosettastone/font/stone-webfont.eot

This issue pertains to cross-site access restrictions. While it could potentially be resolved by the server administrator hosting the fonts, assuming they maintain such policies against cross-site access, one might need to download the fonts, convert them to appropriate file formats, and then host them on their own server—granted that this aligns with the font's copyright terms.

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 addScript feature seems to be experiencing difficulties upon the initial website load

Currently, I am utilizing the jquery.flexslider plugin and it is performing well. However, I have a specific requirement where I do not want to load the plugin for screens that are smaller than 600px. After experimenting with various scripts, I have final ...

javascriptjqueryhtml

Is it possible to create separate layouts for mobile devices and tablets using jQuery mobile?

Currently building a jQuery mobile app and looking to implement two distinct designs/layouts, one for mobile devices and another for tablets. Is this achievable? If yes, how can it be done? Any specific code required? Cheers! Noah ...

htmljquery-mobilemobiletablet

Step-by-step guide: Creating a captivating triangular shape on the current tab

I am trying to implement a dynamic tab using Bootstrap where clicking on a tab will display a thicker black underline, like in this image: https://i.stack.imgur.com/h48GB.png To achieve the black line effect, I have added the following code: .nav-tabs.n ...

htmlcsstabshoverselected

Angular 5 and Bootstrap card with enhanced double-click functionality

I want to design a Bootstrap card that can trigger two of my custom methods. <div (click)="TEST1()" class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Card title</h5> <button (click)="(T ...

htmlangulartypescriptbootstrap-4

How to position two Bootstrap 4 Navbars side by side

I'm currently experiencing an alignment issue with two stacked navbars in my code. I want to align the upper navbar with the lower one, but I've tried various approaches without much success. Is there a problem with the buttons or something else ...

htmlcsstwitter-bootstrap

Condense everything when displaying one at a time (various divs)

I found the solution at https://getbootstrap.com/docs/4.2/components/collapse/ My query is related to collapsing multiple elements and showing only one when divided into different divs. While it works within the same div, dividing content into separate di ...

cssbootstrap-4accordion

Tips for aligning an image in the middle of a column within an ExtJS GridPanel

My goal is to center the icon horizontally within the "Data" column: Currently, I have applied textAlign: center to the column: Additionally, I am using CSS in the icon renderer function to horizontally center it: Despite these efforts, the icon remains ...

javascriptcssextjs

Ensuring that objects remain fixed in place regardless of window resizing is a common task in web development, often achieved through a

I've been attempting to create range sliders with boxes that display the slider's current value, but I'm having trouble getting them positioned correctly when the window size changes. Despite trying various solutions found online, I resorted ...

javascriptjqueryhtmlcssfixed

Is there a way to display the output of jQuery in an input box rather than a span?

I need to display the result of this function in an input box instead of a span tag because I plan to utilize the result in the following form. function checkChange(){ $.ajax({ url: "ordercalculate.php", data: $('form').seria ...

javascriptjqueryhtmlcalculated-field

Getting the value of the chosen option from one component and passing it to another component in Angular 8

How can I pass the selected option value from the login component to the home component without using local storage? When an option is selected in the login component, I want that value to be displayed in the home component. Below is the code snippet: Lo ...

htmlangulartypescript

Looking for an effective method to implement CSS styling within a list cell in JavaFX?

As a beginner in JavaFX with limited knowledge of CSS, I struggled to conduct proper research and provide relevant information here. I apologize for any confusion or duplication. I am seeking a solution to apply CSS to JavaFX controls, specifically in a Li ...

javacssjavafx

Tips for locking the button in the navigation bar while scrolling

I noticed that when I have 6 fields in my navbar, with 5 of them being links and one as a dropdown, the scrolling of the page causes all fields to remain fixed except for the dropdown field.Check out this image description for reference https://i.stack.im ...

javascriptcsshtmlbootstrap-4

Unexpected issue with sliding menu toggle implementation

I have been struggling to make a menu slide to the left when a button is clicked, and then slide back to its original position when the same button is clicked again. Although I have been using the toggle method, it doesn't seem to be working for me. I ...

javascriptjqueryhtmlcss

Separate the selected option in the TEXTAREA by commas to make it easier to

Can you assist me with integrating this example? I have the following elements: When adding a textarea, I require an option to be selected and separated by a comma. For instance: Here I will select an option: Subsequently, this chosen option must be ad ...

javascriptjqueryhtmlselecttextarea

Is there a way to showcase images next to each other within an array in Angular 8, like having 2 images in a row and then another 2 in the next row?

Here is the HTML code I created and tested: <div class="row"> <div *ngFor="let url of urls" class="col-md-6"> <img [src]="url" alt="Image not found" height="250px" width="350px" (click)="imageClick(url)"> </div> < ...

htmlcssbootstrap-4angular8

Ensure that an input field on the PHP form is required

Currently working on a form with multiple input fields. I'm wondering if there's a way to prevent the form from being submitted to the server if a specific field is left empty. I'd like to use a JavaScript pop-up box to notify the user inst ...

javascriptphpjqueryhtml

What could be causing the shadowbox not to display in Internet Explorer?

I am currently working on fixing a shadowbox issue in Internet Explorer. The page where the shadowbox is located can be found at this link: Here is the HTML code: <div class="hero-image"> <a href="m/abc-gardening-australia-caroli ...

javascriptjqueryhtmlcssshadowbox

Obtain the context within the image loading function

I am working with an array of Image objects: let imageArray = []; ... imageArray[i].onload = function () { ... } When the onload function is triggered, I need to determine which specific Image object it is referring to. Is there a method to achieve ...

javascripthtmlhtml5-canvas

The img-wrapper is failing to show the PNG image

I'm having an issue with my code where it displays jpg images but not png. How can I make the img-wrapper show png files as well? In my example, the first image in the array is a jpg while the second is a png. However, I only see the title of the imag ...

javascripthtmljquery

Steps for performing a 'back' action within a div element using jQuery

Within my HTML, I have a div element containing a link. When the user clicks this link, I use AJAX to load new content into the div area. This new content includes a 'back' link that, when clicked, should revert back to the previous content. Cur ...

jqueryhtmlajax