I have very strange problem about #font-face font Proxima Nova Bold (Polish letters) which I bought in shop. I tested it on different browsers and systems and my two friends which has got Firefox and Windows 7 has got missing letters.
I found solution with disabling ligatures, but it doesn't work because we can see that there are single letters missing, for example T, A or 3.
Example:
Can it be technical problem with font, should I ask fontspring? Or can I repair it by CSS? It is quite difficult to test because I don't have access to computers which has got that situation and not every Firefox on Windows 7 has got that bug. This is problem with font because when we changed in inspector to Arial everything was good.
It can be not connected but the same person who has got missing letters on firefox has got all letters missing on Chrome 37 with Direct Write enabled. When we disabled Direct Write letters were shown.
This is how I load it in CSS:
#font-face {
font-family: 'ProximaNova-Bold';
src: url('assets/fonts/ProximaNova-Bold-webfont.eot');
src: url('assets/fonts/ProximaNova-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/ProximaNova-Bold-webfont.woff') format('woff'),
url('assets/fonts/ProximaNova-Bold-webfont.ttf') format('truetype'),
url('assets/fonts/ProximaNova-Bold-webfont.svg#proxima_nova_rgbold') format('svg');
font-weight: normal;
font-style: normal;
}
I used this exact font on a project recently and did not experience any issues with it across a wide variety of browsers. Try generating the font yourself from the original file for a sanity check.
You should not and most likely will not be able to resolve using CSS.
Try downloading the file again and serving it again. Sometimes your file could have been corrupted.
Related
I'm using the Meteor framework, and have the following in my main.scss file:
#font-face {
font-family: 'GrandHotel-Regular';
src: url('GrandHotel-Regular.eot');
src: url('GrandHotel-Regular.woff2') format('woff2'),
url('GrandHotel-Regular.woff') format('woff'),
url('GrandHotel-Regular.ttf') format('truetype'),
url('GrandHotel-Regular.svg#GrandHotel-Regular') format('svg'),
url('GrandHotel-Regular.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'GrandHotel-Regular';
}
This isn't working and when I inspect the selected font, the family is GrandHotel-Regular just as it should be, but the console says it's rendering as Times New Roman.
I'm using Chrome on Ubuntu, and it's an older version that can no longer be updated because my laptop is so old, however I don't think this is causing the problem, since things like this have worked for me in the past.
What could be going wrong?
Other questions, like this one:
Font coming out as Times New Roman in Older Browsers
or this one:
Font proxima_novalight is rendered as Times New Roman
aren't addressing the same problem.
The urls for your fonts don't have any folder as part of the filepath, which means they have to be in the same folder as your CSS file. Are they really? (If not, add the folder/filepath)
How is your project set up? Check the network tab in the developer tools to make sure the fonts are actually being loaded. If not, recheck your URLs to make sure they are pointing to the right files.
Your code looks completely fine so if your project setup is not the problem, try using a different browser and see if you can reproduce the issue.
Something wrong here?
Here is the added CSS.
#font-face {
font-family: NeutraText-Book;
src: url('../fonts/NeutraText/NeutraText-Book.eot'); /* IE9 Compat Modes */
src: url('../fonts/NeutraText/NeutraText-Book.eot?#iefix') format('embedded-opentype');
src: url('../fonts/NeutraText/NeutraText-Book.otf');
src: url('../fonts/NeutraText/NeutraText-Book.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
The relative URLS are correct, as they work in Firefox and Chrome.
I used the following tool to convert from .ttf to .eot http://ttf2eot.sebastiankippe.com/
I am using Internet Explorer v10 and it displays another font instead, looks like Verdana or something.
IE says:
CSS3111: #font-face encountered a unknown error
NeutraText-Book.otf
CSS3114: #font-face failed with the control of OpenType-embedd permission. Permission must be installable.
NeutraText-Book.otf
(Translated myself from my primary lang).
Browsers may check, in different ways and to a varying degree, that an embedded font (web font, #font-face font) is used according to its license conditions. This appears to be the case here, as the second error message says rather clearly.
Contact the vendor of the font for conditions on using it and possibly purchasing a version licensed for use as embedded font, or try and find some alternative font for which use as embedded font is allowed, such as one of the many Google fonts.
In this site I am currently coding Im using webfonts that are stored on my server.
Every browser displays them just fine but not chrome.
Chrome uses Times New Roman instead.
After checking the developer tools on chrome I found that they fonts ARE being requested from the server and retreived successfully.
For some reason, Chrome wont use them.
I did notice that if I install the fonts on my computer (Using Windows, BTW), the suddenly work on chrome aswell.
Here's my font-face decleration:
#font-face {
font-family: 'BNLunch';
src: url('BN_Lunch.eot');
src: url('BN_Lunch.eot?#iefix') format('embedded-opentype'),
url('BN_Lunch.woff') format('woff'),
url('BN_Lunch.ttf') format('truetype'),
url('BN_Lunch.svg#BNLunchregular') format('svg');
font-weight: normal;
font-style: normal;
}
Any insights?
EDIT:
I forgot to mention that this particular CSS works with other fonts.
Only this particular font and BNMadregot are giving me trouble.
Could it be that it is because the English letters of this font are blank?
I have a similar CSS code here that works fine on every browser, even Chrome.
#font-face {
font-family: "standard 07_58";
src: url("../fonts/standard_07_58/stan0758.eot?") format("eot"),
url("../fonts/standard_07_58/stan0758.woff") format("woff"),
url("../fonts/standard_07_58/stan0758.ttf") format("truetype"),
url("../fonts/standard_07_58/stan0758.svg#Standard0758") format("svg");
font-weight: normal;
font-style: normal;
}
There are some differences from your CSS, so try to follow this pattern and see what happens.
The font is broken (as FontSquirrel told you). Don’t use it. I downloaded BN Lunch from the site you mentioned and processed it with font-face-generator.com, and test .html page it generated does not show characters in that font (and yes, I tried common digits and Hebrew letters, too) on Chrome or on Firefox, only on IE (tested on Win 7). Chrome dev tools shows that Chrome gets the font files and does not signal errors, so apparently the internal tables of the font are broken (e.g., giving wrong information about character coverage). The site that distributes it looks suspiciously like one of the many illegal font distribution sites; e.g., authors or copyright holders of fonts are not mentioned.
So, get another font.
Since some days, my Google Chrome browser doesn't show special fonts : CSS with font-face.
#font-face {
font-family: 'Babel Sans';
src: url('../fonts/babelsans.eot');
src: url('../fonts/babelsans.eot?#iefix') format('eot'),
url('../fonts/babelsans.woff') format('woff'),
url('../fonts/babelsans.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
All working fine with Safari, Firefox and IE, and it worked fine the last week.
Someone has the same problem and someone know how I can resolve it ?
Thanks,
I'm experiencing the same issue since Chrome 20 update. This thing happen in Windows Xp and Mac Os X 10.6.8.
Safari and Mobile Safari (that share WebKit engine with Chrome) works perfectly like Firefox and IE.
My css code is exactly like yours.
Looking in the inspector it seems that the font doesn't get downloaded.
Sometimes while navigating different pages (that share the same css external file) in my website the font loads and get displayed properly.
Still trying to solve this...
EDIT:
I managed to solve this issue.
I don't know why, but using this worked:
http://www.fontsquirrel.com/fontface/generator/
I uploaded my font, got the css and converted files, uploaded them to my server and replaced font-face declaration...bling! It works! Hope that works for you too!
It's working now, I think Google has update the browser.
Since there was an update of Chrome for about a week, you may try using an older version to find out if it's a bug (I myself didn't notice any problems). Get one at http://www.oldapps.com/google_chrome.php.
Also check if you're using this font in addion to other font-related CSS values (if so, deactivate them). There were some problems in the past which actually have been solved, but you never know...
First: Convert you font using this service as Mr Stefano suggest:
Later use this CSS code to use your font in your project:
#font-face {
font-family: 'aljazeeraregular';
src: url('aljazeera-webfont.eot');
src: url('aljazeera-webfont.eot?#iefix') format('eot'),
url('aljazeera-webfont.woff') format('woff'),
url('aljazeera-webfont.ttf') format('truetype'),
url('aljazeera-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background-color: #eaeaea;
font-family: 'Aljazeera';
font-size: 14px;
}
Note that when you call font-family in your site you have to use its original name not like what you declare it in #font-face.
I made a website using webfont, in Fontsquirrel.
#font-face
{
font-family: 'Univers57Condensed';
src: url('/resources/fonts/univers-condensed-webfont.eot');
src: url('/resources/fonts/univers-condensed-webfont.eot?#iefix')
format('embedded-opentype'),
url('/resources/fonts/univers-condensed-webfont.woff') format('woff'),
url('http://hcil.snu.ac.kr/~muclipse/resources/fonts/univers-condensed-webfont.ttf')
format('truetype'),
url('/resources/fonts/univers-condensed-webfont.svg#Univers57Condensed')
format('svg');
font-weight: normal;
font-style: normal;
}
I imported eot, woff, svg, ttf files like above.
Actually, it works fine, but I see some problems.
IE seems to load eot file always, but Google Chrome seems to load random files unpredictably.
Chrome, in MasOS, ordinary condition, but sometimes texts are rendered fatter.
I guess the difference in rendering font is caused by loading different font file, isn't it?
How can I solve this problem, importing only eot and another format?
The real reason for this difference, I suspect, is simply that different operating systems render fonts differently. The same font will look slightly different on Windows, OS X and Linux - and even within an OS, will change depending on settings (on Windows, you can see this if you enable / disable ClearType).
Basically, pixel-perfect similarity is impossible across different platforms.