i linked this custom font using #font-face rule
#font-face{
font-family: "jf_flatmedium";
src: url("../fonts/jf-flat/jf_flat_medium-webfont.eot");
src: url("../fonts/jf-flat/jf_flat_medium-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/jf-flat/jf_flat_medium-webfont.woff2") format("woff2"), url("../fonts/jf-flat/jf_flat_medium-webfont.woff") format("woff"), url("../fonts/jf-flat/jf_flat_medium-webfont.ttf") format("truetype"), url("../fonts/jf-flat/jf_flat_medium-webfont.svg#jf_flatmedium") format("svg");
font-weight: normal;
font-style: normal;
}
the browser (chrome & firefox) not rendering the font 'jf_flatmedium' insted it renders the fallback, i double checked the paths for font files.
and on a side notice in the font TTF file the font name is 'jf flat', if i change "font-family" attribute to be 'jf flat' it gets rendered .. so iam guessing this has something to do with the custom font-family name but can't figure out why
UPDATE: one thing i did not refer to in my question that iam displaying Arabic text, i just noticed that on English font is rendered fine . is there anything preventing using a particular font on any language i desire ?
Have a look at this i don't know if it will help but i hope so
http://www.fontspring.com/support/troubleshooting/troubleshooting-webfonts-and-browsers?utm_source=fontsquirrel.com&utm_medium=help_link&utm_campaign=trouble_shooting_webfonts
Fixed , it turned out to be fontsquirrel issue, i tried another webfont generator transfonter and it worked fine.
Related
At my company website we use a custom web font using a #font-face named HelveticaNeue. It works perfectly except in Internet Explorer 11 here by referring to as IE11.
In some request, usually first time visitors or on some hard refresh, Internet Explorer first render the text (wrapping text with soft line breaks) and then apply the web font. Since HelveticaNeue is a lot wider then the browsers default web font the text needs to be re-rendered to fit the container. All other browsers I have tested dose this fine but not IE11.
Remember, this does not happen every time but it is tested on multiple computers with same result.
I have attached an image which explain the issue.
As shown in the image above the text breaks the layout and run out of it´s container or get cropped due to CSS overflow: hidden;.
Is there a way to force IE11 to either load the font before rendering the text or to force it to re-render after the font is loaded... Or any other idea for a solution?
The page with the issue.
And here the CSS used to include the font in a external stylesheet.
#font-face{
font-family: 'HelveticaNeue';
src: url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneuebold-webfont.eot');
src: url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneuebold-webfont.eot?#iefix') format('embedded-opentype')
, url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneuebold-webfont.woff') format('woff')
, url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneuebold-webfont.ttf') format('truetype')
, url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneuebold-webfont.svg#HelveticaNeueLTCom75BoldJARE') format('svg');
font-weight: 700;
font-style: normal
}
#font-face{
font-family: 'HelveticaNeue';
src: url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneuelight-webfont.eot');
src: url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneuelight-webfont.eot?#iefix') format('embedded-opentype')
, url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneuelight-webfont.woff') format('woff')
, url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneuelight-webfont.ttf') format('truetype')
, url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneuelight-webfont.svg#HelveticaNeueLTCom45LightJARA') format('svg');
font-weight: 400;
font-style: normal
}
#font-face{
font-family: 'HelveticaNeue';
src: url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneueultralight-webfont.eot');
src: url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneueultralight-webfont.eot?#iefix') format('embedded-opentype')
, url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneueultralight-webfont.woff') format('woff')
, url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneueultralight-webfont.ttf') format('truetype')
, url('../../typo3conf/ext/site/Resources/Public/Fonts/helveticaneueultralight-webfont.svg#HelveticaNeueLTCom25UltraLtJARA') format('svg');
font-weight: 300;
font-style: normal
}
You can confirm the issue by visiting the site and typing Ctrl + F5 repeatedly In IE11 and suddenly the issue will appear.
I had the same problem. Changing the font-family name to specify the weight instead of relying on font-weight fixed it for me.
E.G. Change the font-family name to "Helvetica Neue Light" and just leave the CSS as the default weight (normal).
I fixed it by re-downloading the font kit from fonts.com. It seems they fixed the files on their side as they are different and load correctly on IE11 now.
Cheers
My CSS code:
#font-face {
font-family: 'Yore Script';
font-style: normal;
font-weight: lighter;
src: local('Yore Script'), url("/Users/abricker/Desktop/simple-master 3 copy 2/fonts/yore_script-webfont.woff") format("woff"), url("/Users/abricker/Desktop/simple-master 3 copy 2/fonts/Yore Script.ttf") format("truetype"), url("/Users/abricker/Desktop/simple-master 3 copy 2/fonts/yore_script-webfont.svg") format("svg");
}
Firefox is not picking this up at all. My other fonts are working correctly though (journal and geo sans light) and they are coded the exact same way. Thoughts? Does Firefox not support certain fonts??
Firefox's font display libraries can handle almost any font that complies with the standards. The issue is not Firefox's font display libraries but rather that it cannot access your font.
Are you sure your URLs in the src section are correct? Why do the path names have so many spaces in them? What do you get when you type
ls -l '/Users/abricker/Desktop/simple-master 3 copy 2/fonts/yore_script-webfont.woff'
in your shell? Does that file exist?
I have a problem with font-face in mozilla browser and chrome.
Actually, I use font-face and its working fine, but this is a first time i use font-face with font : Penshurst and its not working. When i using another font is working fine.
This is my font-face code :
#font-face{
font-family:Penshurst;
src:url("../../plugin/font/penshurst.ttf"),url("../../plugin/font/penshurst.eot");
}
#font-face{
font-family:Century Regular;
src:url("../../plugin/font/century gothic regular.ttf"),url("../../plugin/font/century gothic regular.eot");
}
For font face with font: Century Regular, it's working fine, but for Penshurst its not working.
Any suggestion for this problem?
Thx
Here is the correct format:
#font-face {font-family: 'Penshurst';
src: url('../../plugin/font/penshurst.eot');
src: url('../../plugin/font/penshurst.eot?#iefix') format('embedded-opentype')? /* if needed for IE */,
url('../../plugin/font/penshurst.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
Also...
you might need this:
`url('../../plugin/font/penshurst.woff') format('woff'),`
...you might have to convert to get this...(see my link on my comment below)
Make sure your server IIS has MIME Type for .eot/.otf/.ttf/.woff so that way you can preview them locally or online(server)...and lastly even though you can see Century Regular doesn't mean that Penshurst in your server/localhost
:)
I can't seem to get #font-face to pull down these embedded fonts.
Page is here: http://clubs.speareducation.com/resources/
The header "Download Digital Resources" is suppose to be gotham_htfregular.
Take a look at my global.css stylesheet (fonts are at the top). Have tried double quotes, single quotes... I have never had trouble with this before... Am I missing something here?
Here is my CSS.
#font-face {
font-family: "gotham_htfregular";
src: url("gothahtfregular-webfont-webfont.eot");
src: url("gothahtfregular-webfont-webfont.eot?#iefix") format("embedded-opentype"),
url("gothahtfregular-webfont-webfont.woff") format("woff"),
url("gothahtfregular-webfont-webfont.ttf") format("truetype"),
url("gothahtfregular-webfont-webfont.svg#gotham_htfregular") format("svg");
font-weight: normal;
font-style: normal;
}
Thanks!
The URLs of the font files are not properly set. Check them out.
I see gothahtfbol-webfont-webfont, gothahtfboo-webfont-webfont, and gothahtfmed-webfont-webfont, all loaded as 'gotham_htfregular'; so tell me, which of these files you're importing contains 'gotham_htfregular'? looks like there's bold, medium, and something else, but none of them look like they're regular.
I'm using http://www.fontsquirrel.com/fontface/generator to generate my font ready for web. I've set the options to include subsetting of the German language.
In the website I put this: Über WFW Deutschland but when viewed it comes out as Uber WFW Deutschland. Whats weird is that if I view in any IE version it shows correctly. If I switch to any default system font it also displays correctly in any browser.
How can I get my generated font to work correctly?
Update - CSS Code from generator:
#font-face {
font-family: 'PalatinoMedium';
src: url('../fonts/palatinm-webfont.eot');
src: url('../fonts/palatinm-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/palatinm-webfont.woff') format('woff'),
url('../fonts/palatinm-webfont.ttf') format('truetype'),
url('../fonts/palatinm-webfont.svg#PalatinoMedium') format('svg');
font-weight: normal;
font-style: normal;
}
After hours of fannying about I found that the option Apply Hinting - Improve Win rendering when ticked was breaking the font. Un-ticked that and reconverted my font and now the font is displaying as it should.
Although the font doesn't look as nice on Windows...