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

Arranging components in a horizontal layout on Jquery mobile

I'm completely new to Jquery mobile and I'm having trouble getting these elements aligned. Here's my code, but I need the two icons to line up horizontally with the caption "Heading". <h3>Heading</h3> <img src="../re ...

htmlcssjquery-mobile

What is the optimal way for text selection to operate within a clickable component on a web application?

We're currently developing a web application with expandable/collapsible elements. Here's an example of one of the clickable items: https://i.stack.imgur.com/jdLOu.png The text selection behavior when clicking on the element is causing some an ...

htmlcssweb-applicationsweb

Stop the content inside a div box from wrapping around the edges when using Bootstrap

Utilizing bootstrap to structure a webpage, I have organized three divs next to each other within a row. The widths of the divs are set as follows: 2 columns, 6 columns, and 4 columns in a 12 column layout. The middle div has a minimum width defined. As a ...

htmlcsstwitter-bootstrap

The button's URL will vary depending on the condition

As a newcomer to coding, I am seeking guidance on creating a button with dynamic URLs based on user input. For instance, let's say the button is labeled "Book Now" and offers two package options: Standard and Premium. I envision that if a user selec ...

javascripthtml

The color of the top bar remains unchanged when hovered over

I am struggling to design my personal website, and I can't seem to get the top bar to change color on hover. If you believe you have a solution, please provide your answer. index.html appears to be functioning properly, but perhaps additional adjustm ...

htmlcss

Is there a way to convert various elements sharing the same class into a list of array items?

Essentially, I am dealing with multiple elements sharing the same class name. My goal is to retrieve an array of integers from an API and then iterate through each element with this class name, replacing them with elements from the array sequentially. For ...

javascripthtmlarraysclassweb

What could be causing the malfunction of this JavaScript dropdown select feature in Internet Explorer?

I created a website that requires users to input their location, including the city and state. The process involves two dropdown menus: - The first dropdown menu, labeled "state," loads all USA states as selectable options when the website is loaded. This ...

javascriptjqueryhtmljsoninternet-explorer

Modify the button input value within a PHP script

I am currently working on a piece of code that involves following different users and inserting values from a MySQL table. <td align="center"> <input type="button" name="<?php echo $id; ?>" id="<?php ech ...

javascriptphphtmlmysql

Unable to choose anything beyond the initial <td> tag containing dynamic content

Struggling to implement an onclick delete function on dynamically selected elements, but consistently encountering the issue of only selecting the first element each time. // Function for deleting entries $("#timesheet").on('click', &ap ...

javascripthtmljqueryajax

I am encountering an issue where my ejs file is not rendering properly even after moving my static files to the public folder and including the line of code app.use(express.static("public")). Can anyone help

After relocating the index.html and css files to the public folder and adding app.use(express.static("public)) in app.js, everything was working fine and the list.ejs was rendering correctly. However, there seems to be an issue now. const express = re ...

javascripthtmlexpressejs

New Ways to Style the Final Element in a PHP Array - Part 2

So, here's the current challenge I'm facing along with a detailed explanation of what I'm trying to achieve. Initially, following your suggestions worked smoothly; however, things took a drastic turn when I altered the ORDER BY field and int ...

phpcssarrays

Header and footer on iPad are not extending to full width even when set to 100% width

Upon viewing this link on an iPad, you may observe that the header does not span the full width of the page, leaving a noticeable pixel gap on the right side. The same issue is present with the footer. It is puzzling to me because both elements are set to ...

htmlcss

Align text in the middle of an image

I need some help with formatting my web page. I want to move the content of the red rectangle into the green rectangle, like in the image below: https://i.stack.imgur.com/sAved.jpg The goal is to center the text with the picture. I've tried using di ...

css

Module not found in Node.js environment (webpack)

I seem to be encountering an issue with loading any modules. Despite reinstalling my operating system, I continue to face the same error when attempting to use any module. I have tried reinstalling node, clearing the cache, and more. To view the code, pl ...

cssnode.jswebpackcss-loader

retrieve the timestamp when a user initiates a keystroke

Seeking assistance from the community as I have been struggling with a problem for days now. Despite searching on Google and Stack Overflow, I haven't found a solution that works for me. My web application features an analog clock, and I need to capt ...

javascripthtmlclock

Pagination displays identical data on each page

When utilizing pagination in my AngularJS application to display search results fetched from an API call, I encountered an issue where the same data set appears on all pages. Here's what I have attempted: Within the Controller $rootScope.currentPag ...

htmlangularjspaginationcontroller

JavaScript code to toggle the navigation bar on mobile devices

I am experiencing an issue with a script that is not performing the desired task. I am looking for a script that can add the Class "active" to a ul element with the id "btnMob0". Currently, my script looks like this: <script type="text/javascript"> ...

javascriptjqueryhtmlcss

JavaFX Animation for Charting

My FXML file contains a JavaFX AreaChart <AreaChart id="myAreaChart" onMouseClicked="#handleAreaChartMouseClicked" GridPane.columnIndex="0" GridPane.rowIndex="0" fx:id="myAreaChart" > <xAxis> <Nu ...

javacssanimationchartsjavafx

Identifying and handling the removal of a complete div element by the user

Is it possible to remove the entire div element if a user tries to inspect the web browser using the script provided below? <script type="text/javascript"> eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/, ...

javascripthtml

Loading indicator for buttons

Issue with submit button onclick function (onClick="mandatoryNotes()"). It is taking a while to load, so a preloader script was added. The preloader is now working, but the function is not being called. Seeking assistance. Thank you. function mandatoryN ...

javascripthtml