Solved

Using a windows font on a website - help w/ coding CSS

Posted on 2013-11-13
6
519 Views
Last Modified: 2014-01-22
Hello,

I am working on this site. http://mit-c.net/alexsbeauty/

In Chrome you can see the Papyrus font being used - in Firefox and IE I cannot. Can you look at my CSS and let me know what I could be doing wrong.
/* --------------------------------------------------------------
1. GENERAL ELEMENTS
-------------------------------------------------------------- */
@font-face { font-family: 'Papyrus'; src: url('font/papyrus.eot'); src: url('font/papyrus.eot?#iefix') format('embedded-opentype'), url('font/papyrus.svg#Papyrus') format('svg'), url('font/papyrus.woff') format('woff'), url('font/papyrus.ttf') format('truetype'); font-weight: normal; font-style: normal;}

/* BODY */
body { font-family: 'Papyrus', normal; background:#aaa; color:#777; font-size:0.9em; line-height:1.8em; }
}
/* HEADINGS */
h1, h2, h3, h4, h5, h6 { font-family:'Papyrus', normal; color:#81a06c; line-height:1.2; margin:20px 20px 20px 20px; }

Open in new window

0
Comment
Question by:angelic_webmaster
6 Comments
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 250 total points
ID: 39646407
Firefox tries to load Papyrus.woff twice and the first time it fails.  It loads Papyrus.ttf at the end but I don't know if firefox will use that.  Chrome loads Papyrus.svg and then Papyrus.woff without any errors.
0
 

Author Comment

by:angelic_webmaster
ID: 39646422
What about IE. - How can I fix this issue? Is my css wrong?
0
 
LVL 22

Expert Comment

by:Sigurdur Armannsson
ID: 39646494
Looks nice on a mac using Safari.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39646521
I don't have any software to check what happens on IE.
0
 
LVL 12

Accepted Solution

by:
junipllc earned 250 total points
ID: 39647928
Your fonts aren't loading because they are not passing the cross-origin test. These errors are being thrown for each of the fonts (.eot, .woff, etc.)

@font-face failed cross-origin request. Resource access is restricted. 

Open in new window


<link removed - GaryC123>

Cheers,

Mike
0
 

Author Closing Comment

by:angelic_webmaster
ID: 39800526
This helped me figure out my problem. Thank you
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
C# GridRow get Old/New Value 1 62
.php tree directory? 5 70
pure CSS responsive image rotation for Ecommerce Product Page images 4 32
Divi Theme - extra fonts I don't want 13 23
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

815 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now