CSS font-face is not functioning as expected

I'm experiencing issues with importing a CSS font, and I'm puzzled as to why it's not working.

The specific font in question is 'deadjim.ttf' and it is located within my main public_html directory. I have confirmed that the file path is correct, as attempting to visit the path leads to downloading the file.

@font-face {
    font-family: 'deadjim';
    src: url('http://url.com/deadjim.ttf'); /*URL to font*/
}

Although I attempted to clear my cache, this did not resolve the problem. Interestingly, it seems to be functional on Safari, but unfortunately, I do not have access to a Mac for further verification.

htmlcssfontsfont-face

Answer №1

It is important to remember that when using @font-face, it does not automatically style the HTML - it simply identifies the font.

#Define your custom font
@font-face {
  font-family: 'coolfont';
  src: url('http://url.com/coolfont.ttf'); /*URL to font*/
}

#Apply the custom font as default throughout the page
html, body{
  font-family: 'coolfont';
}

Answer №2

In order to ensure that your font is compatible with all browsers and most operating systems, you will need to follow a similar approach as shown below (providing all necessary formats) - simply having the .ttf file won't be sufficient.

Here's a sample of how to include FontAwesome:

@font-face {
  font-family: 'fontawesome';
  src: url('fontawesome-webfont.eot?v=4.7.0');
  src: url('fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
       url('fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
       url('fontawesome-webfont.woff?v=4.7.0') format('woff'), 
       url('fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
       url('fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

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

Gathering information in the form of a tuple with Selenium in Python

I'm having issues with gathering data as a tuple using Selenium with Python 3.6. The specific page I am trying to extract data from is located at (). My goal is to collect the "manufacturer (maker)" data from the search menu at the top of the page. h ...

pythonhtmlseleniumbeautifulsoupweb-crawler

Differences between using tables and divs for form layouts

After searching online for examples of form implementations using DIVs, I noticed that most were simple one-column forms. However, my forms are more complex, like the one shown in this image: Although I can easily create these forms using tables, I encoun ...

htmlcssformstablelayout

Experiencing inconsistencies with CSS on certain devices?

When faced with a research issue, I usually turn to Google for answers. However, this time, I was unsure of where to begin. As part of my efforts to enhance my frontend development skills, I undertook The Odin Project and worked on a calculator project. U ...

cssresponsive-designfrontendmobile-website

Determining the Width of a DIV Dynamically with CSS or LESS Depending on the Number of Siblings

One of my challenges involves a parent DIV with a width set to 100%. Dynamically, this parent DIV is filled with numerous children DIVs. I am trying to calculate and assign their widths using only the calc method in CSS or LESS. This is because the flex ...

javascripthtmlcssd3.jsless

Is there a way for me to gain access to alter the price function within Magento?

Now, I am faced with the task of customizing the discounted price for my Shopping cart. After some independent research, I discovered that by modifying the view.phtml and item.phtml files, I can properly display the desired price. However, I still feel uns ...

javascriptphphtmlajaxmagento

Changes influencing independent div elements

My goal is to design a front-end screen with images labeled steps 1-4 lined up next to each other. The concept is that when the user hovers over one of these steps, the corresponding image should fade in below them in a separate div. Upon removing the curs ...

csshtmlfrontendtransition

The webpage is drifting sideways to the right without any content being displayed

Recently, I launched a new website and encountered an issue with a static page I designed. While it may not be a critical problem, it is certainly bothering me! If you want to check out the website in question, visit: In essence, I have used CSS to hide ...

htmlscrollbarhorizontal-scrolling

- The click function is failing to work after an ajax call [Potential event delegation problem]

I have a webpage where I update the contents of an unordered list using $.get() every 5 seconds. The issue I am facing is that the click function for the list items is not working properly. Even though the list items are being updated correctly, there se ...

javascriptjqueryhtml

Using the HTML <span> and svg elements together does not allow them to be inline with each other

In my current scenario, I have a fieldset that is inline with another one on the page. The specific fieldset in question contains an SVG circle and some text. My objective is to have both elements inline with each other, while allowing the fieldset to adj ...

htmlcsssvginline

The issue of slides overlapping in a Javascript slideshow during auto play mode

I encountered an issue while creating an automatic slideshow with 4 slides. Upon autoplay for the first time, slide 1 overlaps slide 4, as well as slide 2 and 3. This only happens once after the site loads. However, on subsequent playthroughs or when using ...

javascriptjquerycssslideshowoverlapping

Displaying Text and Images on a Sliding Carousel with a Static Background Image

I am currently experimenting with the Materializecss Image Slider. My goal is to have a fixed full-screen background image while the texts and images slide over it. Initially, I tried setting the background-color of the slider class as transparent, but un ...

javascripthtmlcssslidermaterialize

Is there a way to adjust the size of a video thumbnail to fit within a

Currently, I am developing a system to remotely control home electrical devices via the web. However, I am facing an issue with fitting camera images properly within their container. How can I ensure that the video thumbnail fits perfectly in the designat ...

htmlcssreactjs

What are the steps to reveal the second element once the first one has vanished?

Is there a way to delay the appearance of the second square until after the first square has disappeared? For example, I want the first square to appear after 3 seconds and then disappear, followed by the second square becoming visible after 11 seconds. ...

css

How to execute a JavaScript function within a Jinja for loop

I am currently working on an HTML page where the variable schedule contains a series of sequential decimal numbers representing seconds. My goal is to develop a function in JavaScript/jQuery that can convert these decimal numbers into time format. However ...

javascripthtmljinja2

Is there a way to position the tooltip above the sorter icon in Ant Design (antd) component?

I'm currently working on creating a table with sorter columns using the antd framework. Can anyone guide me on how to position the tooltip above the sorter icon? Below is a snippet of my UI. https://i.sstatic.net/fGoqA.png Specifically, I included t ...

javascriptcssreactjsantd

Manipulating checkboxes with Jquery

I have set up a scenario with two divs and two checkboxes. When the first checkbox is clicked, the first div will appear. Subsequently, if the second checkbox is clicked, the second div will appear below the first div. I initially styled both divs. Howev ...

jqueryhtmlcheckbox

Steps to include a border around text and center align it:

As a beginner in Html and CSS, I am trying to create a heading with the text "Women safety" and wrap it with a border. However, when I apply the border to the text, it covers the entire width, extending both left and right. I only want the border to be a ...

javascripthtmlcssborder

The required keys [:id] are not included in the route matches

As a beginner in Rails, I've encountered similar issues that I can't seem to resolve. Here are my routes: resources :users do resources :items end My model setup is as follows: class Item < ActiveRecord::Base belongs_to :user end cl ...

htmlruby-on-railsrubypathroutes

Tips for crafting HTML emails that avoid users inadvertently selecting extra spaces while copying and pasting

There is an email that I send out with a specific string that needs to be copied and pasted only once. The issue arises when users copy the string from Outlook as they tend to unintentionally include an extra space at the end of it. Although I understand ...

htmlhtml-emailcopy-paste

How to select the final td element in every row using JQuery or JavaScript, excluding those with a specific class

I am looking for a solution with my HTML table structure: <table> <tbody> <tr> <td>1</td> <td>2</td> <td class="treegrid-hide-column">3</td> < ...

javascriptjqueryhtmlcss