Solved

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

Posted on 2013-11-13
6
509 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

DevOps Toolchain Recommendations

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

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Remove right text widget from smaller screens 15 94
Error viewing ASP page 12 150
What about 192.168.1.0/28 3 31
Standard for Web Development 3 27
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…
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

896 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

15 Experts available now in Live!

Get 1:1 Help Now