I am trying to use a custom font in CakePHP but it doesn't seem to be working.
I am getting the font from http://www.dafont.com/ssf4-abuket.font (A Street Fighter font!!). And I store the ttf font file to webroot/css.
This is my CSS:
#font-face {
font-family: 'SF';
src: url('StreetFighter.ttf') format('truetype');
}
p {
height: 50%;
margin: 30px 0;
text-align: center;
font-size: 2.2rem;
font-family: 'SF';
color: #000;
}
However, when I use a different font such as the Arkitech from http://www.1001freefonts.com/ with the same code but different filename it works.
As you are only having a .ttf file for your font-face, not all browsers can use .ttf font files. You have to declare alternative font formats in the #font-face css.
You can generate these other font formats with an online converter. (for example: http://freedockstar.com/fontface/).
Then you need to have the following font-face declaration:
#font-face {
font-family: 'SF';
src: url('StreetFighter.eot'); /* IE9 Compat Modes */
src: url('StreetFighter.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('StreetFighter.woff') format('woff'), /* Modern Browsers */
url('StreetFighter.ttf') format('truetype'), /* Safari, Android, iOS */
url('StreetFighter.svg') format('svg'); /* Legacy iOS */
}
I've tried your font with this tool and it generates a working preview of your webfont.
Related
This question already has answers here:
#font-face fonts not working
(2 answers)
Closed 8 years ago.
I need to set a font family in my web page with thte #font-face, but I can't make it work propertly: This is the content of my css file
#font-face {
font-family: knockout;
src: url('../fonts/knockoutHTF27.ttf');
}
body {
font-width: normal;
font-size: 20px;
font-family: knockout !important;
color: #223041;
text-align: center;
}
I've tried the same code in two diferent computers and it works pefercty in one of them but doesn't work in the other. What could be wrong?
You should try with full embedding, with all the quotation marks. It clears possible malfunctions on different browsers/OS.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Then, use it like this:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
As mentioned in a previous answer, if needed, you can use http://www.fontsquirrel.com/ or one of other font-face generator services on the web, to get all needed font formats.
Try after removing ''
src: url(../fonts/knockoutHTF27.ttf);
You must use other font file format for different browesers not only .ttf, .woff, .eot. And check your path
I'm trying to get a font working from local storage.
#font-face {
font-family: const;
src: url(const.ttf);
}
.fp_title1 {
font-family: 'const', trebuchet ms;
font-size: 350%;
font-weight: 100;
-webkit-text-stroke: 1px;
}
This won't work. I've tried renaming the file, using the 'font-family' with and without quotes...
I've also tried to link the font with HTML
<link href='CSS/const.ttf' rel='stylesheet' type='text/css'>
It's in the same folder, the name is right. I don't get it.
EDIT: My CSS file is already linked, the font is .ttf
You might have 2 mistakes in code: path and extention. And use the following formats as well as ttf:
#font-face {
font-family: 'const';
src: url('const.eot'); /* IE9 Compat Modes */
src: url('const.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('const.woff') format('woff'), /* Modern Browsers */
url('const.ttf') format('truetype'), /* Safari, Android, iOS */
url('const.svg#svgFontName') format('svg'); /* Legacy iOS */
}
urls that helps to create web fonts:
http://www.fontsquirrel.com/tools/webfont-generator
http://www.font-face-generator.com/
CSS has a .css filename extension, you gave it .ttf
I am able to display fonts in chrome, but not in firefox. I'm wondering if this is an issue because I'm using the bootstrap framework. Here's my code:
#font-face
{
font-family:"bodyFont";
src: url("http://caseymmiller.com/galapagos/fonts/museosans_300.otf");
}
body
{
margin: 0;
font-family: "bodyFont";
font-size: 15px;
line-height: 20px;
color: #333333;
background-color: #ffffff;
}
Also, upon uploading it to my server, only one font is now appearing in chrome... and local sourcing wasn't working so I removed it. I am quite confused. http://caseymmiller.com/galapagos/bootstrapInvasive/Invasive.html
This is what I have in the css now. I tried what you listed before, but when sourcing both urls for each font, none of them would appear. That's why some are commented out right now. These are the sources that I want to use from now on.
#font-face
{
font-family:"headerFont";
src: url("http://livinggalapagos.org/static/Fonts/qhyts__.ttf");
/*src: url("http://livinggalapagos.org/static/Fonts/qhyts__.woff");*/
}
#font-face{
font-family:"subHeadFont";
src: url("http://livinggalapagos.org/static/Fonts/museosans_500.ttf");
src: url("http://livinggalapagos.org/static/Fonts/museosans_500.woff");
}
#font-face{
font-family:"bodyFont";
src: url("http://livinggalapagos.org/static/Fonts/museosans_300.ttf");
/*src: url("http://livinggalapagos.org/static/Fonts/museosans_300.woff");*/
}
#font-face is a complicated property. Here are some resources that might help you to code a "cross-browser" #font-face.
https://developer.mozilla.org/pt-BR/docs/CSS/#font-face
http://www.fontsquirrel.com/tools/webfont-generator
I'm wondering if you don't have a typo in 2 of your properties?
src: url('fonts/museosans_300-.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/museosans_300-.ttf') format('truetype'), /* Safari, Android, iOS */
Shouldn't these two be
src: url('fonts/museosans_300-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/museosans_300-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
Note the added webfont at the end of the file paths.
Be sure to clear your browser cache after making these changes as well.
Good luck!
I am using font-family "angelina". Its working properly on local server. But its not working on live server. It also working on live server just only on my computer. But its not working on any other computers.
I check it in all browsers on other computers but its not working.
I am using CSS code like this
#font-face {
font-family: MyCustomFont;
src: url("ANGELINA.eot") /* EOT file for IE */
}
#font-face {
font-family: MyCustomFont;
src: url("ANGELINA.TTF") /* TTF file for CSS3 browsers */
}
.test_font{
font-family: angelina;
font-size: 36px;
font-weight: bold;
}
You need to have all kinds of font extensions on server to support all browsers.
#font-face {
font-family: MyCustomFont;
src: url('ANGELINA.eot');
src: url('ANGELINA.eot?') format('☺'),
url('ANGELINA.woff') format('woff'),
url('ANGELINA.ttf') format('truetype'),
url('ANGELINA.svg#webfontssbCkuz5') format('svg');
}
You can find all font extensions on this site http://www.google.com/webfonts
It supposed to be:
#font-face {
font-family: angelina;
src: url("ANGELINA.eot") /* EOT file for IE */
}
#font-face {
font-family: angelina;
src: url("ANGELINA.TTF") /* TTF file for CSS3 browsers */
}
if you want to call font-family: angelina;
I downloaded a font inlove-light-wf.ttf, in order to use the rule #font-face.
I have in my folder: home.html and inlove-light-wf.ttf.
In my CSS I have :
#font-face {
font-family: 'Inlove';
src: url('inlove-light-wf.ttf');
font-weight: normal;
font-style: normal;
}
#definicao{
text-align:center;
color:#0080C0;
font-family:'Inlove';
font-size:24px;
margin-top:20px;
border-top:solid #999 thin;
padding: 20px 40px 3px 40px;
height:290px;
background-color:#EFEFEF;
}
#definicao{
text-align:center;
color:#0080C0;
font-family:'Inlove';
font-size:24px;
margin-top:20px;
border-top:solid #999 thin;
padding: 20px 40px 3px 40px;
height:290px;
background-color:#EFEFEF;
}
But it doesn't work.
One source of the problem could be if your css is in a separate file that isn't in the root folder. For example, if you keep all of your css files in a 'css' folder, you'll need to modify the font url to be relative to that file, not to the root folder. In this example it would be src: url('../inlove-light-wf.ttf');
Furthermore, not all browsers can use .ttf font files. You have to declare alternative font formats in the #font-face css.
Here's a modified #font-face declaration to get you started. I would also recommend reading more here and here.
#font-face {
font-family: 'Inlove';
src: url('inlove-light-wf.eot'); /* IE9 Compat Modes */
src: url('inlove-light-wf.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('inlove-light-wf.woff') format('woff'), /* Modern Browsers */
url('inlove-light-wf.ttf') format('truetype'), /* Safari, Android, iOS */
url('inlove-light-wf.svg#svgFontName') format('svg'); /* Legacy iOS */
}
The #font-face rule usually doesn't support some old browsers. I usually use font-face generator which will generate css file from your font that you need to include, and all browsers will show it correctly.
I had problems with font too. When font was working in IE wasn't on iPhone and when was working on iPhone wasn't in IE. Here is my code (i don't know why it works this way, but it does for me):
#font-face{
font-family:"Royal Chicken";
src: url(../gradivo/font/RoyaChicken.eot);
src: url(../gradivo/font/RoyalChicken.ttf) format("truetype"), /* Safari, Android, iOS */
url(../gradivo/font/RoyalChicken.eot?#iefix) format("embedded-opentype"), /* IE6-IE8 */
url(../gradivo/font/RoyalChicken.woff) format("woff"), /* Pretty Modern Browsers */
url(../gradivo/font/RoyalChicken.svg#RoyalChicken) format("svg");
}
#font-face{
font-family:"Royal Chicken";
src: url(../gradivo/font/RoyaChicken.eot);
}
#font-face{
font-family:"Royal Chicken";
src: url(../gradivo/font/RoyalChicken.ttf) format("truetype");
}
It may help you. :)