Solved

@font-face does not work in Chrome

Posted on 2013-06-14
21
808 Views
Last Modified: 2013-06-29
Hi,
 
I have include the following @font-face to my page, The style is working in Firefox,IE but not working with Chrome, What will be issue, I have tried with some other @font-face all are working Firefox,IE but not working with Chrome, Please do the needful

@font-face {
    font-family: 'FanwoodRegular';
    src: url('Fanwood-webfont.eot');
    src: url('Fanwood-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fanwood-webfont.ttf') format('truetype'),
         url('Fanwood-webfont.woff') format('woff'),
         url('Fanwood-webfont.svg#FanwoodRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    }
0
Comment
Question by:Loganathan Natarajan
  • 7
  • 5
  • 3
  • +4
21 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39249647
This page looks like your code but it mentions something about a bug with 'text-shadow'.  http://www.fontsquirrel.com/forum/discussion/10/font-face-chrome-issue/p1
0
 
LVL 36

Author Comment

by:Loganathan Natarajan
ID: 39249813
I have referred, The above link I have not used text-show property in any of style, still I get the same issue. The @font-face works with IE,Firefox but not working in Chrome...............
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39250265
Do you actually have all 5 versions of that font in your directory?
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 36

Author Comment

by:Loganathan Natarajan
ID: 39252150
yes I have all the all 5 version of that font
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39252154
Can you post a link to the page so we can see what is happening?
0
 
LVL 36

Author Comment

by:Loganathan Natarajan
ID: 39252498
Please find the source code in the attachments, I have added a page and Implemented FanwoodRegular web font. I have all the five files in the App_Themes folder, Please run the application for the difference between Firefox and Chrome, Internet Explore. I have also added the  MIME type in iis and in web.config file. Please download the .zip file exact and WebSite\App_Themes\default change the file extension .eot,.svg,.ttf,.woff. When I uploaded the .zip file I was unable to upload the file. so that I have removed . from the file name. Please download the .zip and change the extensions. I am working around for 2 days not able to get the solution.
WebSite.zip
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39253846
You need to click on "Request Attention" above.  I can't run that.
0
 
LVL 17

Expert Comment

by:jrm213jrm213
ID: 39256113
Hi,

I have heard that the order of the fonts is important and according to font-squirrel for that font it should be

@font-face {
    font-family: 'FanwoodRegular';
    src: url('Fanwood-webfont.eot');
    src: url('Fanwood-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fanwood-webfont.woff') format('woff'),
         url('Fanwood-webfont.ttf') format('truetype'),
         url('Fanwood-webfont.svg#FanwoodRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Open in new window


It's worth a shot.
I also ran across this page claiming that Chrome sometimes doesn't like coming last in the font list and that you can change the CSS to just target chrome and then it is happy.

Excerpt from http://www.adtrak.co.uk/blog/font-face-chrome-rendering/#fix 
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.svg') format('svg');

}
}

Open in new window


I hope one of those works for you.
0
 
LVL 25

Expert Comment

by:kevp75
ID: 39256147
We'll need the link to that page.  I need to see what is going on with the requests when the page is loading
0
 
LVL 11

Expert Comment

by:G_H
ID: 39256170
There are differences in the way browsers treat URL's in style. Try changing:
url('Fanwood-webfont........

Open in new window

...to...
url('/folder-path-of-app-after-domain/Fanwood-webfont.....

Open in new window

GH
0
 
LVL 15

Expert Comment

by:jorge_toriz
ID: 39257961
if you try with something like this?

@font-face {
    font-family: 'FanwoodRegular';
    src: url('Fanwood-webfont.eot');
    src: local('?'),
         url('Fanwood-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fanwood-webfont.ttf') format('truetype'),
         url('Fanwood-webfont.woff') format('woff'),
         url('Fanwood-webfont.svg#FanwoodRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Open in new window

0
 
LVL 43

Expert Comment

by:Rob
ID: 39258519
I'm looking through your code and you haven't included the css anywhere? You'll need to do this in your Default.aspx file

eg

<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="App_Themes/default/default.css">
	<link rel="stylesheet" type="text/css" href="App_Themes/default/Fanwood.css">
</head>

Open in new window




I've also noticed that your font files do not have extensions, they're just "Fanwood-Italic-webfonteot" etc instead of "Fanwood-Italic-webfont.eot"
0
 
LVL 43

Expert Comment

by:Rob
ID: 39258526
This works in Chrome (Removed the aspx to show you the generated html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="App_Themes/default/default.css">
	<link rel="stylesheet" type="text/css" href="App_Themes/default/Fanwood.css">
</head>
<body>
    <form id="form1">
    <div class="FanwoodRegularTestClass">
        Free fonts have met their match. We know how hard it is to find quality freeware
        that is licensed for commercial work. We've done the hard work, hand-selecting these
        typefaces and presenting them in an easy-to-use format. Here are some of our favorites:
    </div>
    </form>
</body>
</html>

Open in new window


I had to add the full stop on all your font files to create the extension
added extensions
0
 
LVL 43

Accepted Solution

by:
Rob earned 500 total points
ID: 39258532
Here is the rendered page

example
Updated html & CSS used for testing:

.FanwoodRegularTestClass
{
	margin: 0;
	height: 100%;
	background-color: #fff;
	font-family: FanwoodRegular;
	font-size: 16px;
	line-height: 18px;
	
}

.FanwoodItalicTestClass
{
	margin: 0;
	height: 100%;
	background-color: #fff;
	font-family: FanwoodItalic;
	font-size: 16px;
	line-height: 18px;
	
}

Open in new window


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="App_Themes/default/default.css">
	<link rel="stylesheet" type="text/css" href="App_Themes/default/Fanwood.css">
</head>
<body>
    <form id="form1">
    <div class="FanwoodRegularTestClass">
        Free fonts have met their match. We know how hard it is to find quality freeware
        that is licensed for commercial work. We've done the hard work, hand-selecting these
        typefaces and presenting them in an easy-to-use format. Here are some of our favorites:
    </div>
    <div class="FanwoodItalicTestClass">
        Free fonts have met their match. We know how hard it is to find quality freeware
        that is licensed for commercial work. We've done the hard work, hand-selecting these
        typefaces and presenting them in an easy-to-use format. Here are some of our favorites:
    </div>

    </form>
</body>
</html>

Open in new window

0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39258631
After working on another question about @font-face, I went and downloaded Fanwood from Font Squirrel.  The demo.html file and CSS works perfectly in Chrome and Firefox.
0
 
LVL 43

Expert Comment

by:Rob
ID: 39258653
And as you can see all i've done is rename the font files to have their correct extensions and it renders fine in Chrome & Firefox
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39258671
He mentioned the need to rename the files at http://www.experts-exchange.com/Web_Development/Fonts/Q_28158119.html#a39252498 above.  So there is something else about his page or application that is preventing the fonts from displaying.
0
 
LVL 43

Expert Comment

by:Rob
ID: 39258686
Thanks Dave :)  Still the css files were missing from the aspx files... if you don't link the styles the fonts aren't going to work wouldn't you agree?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39260165
I do agree.  Both the CSS that includes the @font-face from the download and the CSS that defines the usage must be included and accessible.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Gotham fonts and Office 2013 6 119
TripAdvisor Widgets on WordPress Websites 10 195
xml attribute DTD attribute differences 3 76
what font behind pdf 32 150
Article by: Matthew
I am a very big proponent of technology compliance standards and strive to meet such criteria in all of my work. That includes my site, which is 100% XHTML 1.0 compliant as determined by the World Wide Web Consortium. https://www.matthewstevenkel…
Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

828 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