?
Solved

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

Posted on 2013-11-13
6
Medium Priority
?
551 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 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 750 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
Monthly Recap

May was a big month for new releases from Linux Academy! Take a look at what our team built recently in our blog. You can access the newest releases from our blog.

 
LVL 84

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 750 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

WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

764 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