Issues with Font-Face Implementation

Hey there! I'm currently working on incorporating a new font into my website using font-face. However, it seems like something might be missing from my code because the style isn't being applied correctly. Here is what I have so far:

<div id="logo">
      <img src="img/header/THANATHOS.png" alt="Logo"/>
      <p>a gamers community</p>
</div>

<style>
@font-face {
    font-family: 'HarlowSolid';
    src: url('Fonts/normal/HarlowSolid.eot'); /* IE9 Compat Modes */
    src: url('Fonts/normal/HarlowSolid.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Fonts/normal/HarlowSolid.woff') format('woff'), /* Modern Browsers */
         url('Fonts/normal/HarlowSolid.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('Fonts/normal/HarlowSolid.svg#svgFontName') format('svg'); /* Legacy iOS */
}

div#logo p{
    font-family: HarlowSolid , Helvetica , sans-serif;
}
</style>

Can you help me figure out what's going wrong here?

htmlcss

Answer №1

Be sure to wrap your code in 

<style> /* Your Code Here */</style>
tags, or place it in your style sheet.

Double check the file path where you have written the code. For example, if your code is in /css/style.css and harlowSolid.woff is in a folder called fonts at the root level, the code should be 

url('../Fonts/normal/HarlowSolid.woff')

Verify that the browser you are using supports font-face by visiting this link. However, with the conditionals you have included, encountering an issue is unlikely.

Make sure the code you posted is correct, and that your files exist and are structured properly.

If you are using Chrome, Safari, or Firefox, you can typically right-click -> Inspect Element, and look for the red cog symbol in the bottom right corner to indicate coding or resource errors. Click on it to see a description of the problem.

Answer №2

Is the second source correct? Take a look at http://www.w3schools.com/css3/css3_fonts.asp

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

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

Scale transformation - I am aiming for it to exceed the limits, yet it remains contained within

Currently, I am working on enhancing my carousel by implementing a zoom effect when hovering over the images. However, I have encountered an issue where the image gets hidden within the div container and doesn't overflow as expected. I tried adjusting ...

javascriptcssreactjsnext.jssass

Show me all the posts from the database in a single row

When attempting to display all the entries from my posts table in the database, I noticed that only one entry is showing up. If I try to duplicate the code, it simply repeats the same ID from the posts table. <div class="row"> <?php $query ...

phphtml

Searching for a specific value within a list that has been fetched from a database using AngularJs can be achieved by simply clicking on the search button

Seeking assistance on a search functionality issue. I am able to filter search results from a list retrieved from the database and displayed on an HTML page, but facing difficulty in getting complete search results from the controller. When clicking the se ...

javascripthtmlangularjs

Issues with PHP login/logout functionality found - PHP

My login/logout php code is not displaying correctly in my navigation bar. I want the navbar to show 'logout' when the user is logged in, and vice versa. On top of my header.php page: <?php session_start(); require "includes/dbh.inc.php" ...

phphtmlbootstrap-4

The container is not showing the JSTree as expected

My current project in JavaScript involves integrating a JSTree structure, but I'm encountering an issue where the tree is not showing up or rendering within its specified parent container. Below is the snippet of code I have been using to attempt to d ...

javascripthtmljstree

Adjust the dimensions of the Twitter Bootstrap Modal to match the maximum resolution of the user's screen

When the "Launch demo modal" button is clicked: I would like the modal to adjust its width and height based on the user's screen resolution, maximizing the available space. Additionally, I want the modal to appear in the top left corner of the docume ...

jquerycsstwitter-bootstrap

Tips for maintaining sequential numbering in Mediawiki sections

Looking to enhance the formatting of numbered lists by adding section headers and restarting numbering? The old Mediawiki format supported this, but it no longer works in version 1.24. For example: ==First Header2== # # ==Second Header2== # Desired output ...

cssheadermediawikiindentationnumbered-list

I will receive a 404 error if I try to access a URL without including the hashtag symbol

Is it feasible to display a record by directly inputting the user ID in the URL without using the # symbol? I am currently working on a website where I have a single view page named Login.html. I want to be able to access this page by entering the user&ap ...

angularjshtmlurlurl-routingangularjs-routing

The chatbot text input feature is malfunctioning and failing to display the entered text in the chatbox

Hi there! I'm in the process of creating a chatbot using a basic input text box and button in HTML, with a php start function. Unfortunately, when I enter text into the textbox, nothing is showing up on the screen and the button doesn't seem to b ...

javascriptphphtml

Troubleshooting the issue: Unable to shift a div to the left in a Rails app using jQuery and CSS when a mouseover event occurs

Hey there, I'm working on a div that contains a map. My goal is to have the width of the div change from 80% to 50% when a user hovers over it. This will create space on the right side for an image to appear. I've been looking up examples of jqu ...

jqueryhtmlruby-on-railscss

The search bar fails to display all pertinent results when only a single letter is inputted

How can I create a search functionality that displays array object names based on the number of letters entered? When I input one letter, only one result shows up on the HTML page, even though the console.log displays several results. The desired output is ...

javascripthtmlarraysobjectdom

Tips on fixing image movement when scrolling and switching resolutions

I am currently working on developing my HTML/CSS portfolio. However, I am facing an issue where the images on the site move around whenever the scroll level or resolution size is changed. I want the images to remain in their respective blocks, displayed at ...

htmlcssimageresponsive-design

When I incorporate the h-100 class, my content expands beyond the container on mobile devices

Struggling with implementing bootstrap 4.0? I'm attempting to utilize h-100 to ensure that the background stretches to the bottom of the user's screen. I've experimented with clearfix, fluid-containers, and more in an effort to make it work ...

htmlcssbootstrap-4containersgrid-layout

Discover a foolproof method for effortlessly examining an flv or mp4 file embedded within a webpage simply by

I've encountered a challenge with JavaScript. I can successfully check a flash object in a webpage when hovering over it, but I'm unsure how to achieve the same for flv or mp4 objects when either hovering over or moving away from them. Currently ...

javascriptjqueryhtml

<dt> and <dd> have not been added after the previous element

I can't seem to figure out why the dt and dd elements are not being added to the dl I created. Here's my initial attempt: // Dictionary list var words = [ { term: "Procrastination", definition: "Pathological tendency to s ...

javascripthtml

Inconsistencies found with CSS Dropdown Menu functionality across various web browsers

Issue Resolved - See Update Below While working on creating a CSS-only dropdown menu, I encountered an issue where the submenu would disappear when the mouse entered a small 3-4px section within the first item on the submenu. Even though this problem occu ...

htmlcssmenunavigation

I'm a complete programming newbie and I want to start learning JavaScript, jQuery, and other programming languages. Where should I

Coming from a design background with zero programming knowledge, I have recently learned XHTML and CSS. Now, I am eager to expand my skills by mastering JavaScript, jQuery, and more. Where should I begin? This will be my first foray into programming. Whil ...

javascriptjquerycssxhtml

Ways to showcase the contents of a React JavaScript document, or more specifically, a file designed for React interpretation

After trying multiple solutions, I found a conceptual guide on How to call and form a React.js function from HTML. However, the HTML generated doesn't seem to be calling from the JavaScript file as expected. It appears identical to what is mentioned i ...

javascripthtmlcssreactjs

When Google Chrome encounters two variables or functions with the same name, how does it respond?

I am curious what happens when Google Chrome encounters two variables with the same name. In my particular case, this issue arises in the code snippet available at this link, which is a small portion of the entire code. I am facing an issue where placing C ...

javascriptcsshtmlgoogle-chrome

HTML5 Video validation is not working properly

In my current project, I initially used embedded Youtube videos but faced issues with validation. Decided to explore HTML5 video elements as an alternative, but encountered some challenges. While attempting to validate the code, strange errors popped up: ...

htmlvalidationvideoembed