I have embedded Yakov thin fonts with CSS via #font-face but the fonts are are so different from the original ones.
What could be the reason for this? Here is my code
#font-face
{
font-family:'Yakovthin';
src: url('../fonts/yakovthin-webfont.eot');
src: url('../fonts/yakovthin-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/yakovthin-webfont.woff') format('woff'),
url('../fonts/yakovthin-webfont.ttf') format('truetype'),
url('../fonts/yakovthin-webfont.svg#') format('svg');
}
div#mainContainer
{
font-family:'Yakovthin';
font-size:12px;
}
Could anyone please help?
Can you provide a URL? Also, try adding font-weight: normal to your code:
#font-face
{
font-family:'Yakovthin';
src: url('../fonts/yakovthin-webfont.eot');
src: url('../fonts/yakovthin-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/yakovthin-webfont.woff') format('woff'),
url('../fonts/yakovthin-webfont.ttf') format('truetype'),
url('../fonts/yakovthin-webfont.svg#') format('svg');
font-weight: normal;
}
div#mainContainer
{
font-family:'Yakovthin';
font-size:12px;
font-weight: normal;
}
You should try this instead :
#font-face
{
font-family:'Yakovthin';
src: url('../fonts/yakovthin-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/yakovthin-webfont.woff') format('woff'),
url('../fonts/yakovthin-webfont.ttf') format('truetype'),
url('../fonts/yakovthin-webfont.svg#') format('svg');
font-weight: normal;
}
I'm pretty sure you can drop the .eot format, as when .ttf isn't supported, .woff is, so it should do the trick. You should also learn about the "unicode-range" option if you want to deal with Hebrew.
I have solved the issue. The problem was that the site the fonts were not generalized properly.
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
#font-face {
font-family: 'exoregular';
src: url('exo-regular-webfont.eot');
src: url('exo-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('exo-regular-webfont.woff2') format('woff2'),
url('exo-regular-webfont.woff') format('woff'),
url('exo-regular-webfont.ttf') format('truetype'),
url('exo-regular-webfont.svg#exoregular') format('svg');
font-weight: normal;
font-style: normal;
}
I've added a font to my website, however it doesn't not show up in firefox, does anyone know why this is the case?
My CSS is above and my fonts are inside my CSS styles folder.
Any help would be appreciated!
You could try using Browser Specific css using this code for Firefox, http://browserhacks.com/ is good source for browser specific CSS hacks or you can just do a Google search for Browser Specific CSS.
#-moz-document url-prefix() {
#font-face {
font-family: 'exoregular';
src: url('exo-regular-webfont.eot');
src: url('exo-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('exo-regular-webfont.woff2') format('woff2'),
url('exo-regular-webfont.woff') format('woff'),
url('exo-regular-webfont.ttf') format('truetype'),
url('exo-regular-webfont.svg#exoregular') format('svg');
font-weight: normal;
font-style: normal;
}
}
Hope this helps!
code :
#font-face {
font-family: 'GothamRnd-Medium';
src: url('about/fonts/GothamRnd-Medium/GothamRnd-Medium.eot');
src: url('about/fonts/GothamRnd-Medium/GothamRnd-Medium.eot?#iefix') format('embedded-opentype'),
url('about/fonts/GothamRnd-Medium/GothamRnd-Medium.woff') format('woff'),
url('about/fonts/GothamRnd-Medium/GothamRnd-Medium.ttf') format('truetype'),
url('about/fonts/GothamRnd-Medium/GothamRnd-Medium.svg#GothamRnd-Medium') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'ArcherBoldItalic';
src: url('about/fonts/Archer-BoldItal/archer-boldital.eot');
src: url('about/fonts/Archer-BoldItal/archer-boldital.eot?#iefix') format('embedded-opentype'),
url('about/fonts/Archer-BoldItal/archer-boldital.woff') format('woff'),
url('about/fonts/Archer-BoldItal/archer-boldital.ttf') format('truetype'),
url('about/fonts/Archer-BoldItal/archer-boldital.svg#ArcherBoldItalic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'proxima_novalight';
src: url('about/fonts/ProximaNova-Light/proximanova-light-webfont.eot');
src: url('about/fonts/ProximaNova-Light/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
url('about/fonts/ProximaNova-Light/proximanova-light-webfont.woff') format('woff'),
url('about/fonts/ProximaNova-Light/proximanova-light-webfont.ttf') format('truetype'),
url('about/fonts/ProximaNova-Light/proximanova-light-webfont.svg#proxima_novalight') format('svg');
font-weight: normal;
font-style: normal;
}
I have embedded three fonts. Out of three fonts 'proxima_novalight' font is working perfectly in IE8 but other two fonts are not working. I checked all the code but i didn't find the solution. Its working fine in other browsers. Any idea guys ?
If IE8 throws the CSS3111: #font-face encountered unknown error, you
probably have the non-matching font-family name problem.
To resolve this, you need to edit your font file, define identical
names for Fontname, Family name and Name for humans and export your
TTF. This can be done using the FontForge application. Afterwards, you
than again convert it for web (EOT, WOFF).
#font-face {
font-family: 'portagoitc-tt';
src: url('fonts/portagoitc-tt.eot');
src: url('fonts/portagoitc-tt.eot?iefix') format('opentype'),
url('fonts/portagoitc-tt.woff') format('woff'),
url('fonts/portagoitc-tt.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Please check for further details
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');
}
i searched through Stack overflow but fail to find a solution in regards to the problems i face...I believe many people is facing the same problem as well but i am not sure why their solutions can't work on mine.
The Problem:
This is regarding #font-face.
The code on CSS:
#font-face {
font-family: 'JaguarJCBold';
src: url('fonts/jagb____-webfont.eot');
src: url('fonts/jagb____-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/jagb____-webfont.woff') format('woff'),
url('fonts/jagb____-webfont.ttf') format('truetype'),
url('fonts/jagb____-webfont.svg#JaguarJCBold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'TrajanProBold';
src: url('fonts/trajanprobold-webfont.eot');
src: url('fonts/trajanprobold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/trajanprobold-webfont.woff') format('woff'),
url('fonts/trajanprobold-webfont.ttf') format('truetype'),
url('fonts/trajanprobold-webfont.svg#TrajanProBold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'TrajanProRegular';
src: url('fonts/trajanproregular-webfont.eot');
src: url('fonts/trajanproregular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/trajanproregular-webfont.woff') format('woff'),
url('fonts/trajanproregular-webfont.ttf') format('truetype'),
url('fonts/trajanproregular-webfont.svg#TrajanProRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'MyriadProBlack';
src: url('fonts/myriadpro-black-webfont.eot');
src: url('fonts/myriadpro-black-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/myriadpro-black-webfont.woff') format('woff'),
url('fonts/myriadpro-black-webfont.ttf') format('truetype'),
url('fonts/myriadpro-black-webfont.svg#MyriadProBlack') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'MyriadProRegular';
src: url('fonts/myriadproreg-webfont.eot');
src: url('fonts/myriadproreg-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/myriadproreg-webfont.woff') format('woff'),
url('fonts/myriadproreg-webfont.ttf') format('truetype'),
url('fonts/myriadproreg-webfont.svg#MyriadProRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Does anyone know how to make this work for google chrome to allow my fonts to take effect?
Try using the Font Squirrel Font Face generator:
http://www.fontsquirrel.com/fontface/generator
It will give you all the correct CSS for every possible browser.
All you've done is set up your fonts so that they're ready to use in your css file. You need to apply the font to what ever piece of text you wish to style. You would do this the same way you would when using any other web safe font.
eg.
.yourElement {
font: 30px JaguarJCBold;
}