I have two fonts that I wanted to include on my website for my logo, Bebas Neue Regular and Bebas Neue Thin.
I converted my fonts using font-squirrels online font conversion tool and have added the relevant #font-face code to my css:
#font-face {
font-family: BebasNeueReg;
src: url("/fonts/BebasNeueRegular.eot");
src: url("/fonts/BebasNeueRegular.eot?#iefix") format('embedded-opentype'),
url("/fonts/BebasNeueRegular.woff2") format('woff2'),
url("/fonts/BebasNeueRegular.woff") format('woff'),
url("/fonts/BebasNeueRegular.ttf") format('truetype'),
url("/fonts/BebasNeueRegular.svg") format('svg');
}
As you can see this is the #font-face css for the Bebas Neue Regular. For some strange reason the css #font-face for Bebas Neue Thin works absolutely fine in all browsers. This css is exactly the same apart from the src being different.
#font-face {
font-family: BebasNeueThin;
src: url("/fonts/BebasNeueThin.eot");
src: url("/fonts/BebasNeueThin.eot?#iefix") format('embedded-opentype'),
url("/fonts/BebasNeueThin.woff2") format('woff2'),
url("/fonts/BebasNeueThin.woff") format('woff'),
url("/fonts/BebasNeueThin.ttf") format('truetype'),
url("/fonts/BebasNeueThin.svg") format('svg');
}
I have tried multiple things such as, converting the font using different font conversion tool, swapping the order around of the url's.
Can anyone shed some light? Has anyone has this exact same problem before?
Thanks in advance.
I cleared everything and started again. Downloaded the fonts I wanted to be part of the project and then converted them to web fonts using the web font generator. I then added them back into the project and used the exact CSS #font-face that came in the zip file. This seems to have fixed things. May have been a corrupted open type font that I was trying to convert in the first place.
Related
In my site, the icons of font awesome sometimes become squares, and most of the time, they load correctly, i've been looking for that issue in forums, and it seems that this case is not the same as theirs:
the icons are of font awesome and class fa fa-ANYEXAMPLE exists
the fonts are in a folder (/css/fonts) as it should be
the content of the file fontawesome.css are copied in the file bootstrap.css and called in the head of the site
I consider that my links are correct, since the icons load correctly most of the time
What could the problem be?
Open your style.css and link to FontAwesome using font-face:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Just make sure to edit the paths if they are any different.
I checked all question regarding this issue here but no luck. Issue is only with IE7 and above, all other browsers it's working fine.
Below is my CSS code
#font-face {
font-family: 'HelveticaNeue23UltraLightExtended';
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.eot?#iefix');
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.woff') format('woff'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.ttf') format('truetype'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.svg#HelveticaNeue23UltraLightExtended') format('svg');
}
also tried
#font-face {
font-family: 'HelveticaNeue23UltraLightExtended';
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.eot');
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.woff') format('woff'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.ttf') format('truetype'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.svg#HelveticaNeue23UltraLightExtended') format('svg');
}
and here is the test link http://bit.ly/Rtoxgw
I've had a similar problem where IE ignored the font. The problem then was that the font-family name I used contained too many characters for IE, but worked fine for all the other browsers.
Try shorten down the name HelveticaNeue23UltraLightExtended.
#iefix after question mark states that, you need that url to search a query parameter that will fool IE and let you use website without wasting cache.Many people call it a cache bursting trick.(you can try anything after # in front of question mark, its just a cache burst technique .)
You need to change the order in which you write the fonts to get data sequentially out of fonts, and if you do incorrect ordering ,you may end up with errors in reading "eot" files, permission install on "ttf" format files
try this code, this should work, also you need to locally define this new font as a resource[rename resource files to short names]
Also change this when you use it in css, or style sheets.
Also shorten the font name...
try this:
HelveticaNeueule
#font-face {
font-family: HelveticaNeueule;
src: url('../fonts/HelveticaNeue-UltraLigExt/HelveticaNeueule.eot?#iefix') format('embedded-opentype'),
src: local(HelveticaNeueule)
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.svg#HelveticaNeue23UltraLightExtended') format('svg'),
src: url('../fonts/HelveticaNeue-UltraLigExt/HelveticaNeueule.ttf') format('truetype'),
src: url('../fonts/HelveticaNeue-UltraLigExt/HelveticaNeueule.woff') format('woff'),
font-weight: bold
The font parameters like bold, italics can be specified later at end of above block as shown,
Hope this will fix your problem...
I can't seem to find the answer I'm looking for. I have an entirely static page, mostly made up of images. The font used to create the images is 'Handwriting-Dakota.ttf' found on any Mac OS X install. I have one dynamic element containing text which i want to give this font to.
I have the ttf font in the same directory as my css file.
#font-face{
font-family: dakota;
src: url('dakota.ttf') format('truetype');
}
In an html file with the css file included. <p style="font-family: dakota;">sometext</p>
I can see the rule applied in chrome's inspector but it does not change the appearance. Is what I'm trying to do impossible or am I doing it wrong?
Use this format
#font-face {
font-family: 'myfont';
src: url('fonts/myfont.eot');
src: url('fonts/myfont.eot?#iefix') format('embedded-opentype'),
url('fonts/myfont.woff') format('woff'),
url('fonts/myfont.ttf') format('truetype'),
url('fonts/myfont.svg#rsuregular') format('svg');
}
To further gain more knowledge about font-face syntax, read Bulletproof #font-face Syntax.
To get all versions of the font. google the "font converter", there will be plenty of font converter services in first page.
Make sure the url is relative to the css file and not to the webroot.
#font-face{
font-family: 'dakota';
src: url('../fonts/dakota.ttf') format('truetype');
}
And you probably should add other types to make sure other browsers can use the font without problems.
#font-face {
font-family: 'dakota';
src: url('../fonts/dakota.eot');
src: url('../fonts/dakota.eot?#iefix') format('embedded-opentype'),
url('../fonts/dakota.woff') format('woff'),
url('../fonts/dakota.ttf') format('truetype'),
url('../fonts/dakota.svg#rsuregular') format('svg');
}
#Cobolt, you can try FontSquirrel. http://www.fontsquirrel.com/fontface/generator.
All you need is .otf or .ttf file. Then, FontSquirrel will make the .svg, .eot, .woff for you and create a css file.
#font-face {
font-family: 'advertisingmediumregular';
src: url('fonts/advertisingmedium-webfont.eot');
src: url('fonts/advertisingmedium-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/advertisingmedium-webfont.woff') format('woff'),
url('fonts/advertisingmedium-webfont.ttf') format('truetype'),
url('fonts/advertisingmedium-webfont.svg#advertisingmediumregular') format('svg');
font-weight: bold;
font-style: normal;
}
the text disappear in google chrome when I wrote this code can anyone help me please
I already had the same problem. I was adviced to generate my web fonts with a tool like the FontSquirrel webkit fonts generator. Upload your font's files and download back a all browsers compatible pack. Include the css in your HTML page in addition to yours. And it seems to work since I do like this. I hope it will be the same for you.
Has anyone come across something like this exclusively in Chrome 10/Win?
All the non-breaking spaces in these two webfonts aren't rendered properly. Working in IE7/8/9, Firefox, Safari, and Chrome/OSX.
Contents of my fonts.css file:
#font-face {
font-family: 'Hellenic';
src: url('../fonts/eot/hellenic.eot?') format('eot'),
url('../fonts/ttf/hellenic.ttf') format('truetype'),
url('../fonts/woff/hellenic.woff') format('woff'),
url('../fonts/svg/hellenic.svg#MCMHellenicWide') format('svg');
}
#font-face {
font-family: 'Lasalle';
src: url('../fonts/eot/lasalle.eot?') format('eot'),
url('../fonts/ttf/lasalle.ttf') format('truetype'),
url('../fonts/woff/lasalle.woff') format('woff'),
url('../fonts/svg/lasalle.svg#FilmotypeLaSalle') format('svg');
}
#font-face {
font-family: 'LeagueGothic';
src: url('../fonts/eot/leaguegothic.eot?') format('eot'),
url('../fonts/ttf/leaguegothic.ttf') format('truetype'),
url('../fonts/woff/leaguegothic.woff') format('woff'),
url('../fonts/svg/leaguegothic.svg#svgFontName') format('svg');
}
It is highly likely that the webfont is not assembled properly.
I have downloaded CaviarDreams font which is used on Sebastian's site and got the same bug.
Then I downloaded it from here: http://www.dafont.com/caviar-dreams.font, used fontsquirrel.com's typekit generator, and the result was perfectly fine.
Try encoding them using fontsquirrel.com Typekit generator I am not sure what the problem is, but it might help.
Try this from a previous StackFlow question. Refer to the htaccess part, not the beginning:
font-face with wrong MIME type in Chrome
Also refer to this ticket with Google:
http://code.google.com/p/chromium/issues/detail?id=72727&q=%40font-face&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS
Last resort: re-generate your font with Font Squirrel.
I commented on this question before and just found some extra information for people having trouble with the boxes and spaces with 'X' for line breaks, end of line and space characters in Chrome, Internet Explorer and Firefox. Yes, sometimes regenerating the font files improves things but then I noticed my problems largely went away when I added unicode characters for spaces and new lines. Paste the following into the Unicode Ranges field on FontSquirrel when generating your fonts:
0085, 000A, 000B, 000C, 000D, 2028, 2029
For good measure I also type a spacebar into the Single Characters field.