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.
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 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.
I use Brackets code editor and in the live preview it works perfectly but once I upload it onto the actual site it defaults to Arial. I've put the font in the css folder but I just don't understand why it doesn't work on the live site.
Here is my code.
#font-face {
font-family: BMgermar;
src: url('http://example.com/css/BMgermar.TTF') format('truetype');
}
Thanks in advance.
You Most Upload The Font In five Formats To Work Perfectly like This Code
#font-face {
font-family: 'droidkufi';
src: url('../fonts/droidkufi/droidkufi-webfont.eot');
src: url('../fonts/droidkufi/droidkufi-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/droidkufi/droidkufi-webfont.woff') format('woff'),
url('../fonts/droidkufi/droidkufi-webfont.ttf') format('truetype'),
url('../fonts/droidkufi/droidkufi-webfont.svg#droid_arabic_kufiregular') format('svg');
font-weight: normal;
font-style: normal;
}
And The Font Formats is:
eot
woff
ttf
svg
OR You Can Simply Import The fonts form https://www.google.com/fonts
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 use fontsquirrel's CSS for #font-face:
#font-face {
font-family: 'pf_agora_serif_promedium';
src: url('pfagoraserifpro-medium-webfont.eot');
src: url('pfagoraserifpro-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('pfagoraserifpro-medium-webfont.woff') format('woff'),
url('pfagoraserifpro-medium-webfont.ttf') format('truetype'),
url('pfagoraserifpro-medium-webfont.svg#pf_agora_serif_promedium') format('svg');
font-weight: normal;
font-style: normal;
}
It works correctly in all browsers if
a)I use fonts that fontsquirrel generated.
b)I don't use cyrilic charset or another characters that could be on my font file but fontsquirrel does not converting at all (like russian letters ЯЩЮИГЛЬЦЫЧ)
So, when I changed my font files on my directory to another (which contain russian letters) IE9 and lesser don't show my font at all, even if I use only latin charset, but it works correctly (with latin and cyrilic charset) in normal browsers. So what's wrong. Does the problem inside of font files? And if not, why font-face don't working when I changing only font files?
p.s. I'd tried to use another CSS for font-face but they didn't work at my web-site.
i think fonts path is not giving you,
Please check fonts local path, may i sure working in all browser this #font-face kit,
EOT fortmat for ie8 and ie 9
#font-face {
font-family: "pf_agora_serif_promedium";
src: url("yourlocalpath/pfagoraserifpro-medium-webfont.eot");
src: local("☺"),
url("yourlocalpath/pfagoraserifpro-medium-webfont.woff") format("woff"),
url("yourlocalpath/pfagoraserifpro-medium-webfont.ttf") format("truetype"),
url("yourlocalpath/pfagoraserifpro-medium-webfont.svg#LucidaFax-bold") format("svg");
}