I'm having a hard time making a font look properly in the major browsers (I'm only using the Windows versions BTW for now, don't have access to Mac), I'll try to mention the code and how it behaves with each change I did to the SVG line because that's what most people suggest changing after doing some research about similar issues.
#font-face {
font-family: 'RobotoLight';
src: url('../font/jura-demibold.eot');
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
url('../font/jura-demibold.woff') format('woff'),
url('../font/jura-demibold.ttf') format('truetype'),
url('../font/jura-demibold.svg#RobotoLight') format('svg');
font-weight: normal;
font-style: normal; }
This code makes the font look very pixelated in:
Google Chrome and Safari
However it looks fine in FireFox and IE.
This is the 2nd code (I bumped up the SVG line):
#font-face {
font-family: 'RobotoLight';
src: url('../font/jura-demibold.eot');
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
url('../font/jura-demibold.svg#RobotoLight') format('svg');
url('../font/jura-demibold.woff') format('woff'),
url('../font/jura-demibold.ttf') format('truetype'),
font-weight: normal;
font-style: normal; }
Font isn't even displayed anymore and is replaced by a default webfont in:
FireFox, Chrome and Safari
Still looks normal in IE.
Finally, when I remove the "#RobotoLight" from the SVG line, like this:
#font-face {
font-family: 'RobotoLight';
src: url('../font/jura-demibold.eot');
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
url('../font/jura-demibold.svg') format('svg');
url('../font/jura-demibold.woff') format('woff'),
url('../font/jura-demibold.ttf') format('truetype'),
font-weight: normal;
font-style: normal; }
Font still isn't displayed in FireFox, but it now works properly (without Pixelation) in Chrome, Safari and IE!
So can someone help me make the 3rd code work with FireFox as well please, cross browser font compatibility is driving me insane.
ps: I'm not an experienced developer and still new to this, I bought a ready template that I'm trying to change some stuff in it to create a basic website for myself, I'm not sure if this matters but I didn't change the font-family name in the CSS sheet, I added the fonts in the proper folder and edited the SRC URL to the right path.
I assume the font-family name is for my own reference in the CSS sheet and browsers don't actually verify it.
Any help would be MUCH appreciated!
You have a comma and a semicolon mixed up. The correct block would be:
#font-face {
font-family: 'RobotoLight';
src: url('../font/jura-demibold.eot');
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
url('../font/jura-demibold.svg') format('svg'),
url('../font/jura-demibold.woff') format('woff'),
url('../font/jura-demibold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
change
url('../font/jura-demibold.svg') format('svg');
to
url('../font/jura-demibold.svg') format('svg'),
EDIT: These little mistakes happen to the best of us.
Related
I have following fonts in my style.css in my wordpress theme.
#font-face {
font-family: 'latoregular';
src: url('./fonts/lato-regular.eot');
src: url('./fonts/lato-regular.eot?#iefix') format('embedded-opentype'),
url('./fonts/lato-regular.woff2') format('woff2'),
url('./fonts/lato-regular.woff') format('woff'),
url('./fonts/lato-regular.ttf') format('truetype'),
url('./fonts/lato-regular.svg#latoregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'bebasregular';
src: url('./fonts/bebas___-webfont.eot');
src: url('./fonts/bebas___-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/bebas___-webfont.woff2') format('woff2'),
url('./fonts/bebas___-webfont.woff') format('woff'),
url('./fonts/bebas___-webfont.ttf') format('truetype'),
url('./fonts/bebas___-webfont.svg#bebasregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'coustardregular';
src: url('./fonts/coustard-regular.eot');
src: url('./fonts/coustard-regular.eot?#iefix') format('embedded-opentype'),
url('./fonts/coustard-regular.woff2') format('woff2'),
url('./fonts/coustard-regular.woff') format('woff'),
url('./fonts/coustard-regular.ttf') format('truetype'),
url('./fonts/coustard-regular.svg#coustardregular') format('svg');
font-weight: normal;
font-style: normal;
}
This is the text in h2 element
The h2 element has font-family of coustardregular and font-weight of bold. As you can see in the image the structure of letter T is very strange and so is with letter I. I got this problem only in chrome and nowhere else. I tried this link also but it does not work and I have no idea about it. Can anybody guide me over this.
Where are you getting your font files from? I normally try to stick to using Google fonts rather than using loads of files because you know they'll work as they've been tried and tested whereas a lot of the time when you use the individual files, they've been converted from another file type which is where a lot of problems come from.
Google Fonts has the Coustard font and you can use it simply by adding the following to your css file (at the top):
#import url(https://fonts.googleapis.com/css?family=Coustard);
...or head over to Google to customize - https://www.google.com/fonts/specimen/Coustard
Here is the website in question: https://www.cocokeyorlando.com
IE8 is not rendering my custom font-faces when I first go to the page. There are two font-faces that should be loading for the slider text. If I reload/refresh the page nothing changes.
However, when I click on the logo to go back to the homepage, they start working.
Here is the code I am using to load them.
#font-face {
font-family: 'neoretrodrawregular';
src: url('fonts/NEORD.eot');
src: url('fonts/NEORD.eot?#iefix') format('embedded-opentype'),
url('fonts/NEORD___-webfont.woff') format('woff'),
url('fonts/NEORD___-webfont.ttf') format('truetype'),
url('fonts/NEORD___-webfont.svg#neoretrodrawregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'blackjackregular';
src: url('fonts/black_jack.eot');
src: url('fonts/black_jack.eot?#iefix') format('embedded-opentype'),
url('fonts/black_jack-webfont.woff') format('woff'),
url('fonts/black_jack-webfont.ttf') format('truetype'),
url('fonts/black_jack-webfont.svg#blackjackregular') format('svg');
font-weight: normal;
font-style: normal;
}
Any help is greatly appreciated!
Make sure you fonts/black_jack.eot file is there, and the CSS is all correct.
The site is not rendering well in IE11, or in IE8 mode. The site works fine in Chrome.
Check out these...
Font Face not working in IE8 as expected
I coded a website on my mac, and i used a custom font. I defined the custom font with this font-face rule:
#font-face
{
font-family: gnuolane;
src: url('../fonts/gnuolane.otf'),
}
The problem is that the font is not loaded on any windows version of any browser. On my mac, on Safari/Chrome/FF is working perfect.
This is the website.
And this is how it is supposed to look like, when font-face is working correctly:
Thanks
LE:
I generated this code and all those files from fontsquirrel.com. Still not working. I tried with both '../fonts/gnuolane....' and '/fonts/gnuolane....'
#font-face {
font-family: 'gnuolane';
src: url('../fonts/gnuolane_rg-webfont.eot');
src: url('../fonts/gnuolane_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/gnuolane_rg-webfont.woff') format('woff'),
url('../fonts/gnuolane_rg-webfont.ttf') format('truetype'),
url('../fonts/gnuolane_rg-webfont.svg#gnuolane_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
Still not working tho'..
Move all your font files (the actual fonts I mean) to the same folder as your CSS file...
Then use this block of CSS. Tell me if it works. I sense it's a path issue...
#font-face {
font-family: 'gnuolane';
src: url('gnuolane_rg-webfont.eot');
src: url('gnuolane_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('gnuolane_rg-webfont.woff') format('woff'),
url('gnuolane_rg-webfont.ttf') format('truetype'),
url('gnuolane_rg-webfont.svg#gnuolane_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
try this
#font-face {
src: local('gnuolane'), url('/path_to/gnuolane.otf') format('truetype');
}
The webpage where I'm trying to get the custom font "Duke-Fill" to display is http://www.hamlinforcongress.com/helpout.php
I'm using:
#font-face {
font-family: 'header_font';
src: url('Duke-Fill.eot?#iefix') format('embedded-opentype'),
url('Duke-Fill.woff') format('woff'),
url('Duke-Fill.ttf') format('truetype'),
url('Duke-Fill.svg#svgFontName') format('svg');
}
.header_font{
font-family: header_font;
}
I've tried every other suggestion I can find on the Internet, but nothing can make the custom font display in Internet Explorer. It works perfectly in every other conceivable browser, but not IE (surprise surprise). Help?
#font-face {
font-family: 'NimbusSanConD-Lig';
src: url('fonts/228BFB_1_0.eot');
src: url('fonts/228BFB_1_0.eot?#iefix') format('embedded-opentype'),
url('fonts/228BFB_0_0.woff') format('woff'),
url('fonts/228BFB_0_0.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
This code works in IE. It was generated using Font Squirrel
I just pulled up a project I'm working on to make some modifications, and noticed that declaration font-weight: lighter which is being served via #font-face and it is no longer working on the site (see image - top chrome, bottom ff). Nothing has changed on my system (Windows) since last night, bar being upgraded to Chrome 19.0.1084.46 today, which I presume is the problem, but I am wondering if anyone else has noticed this or if there is a fix?
Thanks.
Try using a number instead the relative term lighter.
For example: font-weight:100 will be the lightest.
There's a handy article about relative and absolute font-weights here:
http://webdesign.about.com/od/fonts/qt/aa031807.htm
If you are using a font-face font that has multiple styles (as you should) make sure that each variant is specifically tied to a font-weight, that way each variation has its own explicit file. Otherwise it's kinda up to the browser to make up what it wants to do. I have found that the automatically generated code from font-squirrel does not do this (though perhaps they've updated they're packaging)
Notice in the following code how each file has font-weight and font-style set explicitly. This leaves no room for guessing.
#font-face {
font-family: 'CaviarDreams';
src: url('fonts/CaviarDreamsItalic-webfont.eot');
src: url('fonts/CaviarDreamsItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/CaviarDreamsItalic-webfont.woff') format('woff'),
url('fonts/CaviarDreamsItalic-webfont.ttf') format('truetype'),
url('fonts/CaviarDreamsItalic-webfont.svg#CaviarDreamsItalic') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'CaviarDreams';
src: url('fonts/CaviarDreams_BoldItalic-webfont.eot');
src: url('fonts/CaviarDreams_BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/CaviarDreams_BoldItalic-webfont.woff') format('woff'),
url('fonts/CaviarDreams_BoldItalic-webfont.ttf') format('truetype'),
url('fonts/CaviarDreams_BoldItalic-webfont.svg#CaviarDreamsBoldItalic') format('svg');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: 'CaviarDreams';
src: url('fonts/CaviarDreams-webfont.eot');
src: url('fonts/CaviarDreams-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/CaviarDreams-webfont.woff') format('woff'),
url('fonts/CaviarDreams-webfont.ttf') format('truetype'),
url('fonts/CaviarDreams-webfont.svg#CaviarDreamsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'CaviarDreams';
src: url('fonts/CaviarDreams_Bold-webfont.eot');
src: url('fonts/CaviarDreams_Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/CaviarDreams_Bold-webfont.woff') format('woff'),
url('fonts/CaviarDreams_Bold-webfont.ttf') format('truetype'),
url('fonts/CaviarDreams_Bold-webfont.svg#CaviarDreamsBold') format('svg');
font-weight: bold;
font-style: normal;
}