Solved

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

Posted on 2013-11-13
6
544 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Question has a verified solution.

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

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
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.

728 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