9

I was wondering how do you add link tag/google font to head in yii2.

I want to add the following

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>

I have found this documentation but doesn't mention anything about link/adding google font etc

1
  • The way this site works, is you ask a question, we answer, and you select an answer... If your just going to ask questions and not mark any as accepted, then please don't waste our time.
    – Wade
    Sep 8, 2016 at 15:34

3 Answers 3

23

The correct answer is to create a new AssetBundle.

While you can directly place the HTML for the fonts into the of your main.php file, this isn't the Yii way. If you have tried to load jQuery files this way, you might notice odd behavior when directly putting them into the HTML.

For example: Directly place the HTML tag for Bootstrap CDN into the head of your main.php. Then, somewhere in your code try to use the tooltip. You will get an error in your console that tooltip is not a function. - This is because the way Yii puts all your template files together, and at that time, Bootstrap is not available.

While simply loading a font probably won't cause any problems, it is a good idea to do things the way they were intended. Following MVC rules, properly documenting your code, and following the Yii best practices, will go a long way. Not only will you thank yourself a year later when you have to go back into a project, but the next guy will appreciate it. I can't stand going into systems, and seeing stuff thrown everywhere, chincy hacks, and spaghetti code, and no documentation or comments.


Correct Way:

Create a new AssetBundle. In your assets folder, you probably already have AppAsset.php. Duplicate it, and name it FontAsset.php.

Here is an example from my project, using 3 Google fonts.

FontAsset.php

<?php
namespace app\assets;

use yii\web\AssetBundle;

class FontAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        '//fonts.googleapis.com/css?family=Open+Sans:400,700',
        '//fonts.googleapis.com/css?family=Ubuntu:400,700',
        '//fonts.googleapis.com/css?family=Oswald:400,700'
    ];
    public $cssOptions = [
        'type' => 'text/css',
    ];
}

In your layout, main.php for example. Right under where you see AppAsset::register($this)

main.php

use app\assets\FontAsset;
FontAsset::register($this);

For every layout file that you want to load those fonts, include the FontAsset.

The AssetBundle is basically a bundle of CSS and/or JS files and options. You could add another one for say JWPlayer say named VideoAsset, and add your JS/CSS files for JWPlayer in it.

Point being, you shouldn't be adding these things directly into the HTML of the layouts directly, as it can cause problems. Let the AssetManager handle them by declaring AssetBundles.

It might save you later down the road!

3
  • Additionally you have to add the following line also to your main.php at the top of the file where you declare assets and widgets to make it work: use app\assets\FontAsset; Otherwise Yii won’t be able to recognize your newly created asset.
    – g0m3z
    Dec 1, 2015 at 13:51
  • Excellent answer! Thank you! Mar 28, 2016 at 12:10
  • @con322 The way this site works, is you ask a question, we answer, and you select an answer... If your just going to ask questions and not mark any as accepted, then please don't waste our time.
    – Wade
    Mar 29, 2016 at 1:47
0

The best way is to create an asset bundle and add the link to the bundle. You can find a complete guide here: http://www.yiiframework.com/doc-2.0/guide-structure-assets.html

-2

You can put it directly in the head of the layout (file views/layouts/main.php)

2
  • Okay thanks, thats what i'll do I thought it might of been done to a similar way to using registerjsfile but never mind
    – con322
    Feb 23, 2015 at 19:16
  • You shouldn't really be using the register functions, except in rare events. You should use the Asset Bundles. If you had 1 page that required a specific js file, you would register it for that page only. For example: JWPLayer. Say you have 50 pages to your site. You could have 3 different layouts, 3 different AssetBundles. On 1, only 1, of those 50 pages you need the JWPlayer on it. Since the player isn't on the other 49 pages, you don't want/need to include it on every page. So you could use the register function to include it on the page specifically.
    – Wade
    May 18, 2015 at 3:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.