Solved

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

Posted on 2013-11-13
6
536 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

726 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