Issue with displaying fonts from @font-face on 000webhost

I recently set up my own website. Originally, I was using webs.com as my hosting provider, but they started adding an ad bar to their html-only hosting which I didn't like. So, I switched over to 000webhost. However, after moving everything to 000webhost, I've been having trouble getting the fonts to load properly.

Here are the links to my websites:

  • webs:
  • 000webhost:

I attempted to point the ttf fonts from my old webs account, but unfortunately, they are still not loading correctly on 000webhost.

Since 000webhost can take up to a day to respond to free account inquiries, I thought I would reach out here for some help. Am I overlooking something in order to get these fonts to work?

Edit: Below is an example of the @Font-face code I am using:

@font-face {
    font-family: 'fixedsys500c-webfont';
    src: url('../font/fixedsys500c-webfont.eot');
    src: url('../font/fixedsys500c-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/fixedsys500c-webfont.woff') format('woff'),
         url('../font/fixedsys500c-webfont.ttf') format('truetype'),
         url('../font/fixedsys500c-webfont.svg#fixedsys500c-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer №1

In order to comply with the guidelines set forth by Google Web Fonts, it is necessary to import the font(s) before the stylesheet.

Steps: To integrate your Collection into your website, simply copy the provided code and paste it as the initial element within the <head> section of your HTML file.

Answer №2

Avoid using single quotation marks when defining fonts for best results. Here's a simple guide:

@font-face {
    font-family:Arial;
    src:url(Arial.ttf)format(.ttf);
}

Remember, Internet Explorer is only compatible with EOT font files.

Answer №3

After my research, it seems that 000webhost specifically supports .woff files for font uploading.

Unfortunately, I have found that both .ttf and .eot file formats do not function properly on this platform.

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

Is it beneficial to incorporate AJAX functionality into my PHP classes and scripts?

I recently started working on a PHP/AJAX website and I'm contemplating the best approach to "only include the content". Should I incorporate if statements in my header and footer scripts to check for a "ContentOnly" get parameter? Then, append that p ...

Tips for incorporating a sticky toast notification in the ready state of a CI web application

Can you help me with adding sticky toast notifications to my CodeIgniter site's home page? I've tried a few things but it doesn't seem to be working correctly. <div> <p> <span class="description">To show a success ...

Are Twitter Bootstrap buttons compatible with iPad devices?

Have you ever tried using the attractive buttons provided by Twitter? They can be a great alternative to standard radio/checkbox options. If you have used them in your production, how effective were they? I am particularly curious about their compatibilit ...

undefined reference to $

I'm currently working on a JavaScript project that involves using key events to display alphabets on the screen. However, I've encountered an error and need some assistance. <!DOCTYPE html> <html lang="en"> <head> <met ...

Text overlapping image causing hover state interference

I'm feeling completely lost right now. My goal is to have the title of each project displayed in the center of the screen when you hover over the respective project images. I've resorted to using jQuery for this because it seems like the most str ...

What is the best way to highlight matching words from a list in a Django form's textarea using JavaScript?

I am working with the following form: class TestForm(Form): testfield = CharField(widget=Textarea(attrs={'rows': 10, 'id': 'test'}), label='Input test text here') Displayed in my template along with this context ...

Linking to a different webpage within HTML code

If I have two separate HTML files named footer.html and main.html. The footer file includes a link to the top of a page like this: <!-- footer.html --> <!doctype html> <html lang="en"> <head></head> <body> <footer ...

Experiencing problems with z-index and the usage of :before and :after pseudo elements on Internet Explorer

Encountering a compatibility issue on IE8 (surprise, surprise) and here's what it looks like: The current setup involves products as list items with image and details: <li class="product ships-free on-sale">stuff</li> With corresponding ...

Creating a dynamic table using JQuery to display data from a JSON object with a flexible number of fields

Dear all, I must apologize for any messy coding errors as this is my first attempt at something like this and I am learning on the go. I am currently working on using JQuery's $.each() method to iterate through a JSON object retrieved via an Ajax cal ...

What are some ways I can customize the appearance of a Bootstrap 5 Navbar specifically when it is in the collapsed

Currently utilizing Bootstrap 5, my goal is to align the Navbar social icons to the left when the navbar is collapsed for small/mobile devices, and to the right when viewed on a larger screen. Can you assist in identifying which selectors need styling for ...

The animation for the login and registration modal is malfunctioning and not functioning as

I am currently working on implementing a login/register modal in React, inspired by a TypeScript example I came across. This is how the login section looks: https://i.sstatic.net/ECvv9.png The goal is to: When the "Sign up" button is clicked, it should ...

Adjusting the gutter size for specific components in Bootstrap 4 using a mixin

How can I adjust the spacing between specific elements using mixins in my code? I've searched through numerous tutorials, but I haven't found the solution I'm seeking. Here is the code snippet I'm working with: <div class="row" id= ...

Guide on setting up p-menubar in PrimeNG to expand in the opposite direction, from left to right, for the responsive

How can I modify the CSS styles or configure the p-menubar from PrimeNg to have it expand from right to left in the responsive version? Currently, when using the classes align-items-center flex justify-content-between, the menu remains stuck to the right e ...

Passing the hex code value of the background-color to the .text() function

My goal is to dynamically read the hexadecimal code from the <span> tag and set it as the background color of the same tag using jQuery. Currently, I have code that achieves this with specific variables, but I want to make it more dynamic. $(docum ...

What is the best way to keep tab content fixed when switching?

I've successfully implemented tab switching, but I need to make the content fixed. How can I achieve this so that no matter the length of the content, it remains fixed in its position when switching tabs? The current issue is that when the content is ...

Angular 10: Unexpected Behavior with Observables

When I initially call addPost(), the observable behaves as expected with a 5-second delay. However, when I call it a second time, the data updates in the HTML without any delay. On the other hand, the same observable with deletePost() functions perfectly. ...

Tips for optimizing images for mobile screens and ensuring responsiveness

I'm trying to ensure that my image only loads on mobile screens and remains responsive so it doesn't stretch. However, the code I've written isn't working as expected. Currently, the image takes up the whole browser window and appears o ...

Tips for implementing a hover transition effect in the navigation menu

I have a specific query regarding a particular issue that I am unsure how to address but would like to implement on my website. 1) My requirement is that when the parent li element has a child, I want the navigation to remain in a hovered state with the s ...

Personalized labels for your JQuery Mobile sliders

Struggling to make this work correctly, I aim to introduce tick marks and custom labels into jQuery Mobile's slider widget. My goal is to add tick markers at 0, 25, 50, 75, and 100 with a unique string above each tick. Additionally, I want these label ...

IE10 is having trouble rendering HTML, while IE7 displays it correctly

I am experiencing an issue with IE10 where it is not rendering HTML perfectly in an iframe, even though it works fine in IE7. In IE10, it appears that the margin is not being applied to paragraphs and lists. I am using iframes to embed HTML from other fil ...