CODEWITHSUNDEEP
csscakephpfontsfont-facecustom-font
Johnathan Au
Johnathan Au

Reputation: 5362

How to use custom fonts in CakePHP?

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.

Upvotes: 2

Views: 5670

Answers (1)

Kristof Feys
Kristof Feys

Reputation: 1842

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.

Upvotes: 1

Related Questions