Solved

Journal Font in IE

Posted on 2013-06-18
6
621 Views
Last Modified: 2013-06-19
Hello Experts!

I am having problems getting the font I downloaded from Font Squirrel , the Journal font, to display properly in IE 8.

Here is the CSS:

@font-face 
{
	font-family: Journal;
	src: url('fonts/journal-webfont.eot');
	src: url('fonts/journal-webfont.woff') format('woff'), url('fonts/journal-webfont.ttf') format('truetype'), url('fonts/journal-webfont.svg#journal') format('svg');
}

.journal
{
               font-family: Journal, sans-serif;
}

Open in new window


I think the CSS is ok, and so I am suspecting that the EOT file I downloaded from Font Squirrel might be corrupted.  Does anyone know how I can check this?
0
Comment
Question by:OmniUnlimited
[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
  • 3
  • 2
6 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39258613
I just downloaded that font from Font Squirrel and used the demo.html page to verify that it does work properly in IE8.  Look at the files that came with it.  You will see that the name of the font in the CSS is 'JournalRegular', not just 'Journal'.
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39259758
Try using single quote
@font-face 
{
	font-family: 'Journal';
	src: url('fonts/journal-webfont.eot');
	src: url('fonts/journal-webfont.woff') format('woff'), url('fonts/journal-webfont.ttf') format('truetype'), url('fonts/journal-webfont.svg#journal') format('svg');
}

.journal
{
               font-family: 'Journal', sans-serif;
}
             

Open in new window

0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 39260195
Hello Experts!

And thank you for your replies and kind assistance.

@DaveBaldwin: I'm sorry, where did you see and use this demo.html page?

@jagadishdulal: Single quotes have no effect.
0
Independent Software Vendors: 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!

 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 39260270
I got it from Font Squirrel in the web-font download package.  Go to http://www.fontsquirrel.com/fonts/Journal , click on the Webfont Kit tab and then on the blue button that says 'Download@font-face kit'.  When you unzip it, there is a demo.html page and a CSS file to go with it.  It works as it is without any changes in all browsers.
0
 
LVL 17

Author Closing Comment

by:OmniUnlimited
ID: 39260285
As Homer Simpson says, "Duoh!"

I didn't even notice the demo.html file when I downloaded the Webfont Kit.  Thanks DaveBaldwin, you saved me again.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39260316
You're welcome, thanks for the points.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
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…
Suggested Courses

623 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