The implementation of @font-face is failing to display on all currently used web browsers

Hey there, I could really use some help with getting @font-face to work properly. Despite trying numerous solutions, I still seem to be missing something.

If anyone can spot what I'm doing wrong, please let me know!

  @font-face {
  font-family: "Asbah";
  src: url('http://www.dafont.com/asbah.font.ttf') format ('truetype'),
  url('http://www.dafont.com/asbah.font.woff2') format('woff2'),
  url('http://www.dafont.com/asbah.font.woff') format('woff'),
  p {
    font-family: 'Asbah';
    font-size: 12px;
  }
<p>
  Hello, this is the Asbah font... but unfortunately it's not working properly.
<p>

htmlcssfontsfont-face

Answer №1

To implement custom fonts on your website, use the following code:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

It's important to include multiple font formats for compatibility across different browsers. If you're missing certain formats, you can generate them all using a tool like .

For more technical details, refer to this resource: https://css-tricks.com/snippets/css/using-font-face/

Answer №2

Verify that the font URL is accurate. Consider serving it from a CDN or locally

Answer №3

Did you correctly set up the mime types? You might find this link helpful:

Answer №4

@font-face is limited to fonts that are stored on your own server.

If you want to use external fonts, you will need to utilize @import.

For example, if you wish to use Google Fonts, you can do so by using:

@import url(//fonts.googleapis.com/css?family=Open+Sans);

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

Steps to fully eliminate the recent action panel from Django's administrative user interface

Is there a way to completely remove the recent action panel from Django admin UI? I have searched extensively but all the information I find is about clearing the data in the panel from the database. What I'm looking for is a way to entirely eliminate ...

pythonhtmlcssdjango

Enable row selection in UI-Grid by clicking on a checkbox with AngularJS

I am a newcomer to angular js and I am looking to have the checkbox automatically selected when clicking on a row to edit that specific cell. I have implemented a cell template to display the checkbox in the UI-grid, but now, when I select a row, the row i ...

javascripthtmlangularjscheckbox

Apply the cursor property to the audio element and set it as a pointer

I have a question: how can I apply a cursor style to my <audio> controls? When I try to add them using CSS, the cursor only appears around the controls and not directly on the controls themselves. Below is the code snippet: <audio class="_audio" ...

javascripthtmlcss

Crafting a custom React Native button component with an asymmetrical design

I am trying to design a unique custom react native button that is slanted on one side. Despite reading numerous articles, I haven't found a solution that meets my specific requirements. Below are examples of how I would like the buttons to look – on ...

javascriptcssreactjsreact-nativebutton

Exploring Grails Assets, Redirections, Secure Sockets Layer, and Chrome

Using Grails 2.1.1 with the resources plugin, I have encountered an issue when incorporating the jstree library which comes with themes configuration: "themes":{ "theme":"default", "dots":false, "icons":true } The JavaScript in the library locat ...

javascriptcssgrailsjstree

Tips for incorporating unique images into each individual flex box

I am new to the world of coding, having just embarked on this journey less than a week ago. Following a tutorial by a developer on YouTube, I tried to add my own twist to the project in order to differentiate it from the original. However, I've hit a ...

htmlcssflexbox

The functionality of a button within an AngularJS directive is not functioning as intended

I am trying to use a directive twice on one page. Inside the directive, there is a button that should toggle between showing the two directives when clicked. However, I'm encountering an issue where the values are not changing even though the ng-click ...

javascripthtmlangularjsangular2-directives

Prevent background music from being manipulated

I've implemented an audio HTML element with background music for a game: <audio class="music" src="..." loop></audio> However, I have encountered an issue where upon loading the page, I am able to control the music usi ...

javascripthtmlaudio

I am looking to verify a time input using Joi

I have created a form with date and time input fields. I utilized the joi library for input validation to ensure that the date and time inputs are not left empty separately. Although I have managed to apply date validation successfully, I am facing challen ...

htmlnode.jsjoi

Choosing various files from separate directories within an HTML input type="file" element

Is there a way to select multiple files from various directories using the HTML input type="file" element? I have been searching for resources on how to do this without any luck. Are there any npm packages that can assist with achieving this functionalit ...

javascripthtmlreactjsvue.jsfrontend

The HTML table is displaying with an offset, which is probably caused by the *ngFor directive

I'm having trouble aligning the HTML table properly, as it seems to be misaligned. The issue I am facing is related to the inner loop (modification) which is a list inside of Revision (basically, Revision 'has a' modification list). Althoug ...

htmlangulartypescript

Tips for Ensuring Consistent Logo Appearance Across Various Browsers

The text I added to a website appears perfectly aligned on Chrome and Explorer, but on Safari, it's positioned below the logo. How can I resolve this issue without affecting the view in other browsers? The desired layout should show as "LOGO | TEXT," ...

htmlcss

Exploring the implementation of if/else statements in Sass/HTML

I need assistance with customizing the appearance of a save button on my form. The button is currently disabled and appears in blue color, but I would like it to change to a different color until all fields within the form are completed. Even though it c ...

cssangulartypescriptsass

Discovering the window scroll unit when clicking, as a page smoothly transitions to the top for a specified target position

Is there a way to achieve parallax scrolling on window scroll and navigation click simultaneously? When navigating and animating the page to the top to show the target, I also want to get the window scroll unit. How can I obtain the window scroll unit on ...

javascriptjqueryhtmlcss

Position the div element below the navigation bar

I am attempting to embed a Leaflet map within a standard Sails.js view. Sails.js automatically includes a page header on every page. Currently, with a fixed height, the map appears like this: #mapid { height: 400px; } https://i.sstatic.net/pzOdql.jpg ...

csssails.js

Is there a way to clear a @font-face downloaded font from the browser cache?

Recently, I realized that I made an error in my webapp release by using a limited version of "Droid Sans" with @font-face for Latin characters. The font files are hosted on my server. To rectify this issue, I have now updated the font to the full version s ...

cssfont-face

What is the best location to integrate jQuery UI Bootstrap in a Rails project

In order to use Bootstrap and jQuery UI together in my application, I decided to integrate jQuery UI Bootstrap. Unfortunately, many of the gems that handle asset pipeline integration seem outdated, so I opted to manually download the CSS files and insert t ...

jquerycssruby-on-railstwitter-bootstrapjquery-ui

Tips for creating responsive emails

Yesterday, I posted about my email newsletter and received some helpful feedback on creating a good structure. I implemented the suggestions provided into my newsletter and also added media query code to make layout adjustments for supported email clients. ...

htmlcssmedia-querieshtml-email

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

Learn how to utilize AngularJS Material to toggle the enable/disable functionality of a checkbox

Can someone assist me in enabling and disabling the checkbox as shown in the attachment image https://i.stack.imgur.com/l6g1C.jpg View the PLNKR angular.module('BlankApp', ['ngMaterial']) .config(['$mdThemingProvider', fun ...

cssangularjshtmlangularjs-material