I downloaded a custom font (Gotham-Light.eot), but it doesn't work on Internet Explorer 9.
#font-face {
font-family: Gotham-Light;
src: url('Gotham-Light.eot');
}
This doesn't work. I'm using ASP MVC3 rebuilt, used custom tool, still nothing.
First, the goods:
#font-face {
font-family: 'ludger_duvernayregular';
src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');
src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot?#iefix') format('embedded-opentype'),
url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.woff') format('woff'),
url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.ttf') format('truetype'),
url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.svg#ludger_duvernayregular') format('svg');
font-weight: normal;
font-style: normal;
}
p.test {
font-family: 'ludger_duvernayregular', Arial, serif;
font-weight: 400;
color: blue;
}
Note, I used a font face that was purposefully easy to see as working. (And I don't have access to Gotham in a web font, so... I'm not even sure Gotham is licensed to use in web font form. If you do not have a license or the license does not allow for it, please respect that.) So you will have to do a little thinking about the paths to your font files.
What I've done is consult the blog post AlienWebGuy linked to, which is good. It's not long, so I'd read it. It boils down to:
Possibly a misconfigured MIME type for the font file. See below for more info. There's also a note that Apache may have this problem, it seems to be more of an IIS issue (according to the article).
You can trick (?) IE9 to use the EOT file instead of the WOFF, which apparently fixes the issue (according to the article).
Additionally, and as an aside, IE9 had a problem displaying the font with a jsFiddle demo using the same exact CSS. Very weird. IE7 and 8 worked fine, so I know it was working in some ways. I did not figure out what that was about, but I saved the same markup and CSS to a file on my site and it works fine.
Breakdown...
Let me explain what's going on in the above CSS. I'll go through each line. However, keep in mind I have the web font in the following file formats:
eot
woff
ttf
svg
You really probably only need eot, ttf and woff if you don't care to support legacy iOS. SVG translations are hard to obtain, though.
Now, first name your font so you can reference it:
font-family: 'ludger_duvernayregular';
IE9 Compat Modes:
src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');
Remember to verify the URLs you're using here actually lead to a real file. Put it in the address bar and see what happens (does it download? 404?).
On the following, though, I'm going to remove the full URL so you can see the entire statement, including the end.
IE6, 7 and 8:
src: url('http://../ludgerduvernay.eot?#iefix') format('embedded-opentype'),
Note this part:
.eot?#iefix <<< See below for an explanation.
Further IE CSS Fix
In some rare cases, IE will fail because the #font-face declaration
has too many characters. This can be solved in most instances by
adding a ‘#’ hash mark after the ‘?’ question mark. This buys you a
bit of extra room.
- From the Font Spring article
I have no idea why this works, so I'm taking their word for it.
Modern Browsers:
url('http://../ludgerduvernay.woff') format('woff'),
Safari, Android, iOS:
url('http://../ludgerduvernay.ttf') format('truetype'),
Legacy iOS:
url('http://../ludgerduvernay.svg#ludger_duvernayregular') format('svg');
Then use it:
p {
font-family: 'ludger_duvernayregular', Arial, serif;
}
I was actually surprised this works back to IE6. Anyways, notice that I use a full path to the file, not a relative one. That's usually a good place to start; check to make sure the link downloads. I'm making a big deal of this because it's basic and easy to screw up.
So if the file is downloading with the url and you've got it working in other browsers, and in IE6, 7 and/or 8, you can look at another possibility:
Fix IE9 on the Server Side (IIS)
Microsoft’s IIS server will refuse to send resources that it does not
have a MIME type for. The syntax we developed forces IE9 to take the
WOFF over the EOT, but if it is served on IIS, it will fail. This is
because IE9 requests the WOFF file, but since WOFF is not a defined
MIME type in IIS, a 404 Not Found error is returned. To solve this,
you must add ‘.woff’ with MIME type ‘application/x-font-woff’ to your
IIS installation.
- From the Font Spring article
So you may have to check your server isn't borking it. You can also use Chrome Console or Firebug NET tab to view the headers sent with the file.
Now I had a little help here, and I think you should think about the following options:
Google Web Fonts. Don't be a hero. They host the font, give you the include stylesheet markup, and presto whammo, you're in business. They also have some pretty cool fonts. There are other web font services, such as Typekit, Webtype, Fontdeck, and Fonts Live.
Font Squirrel has a #Font-Face Generator, which can give you all of the files you need (Warning: Only submit fonts you know to be licensed for web use.). Use the Expert mode, and it will give you a ZIP file with lots of great stuff, including a demo. The one I received you can download here. The interesting thing is, the generated CSS is identical to the Font Spring one, minus the comments. That's probably not a coincidence.
I found that awesome tool on this Opera Dev page. That is also worth reading.
And of course, that blog post AlienWebGuy linked to at Font Spring.
This stuff isn't hard, but you need to know how to troubleshoot. Always check that the file is downloading; you can use Chrome Console Resources tab or Firefox's Firebug add-on and watch the NET tab to see if it downloads. It if just literally won't work, post the page or code somewhere where we can get to it and we can review it.
Happy coding. :)
The super awesomely cool font used in the demo is Ludger Duvernay Regular. For more information, see Steve Cloutier/Cloutierfontes site. Thank you for making it free for personal use. :)
If you're following the instructions layed out here -- http://www.fontspring.com/blog/fixing-ie9-font-face-problems -- then it's most likely how your calling the fonts.
Make sure you are pointing to the right location from your stylesheet - the code you have above will only work if the font file is in the same directory as the stylesheet.
Hope this helps.
Gotham is a commercial product, and if you have just downloaded it from somewhere, it’s probably an illegal copy or a fake, and may well be technically broken too.
Consider using a free font of similar design, such as Cicle.
For googlers: I had a problem with either long font name or conflict with already installed font. Anyway IE were the only browser having problems.
I changed
font-family: 'HelveticaLTUltraCompressedRegular';
to
font-family: 'HelveticaLTUCR';
which solved my issue.
I am using the following CSS to define a custom font on a webpage:
#font-face
{
font-family:zapfino;
src:url("zapfino.ttf");
}
Next, I am defining an id that uses it:
#custom_font
{
font-family:zapfino;
font-size:18px;
}
I've tested the page on Safari and Chrome and it works fine. However, in firefox the font is not showing up, it is reverting to a default. Sorry if this is a repost but I have searched on StackOverflow and cannot find the answer! Does anyone know why this is happening? see it here: www.moosecodes.com (its still under construction! please pardon the mess!)
Each browser only reads one file type for webfonts. Unfortunately, they are all different file formats. In order for the font to display correctly in all browsers, you will need 4 different types of font file- TTF, WOFF, SVG & EOT. Your code will look something like this:
#font-face {
font-family: 'Zapfino';
src: url('Zapfino.eot');
src: url('Zapfino.eot?#iefix') format('embedded-opentype'),
url('Zapfino.woff') format('woff'),
url('Zapfino.ttf') format('truetype'),
url('Zapfino.svg#SansumiRegular') format('svg');
}
That code is based of the stylesheet included with FontSquirell fonts.
FontSquirell has a converter, but you do need to check your license. Zapfino is a commercial font owned by Adobe(?) and as far as I know using their fonts with #font-face is a violation of the fonts EULAs.
TypeKit offers commercial fonts for use with #font-face for a fee that complies with the foundries EULAs.
jlego is right - you should check out the FontSquirrel site - they have an excellent tool for building your kit and converting your files for you, AND you must always be sure that the font is legal to use on your site.
However Firefox and Chrome should both support TTF, which is the format you are using.
In researching your problem on your site, what I've found is that the font is not rendering properly in any browser I check in. What I've found is while the stylesheet is referencing the right file location, but the font file appears to be corrupted. I would suggest getting a new font file new replace the one you are using.
I had the same problem.... the answer by jlego was usefull to me.
My font was recognized in Chrome and IE.
In FF my TTF wasn't recognized untill I added the format('truetype') in my css file.
I'm about to use some custom fonts for my website.
I know that currently there are few websites providing free webfonts like: Google WebFonts
But, the font I want isn't there. I want to know if there is any way to convert this font that I have to a webfont. (my font extension is TTF)
Also, I downloaded a few webfonts, their extension was also TTF. Are webfonts something different?
Different browsers handle webfonts differently. TTF will work in most browsers but not IE or on iPhones. I'd recommend checking out Font Squirrel as it has a lot of fonts on there including a #font-face generator that will help you set things up.
Web fonts are nothing special; they can be TrueType fonts, as long as the browser supports that format (most do). To use a TrueType font in your CSS, use
#font-face {
font-family: {given name};
src: url({path to font file}) format('truetype');
}
Then use
font-family: {given name};
in any rules you want to use the font for.
I've previously used Font Squirrel to generate the web font files from a ttf.
I would recommend trying Cufon as a fallback for browsers that don't support css #font-face
You can just use the ttf files in combination with #font-face. See http://www.html5rocks.com/en/tutorials/webfonts/quick/ for more information.
This might be of use -
make sure the license for the font you are using allows it though.
The following code works in Google Chrome beta as well as IE 7. However, Firefox seems to have a problem with this. I'm suspecting it to be a problem of how my CSS files are included, cause I know Firefox is not too friendly about cross-domain imports.
But this is all just static HTML and there's no question of cross-domain.
On my landing-page.html I do a CSS import like so:
<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />
Within the main.css I have another imports like so:
#import url("reset.css");
#import url("style.css");
#import url("type.css");
and within the type.css I have the following declarations:
#font-face {
font-family: "DroidSerif Regular";
src: url("font/droidserif-regular-webfont.eot");
src: local("DroidSerif Regular"),
url("font/droidserif-regular-webfont.woff") format("woff"),
url("font/droidserif-regular-webfont.ttf") format("truetype"),
url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
font-weight: normal; font-style: normal; }
#font-face {
font-family: "DroidSerif Bold";
src: url("font/droidserif-bold-webfont.eot");
src: local("DroidSerif Bold"),
url("font/droidserif-bold-webfont.woff") format("woff"),
url("font/droidserif-bold-webfont.ttf") format("truetype"),
url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
font-weight: normal; font-style: normal; }
body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }
I have a directory called "font" in the same location as type.css. This font directory contains all the woff/ttf/svg files etc.
I'm stumped on this one. It works in Chrome and IE but not on Firefox. How is this possible? What am I missing?
LOCALLY RUNNING THE SITE (file:///)
Firefox comes with a very strict "file uri origin" (file:///) policy by default: to have it to behave just as other browsers, go to about:config, filter by fileuri and toggle the following preference:
security.fileuri.strict_origin_policy
Set it to false and you should be able to load local font resources across different path levels.
PUBLISHED SITE
As per my comment below, and you are experiencing this problem after deploying your site, you could try to add an additional header to see if your problem configures itself as a cross domain issue: it shouldn't, since you are specifying relative paths, but i would give it a try anyway: in your .htaccess file, specify you want to send an additional header for each .ttf/.otf/.eot file being requested:
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Frankly, I wouldn't expect it to make any difference, but it's so simple it's worth trying: else try to use base64 encoding for your font typeface, ugly but it may works too.
A nice recap is available here
In addition to adding the following to your .htaccess: (thanks #Manuel)
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
You may want to try explicitly adding the webfont mime types to the .htaccess file... like this:
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
In the end, my .htaccess file looks like this (for the section that enables webfonts to work in all browsers)
# BEGIN REQUIRED FOR WEBFONTS
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
# END REQUIRED FOR WEBFONTS
I've had this problem too. I found the answer here: http://www.dynamicdrive.com/forums/showthread.php?t=63628
This is an example of the solution that works on firefox, you need to add this line to your font face css:
src: local(font name), url("font_name.ttf");
I'll just leave this here because my co-worker found a solution for a related "font-face not working on firefox but everywhere else" problem.
The problem was just Firefox messing up with the font-family declaration, this ended up fixing it:
body{ font-family:"MyFont" !important; }
PS: I was also using html5boilerplate.
I was having the same problem. Double check your code for H1, H2 or whatever style you are targeting with the #font-face rule. I found I was missing a coma after font-family: 'custom-font-family' Arial, Helvetica etc It was showing up fine in every browser apart from Firefox. I added the coma and it worked.
I had exactly the same problem. I had to create a new folder called "fonts" and put it in wp_content. I can access it from my browser like this http://www.example.com/wp-content/fonts/CANDY.otf
Previously, the fonts folder was in the same directory as my CSS file, and the #font-face looked like this:
#font-face {
font-family: CANDY;
src: url("fonts/CANDY.otf");
}
As i mentioned above, this was not working in Firefox but only with Chrome. Now it is working because I used an absolute path:
#font-face {
font-family: CANDY;
src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}
I had exactly this problem running ff4 on a mac. I had a local development server running and my #font-face declaration worked fine. I migrated to live and FF would 'flash' the correct type on first page load, but when navigating deeper the typeface defaulted to the browser stylesheet.
I found the solution lay in adding the following declaration to .htaccess
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
found via
One easy solution that no one's mentioned yet is embedding the font directly into the css file using base64 encoding.
If you're using fontsquirrel.com, in the font-face Kit Generator choose expert mode, scroll down and select Base64 Encode under CSS Options - the downloaded Font-Kit will be ready to plug and play.
This also has the fringe benefit of reducing page load time because it requires one less http request.
I'd mention that some fonts have issues in firefox if their filename contains specific characters. I've recently run into an issue with the font 'Modulus' which had a filename '237D7B_0_0'. Removing the underscores in the filename and updating the css to match the new filename solved this problem. Other fonts with similar characters don't have this issue which is very curious...probably a bug in firefox. I'd recommend keeping filenames just to alphanumeric characters.
For this font in particular you should be using the Google Font API:
http://code.google.com/webfonts/family?family=Droid+Sans
If you still want to use FontSquirrel's kit generator, use the Smiley hack option to eliminate local font problems. After you've generated a kit, check that the generated demo.html works in FireFox. I bet it does. Now upload it to your server -- I bet it works there too since FontSquirrel is awesome.
However, if you broke the generated kit code while integrating it into your project, use the standard methods of debugging -- check for 404's and go line by line until you find the problem. WOFF should definitely work in FF, so thats a good place to start.
Finally, if none of this works, update FireFox. I wrote all this assuming that you are using the latest; but you didn't specify what version you are checking in, so that could be your problem too.
Try nerfing the local source declaration in your #font-face directives.
There's a known bug in either Firefox or the Google Font API that prevents the variants of fonts to be used if the font is installed locally, and matches the defined local name:
http://code.google.com/p/googlefontdirectory/issues/detail?id=13
To effectively nerf the local declaration, just make your local source string some nonsense. The generally accepted convention for this is to use a the smiley unicode character ("☺"). Why? Paul Irish has a great explanation up on his blog:
http://paulirish.com/2010/font-face-gotchas/#smiley
Are you testing this in local files or off a Web server? Files in different directories are considered different domains for cross-domain rules, so if you're testing locally you could be hitting cross-domain restrictions.
Otherwise, it would probably help to be pointed to a URL where the problem occurs.
Also, I'd suggest looking at the Firefox error console to see if any CSS syntax errors or other errors are reported.
Also, I'd note you probably want font-weight:bold in the second #font-face rule.
This is a problem with how you setup your font-face's paths. Since you didn't start the path with a "/", Firefox will attempt to find the font's based on the path the stylesheet's in. So basically, Firefox is looking for your font in the "root/css/font" directory instead of the "root/font" directory. You can easily fix this by either moving the font folder to the css folder, or adding a / to the beginning of your font paths.
Try this out:
#font-face {
font-family: "DroidSerif Regular";
src: url("/font/droidserif-regular-webfont.eot");
src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "DroidSerif Bold";
src: url("/font/droidserif-bold-webfont.eot");
src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
font-weight: normal;
font-style: normal;
}
body {
font-family: "DroidSerif Regular" , serif;
}
h1 {
font-weight: bold;
font-family: "DroidSerif Bold";
}
Using an .htaccess Access Control Allow Origin rule didn't work for me when I was confronted with this issue.
Instead, in IIS in the web.config insert the system.webServer block shown below.
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
This worked like a charm for me. If you need to restrict access to particular domain, replace the * with the domain.
I was having the same problem getting a font to display properly in Firefox. Here is what I found to work for me. Add a slash before the directory holding the font in the url attribute. Here is my before and after versions:
B E F O R E:
#font-face
{ font-family: "GrilledCheese BTN";
src: url(fonts/grilcb__.ttf);
}
A F T E R:
#font-face
{ font-family: "GrilledCheese BTN";
src: url(/fonts/grilcb__.ttf);
}
notice the leading slash before 'fonts' in the url? This tells the browser to start at the root directory and then access the resource. At least for me - Problem Solved.
If you are trying to import external fonts you face one of the most common problem with your Firefox and other browser. Some time your font working well in google Chrome or one of the other browser but not in every browser.
There have lots of reason for this type of error one of the biggest reason behind this problem is previous per-defined font. You need to add !important keyword after end of your each line of CSS code as below:
Example:
#font-face
{
font-family:"Hacen Saudi Arabia" !important;
src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
font-family:"Hacen Saudi Arabia" !important;
}
Description:
Enter above code in your CSS file or code here. In above example replace "Hacen Saudi Arabia" with your font-family and replace url as per your font directory.
If you enter !important in your css code browser automatically focus on this section and override previously used property.
For More details visit: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html
Here's one more to add to the list. I discovered that if you specify a local src with a name that matches a generic font name, it breaks the entire rule in Firefox (and only Firefox). Example:
#font-face {
font-family: code;
src: local(Monaco),
url(monaco.woff2) format("woff2"),
local(monospace);
}
This will fail in Firefox (as of version 95.0.2) and display the text in the unstyled default (Times) because the last src value matches the name of a generic font (monospace) that's supported by Firefox. The following values all fail in the same way:
cursive
fantasy
monospace
sans-serif
serif
system-ui
It's an edge case for sure (and probably a bug), but it may help someone. You can't fall back to generic fonts this way, and if, for some reason, you really need to reference a local font of the same name, you should put it between quotation marks.
Can you check with firebug if do you get some 404? I had problems in the pass and I found that the extension was the same but linux file.ttf is different from file.TTF... and it worked with all browsers except firefox.
Wish it helps!
Try this....
http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/
I had a similar problem. The fontsquirel demo page was working in FF but not my own page even though all files were coming from the same domain!
It turned out that I was linking my stylesheet with an absolute URL (http://example.com/style.css) so FF thought it was coming from a different domain. Changing my stylesheet link href to /style.css instead fixed things for me.
Perhaps your problem is a naming-issue, specifically with regard the use (or not) of spaces and hyphens.
I was having similair issue, which i thought i had fixed by placing the optional quotes (') around font-/family-names, but that actually implicitly fixed a naming issue.
I'm not completely up-to-date on the CSS-specification, and there is (at leat to me) some ambiguity in how different clients interpret the specs. Additionally, it also seems related to PostScript naming conventions, but please correct me if i'm wrong!
Anyway as i understand it now, your declaration is using a mixture of two possible distinct flavors.
#font-face {
font-family: "DroidSerif Regular";
If you'd consider Droid the actual family-name, of which Sans and Serif are members, just like for instance their children Sans Regular or Serif Bold, then you either use spaces everyhere to concatinate identifiers, OR you remove spaces and use CamelCasing for the familyName, and hyphens for sub-identifiers.
Applied to your declaration, it would look something like this:
#font-face {
font-family: "Droid Serif Regular";
OR
#font-face {
font-family: DroidSerif-Regular;
I think both should be perfectly legal, either with or without the quotes, but i've had mixed success with that between various clients. Maybe, one day, i have some time to figure-out the details on this/these isseu/s.
I found this article helpful in understanding some of the aspects involved:
http://mathiasbynens.be/notes/unquoted-font-family
This article has some more details on PostScript specifically, and some links to an Adobe specification PDF:
http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/
No need to mess around with settings just remove the quotes and spaces from the font-family:
this
body {font-family: "DroidSerif Regular", serif; }
becomes this
body {font-family: DroidSerifRegular, serif; }
In my case, I sloved problem with inserting font-face style code
<style type="text/css">
#font-face {
font-family: 'Amazone';font-style: normal;
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/
src: local('Amazone'), url(font/Amazone.woff) format('woff');}
</style>
direclty in header on your index.html or php page, in style tag.
Works for me!
Because of that this is one of the top Google results for this problem I would like to add what solved this problem for me:
I had to remove the format(opentype) from the src of the font-face, then it worked in Firefox as well. It worked fine in Chrome and Safari before that.
May be its not because of your code, Its because of your Firefox configuration.
Try this from Tool bar Western to Unicode
View > Text Encoding > Unicode
I had the same problem and solved it by adding meta for content:
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
This happens in Firefox and Edge if you have Unicode texts in your html.
Firefox lets you switch off web fonts entirely. This was the case or me.
To turn it on, go to Preferences>Content>Advanced and check the box.
related artice at fontspring
I don't know how you created the syntax as I neved used svg in font declaration, but Font Squirel has a really good tool to create a bullet proof syntax font-face from just one font.
http://www.fontsquirrel.com/fontface/generator
Could also be the use of the URL in the path of the font-face tag. If you use "http://domain.com" it doesn't work in Firefox, for me changing it to "http://www.domain.com" worked.
My problem was that Windows named the font 'font.TTF' and firefox expected 'font.ttf' i saw that after opening my project in linux, renamed the font to propper name and everything works