silakanbrotha
silakanbrotha

Reputation: 3

How to use Open Sans font with cakePhp 3?

I'm using cakePhp 3.0.4 to build my application. As i understand, cakePhp 3 uses Zurb Foundation and i do not understand how to change default font(sans-serif)

default font is spesified in base.css file line 11:

/*  font-family: sans-serif; *//* 1 */
font-family: sans-serif;
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */

What i have tried so far: 1. Load font in base.css first line: @import url(http://fonts.googleapis.com/css?family=Open+Sans);

  1. Change base.css font-family to 'Open sans', sans-serif;

Also i have tried:

  1. load the font in default.ctp:

    $this->Html->css('http://fonts.googleapis.com/css?family=Open+Sans:300,400,700')

  2. Change base.css font-family to 'Open sans', sans-serif;

No success so far. Howto use Open sans -font correctly in cakePhp 3 application?

Thanks.

Upvotes: 0

Views: 981

Answers (2)

Thomas Taylor
Thomas Taylor

Reputation: 874

After the Zurb copyright comment add:

@import {url(fonts.googleapis.com/css?family=Open+Sans); }

Then within the Foundation code find each instance of:

font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;

and change it to:

font-family:"Open Sans","Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;

I've left in the Helvetica so if Google Fonts fail it will fall back to that.

Hope that helps.

Upvotes: 0

Andréle
Andréle

Reputation: 336

You have to use font-family: 'Open Sans'; instead of font-family: 'Open-sans';

If you open the url of the google font api:

http://fonts.googleapis.com/css?family=Open+Sans:300,400,700

The name you have to use is set by

@font-face {
  font-family: 'Open Sans';
  ...
}

Upvotes: 1

Related Questions