How to use Open Sans font with cakePhp 3?

0
votes

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.

2
cssfontszurb-foundationcakephp-3.0google-font-api
Are you using CSS or SCSS? – Thomas Taylor
It's really hard to help without seeing the rest of your css but are you overriding Foundations default font-family which is Helvetica? – Thomas Taylor
Also if base.css is called before your foundation.css it will likely override anything font wise as it uses Helvetica. If you're look to customise Foundation I would use the SCSS version instead: regbirch.com/blog/cakephp-zurb-foundation-livereload – Thomas Taylor
Please see whole base.css pastebin.com/kkzJP3DP – silakanbrotha
Ahhh you're trying to change Normalize. Answe below. – Thomas Taylor

2 Answers

0
votes

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.

1
votes

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';
  ...
}