The webfont I designed is failing to display properly in all browsers

I need assistance with troubleshooting my code. I am experiencing issues with my custom font not displaying correctly on various browsers.

Below is the CSS I am using:

@font-face{
font-family: 'Guildford';
src: url('../fonts/guildford_pro_titling-webfont.woff') format('woff'),
src: url('../fonts/guildford_pro_titling-webfont.woff2') format('woff2'),
src: url('../fonts/guildford_pro_titling-webfont.eot') format(embedded-opentype),
src: url('../fonts/guildford_pro_titling.otf') format('opentype') !Important;}

body {
font-family: 'Guildford', sans-serif;
background-image: url(../img/staropaquebackground.png);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
color: #ffffff;}
htmlcss

Answer №1

If you want your code to be error-free, take advantage of a validator found at this link.

For an example to follow, check out this resource on MDN: MDN CSS @font-face example:

@font-face {
 font-family: "Open Sans";
 src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

Remember not to repeat src: before every URL.

The property name should only be mentioned once, followed by a comma-separated list of values.

Answer №2

Check out this solution:

@font-face{
font-family: 'Guildford';
src: url('../fonts/guildford_pro_titling-webfont.woff') format('woff');
url('../fonts/guildford_pro_titling-webfont.woff2') format('woff2');
url('../fonts/guildford_pro_titling-webfont.eot') format(embedded-opentype);
url('../fonts/guildford_pro_titling.otf') format('opentype') !important;
}

body {
font-family: 'Guildford', sans-serif;
background-image: url(../img/staropaquebackground.png);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
color: #ffffff;
}

Make sure to replace commas with semicolons and eliminate duplicate 'src:' declarations. I suggest using a code editor with code validation to prevent similar issues in the future.

https://i.sstatic.net/j3kla.png

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

Slider caption glitching out

I am encountering an issue with the caption I added to my slider. When I scale the page, the height becomes inconsistent. It seems like the caption is not in an absolute position on the page. Strangely, when I try to position it absolutely, it disappears? ...

jquerycsshtmlslider

Having difficulty inputting text into a text field using Selenium in Java

Here is a snippet of HTML code that I am working with: </td> <td valign=top bgcolor="#dcdcdc" class="camp"> <script>Oblog()</script>ID <br> <input ty ...

htmlselenium-webdriverhidden-field

I am in search of a way to implement horizontal scrolling in Bootstrap 4

I am trying to implement a horizontal scroll feature in Bootstrap 4 with the following code, but I'm having difficulty achieving it. <div class="scroll-horz"> <div class="row"> <div class="col-md-4"> Test </div> < ...

htmlcssbootstrap-4

Angular 10: Oops! An issue occurred stating that the mat-form-field needs to have a MatFormFieldControl inside

When attempting to set up a form group on a page, I encountered the following error: ERROR Error: No value accessor for form control with name: 'modalidade' at _throwError (forms.js:2431) at setUpControl (forms.js:2339) at FormGroupDirective.addC ...

htmlangulartypescript

What is causing the discrepancy between the appearance of my fiddle and my page?

Hey there, I encountered an issue while working on a page using jsFiddle - it seems to be behaving differently when viewed on the actual website! If you want to take a look: http://jsfiddle.net/8Hpmj/8/ http://ktaadn.me/about/ The example at ktaadn.me do ...

htmlcssjsfiddle

Adjusting Headers Using Buttons

Having some issues with my JavaScript code. I'm trying to achieve a specific functionality where clicking the "Modify HTML content" button changes the h1 heading from "The Original Content" to "The New Content", and vice versa on subsequent clicks. Si ...

javascriptjqueryhtml

What is the best way to ensure that an input group expands to fill the entire horizontal space

I am currently utilizing bootstrap 4 and have a responsive navbar for smaller screens. On this navbar, I am trying to implement a search input group that spans the full width from left to right up until the menu bar icon on the right side. You can view my ...

csstwitter-bootstrapflexbox

Ensure images are correctly aligned

Could really use some help with this issue I'm having. It's probably a simple fix for all you experts out there, but I can't seem to align my images properly so they are even and not one higher than the other. Please take a look at the scree ...

htmlcssimage

"Utilizing images within an iframe: A step-by-step guide

I'm trying to integrate an iframe into a phone image with a transparent background. However, I am unsure how to effectively mask the iframe so that it only appears within the boundaries of the phone image. .phone { display: block; position: r ...

htmlcss

How can I add a loading page to my HTML/CSS website?

Currently, I am delving into the realm of coding and have encountered an issue while trying to integrate a loading page into my HTML. Despite referencing the code from this source, it appears that the loading page is not functioning as intended. Any assist ...

htmlcss

Front Page Luma Design for Magento Platform

As a newcomer to Magento, I am currently using the Luma Home Page which appears blank. My goal is to incorporate an image that spans the entire browser viewport. Is it possible to achieve this through the admin panel by adjusting the CSS within the home pa ...

cssmagento

Is the hidden input type iframe being loaded?

Is it possible for the hidden input type containing an iframe to be loaded when the page is loaded? For example: <input type="hidden" value="<iframe width="810" height="415" src="//www.youtube.com/embed/5th14OTyeqU" frameborder="0" allowfullscreen& ...

htmliframeyoutube

How can you trigger multiple jQuery Ajax calls simultaneously from various events?

Currently, I am facing a challenge with the development of a webpage that relies on multiple Ajax calls using jQuery to populate its contents. The issue lies in the fact that each call is waiting for the previous one to finish, causing slow loading times. ...

javascriptjqueryhtmlajax

Empty HTML fieldset

For a blog article I'm working on, I'd like to include a "Note" box that resembles a <fieldset> with a <legend> <fieldset> <legend>Note</legend> Please take note of this. </fieldset> (check out http:/ ...

html

Navigating on the horizontal axis within a container with overflow properties

I am trying to insert multiple children-divs into a parent-div. The parent div has a fixed width. The children are set to float left and will overflow the container. I need the ability to scroll along the x-axis. However, when I attempt to do this, the c ...

htmlcss

When I open my website in the browser, the bootstrap card-deck design is not being displayed correctly

I encountered a strange issue while designing my website. The code I wrote for the Bootstrap card-deck class in codeply.com was working perfectly fine. However, when I copied the same code into my PyCharm code editor and then pasted the file link into my b ...

pythonhtmlcssbootstrap-4web-development-server

Arranging CSS floating elements of varying heights into a layout with 2 columns

I am facing an issue with managing white spaces: I have a variety of elements set to float:left that need to be arranged in 2 columns, each with different heights. https://i.sstatic.net/MTYfI.jpg To simplify the process, I specifically need element 3 fro ...

javascripthtmlcssangularjs

No information was retrieved from the Wikipedia server after sending an HTTP request

I have been trying to fetch HTML using code. It works perfectly fine when fetching from "http://www.google.com," but when attempting to fetch from "http://en.wikipedia.org/w/api.php," I am not getting any results. Any ideas on what might be causing this i ...

javahtmlhttp

The functionality of the combobox in Vuetify differs from that of an input field

I have implemented Vuetify and am using its combobox component for search functionality on my website. However, I have noticed that the text value in the combobox only gets added to the watcher when the mouse exits the field. This behavior is not ideal f ...

javascripthtmlcssvue.jsvuetify.js

Problematic: BS4 Cards cannot be accommodated within the parent div.Improved: The

Within a dynamic-height parent div, I have two cards stacked on top of each other. However, the issue arises when these two cards do not completely fit inside the parent div. The problem likely stems from the table within the lower card, which is not respo ...

htmlcssangularbootstrap-4