Monday, February 16, 2015

Using google fonts

I made this mistake for awhile now.
Anyways, the main point for this post is to highlight one thing.

DON'T TRUST firebug/inspect element's computed output blindly.

Here is the story, my boss asked me to use Google font's Roboto for the website that I am developing on. So I simply did:

h3 {

    font-family: Roboto;

}

And because using firebug tells me that I already applied Roboto, I didn't question anything further.
But the problem is, my site doesn't know what Roboto is, despite showing that it is Roboto, it is actually another(I don't know what family is that) font, and definitely not the default assigned font for our webpage(Helvetica).

So the problem is actually very simply, I didn't import the font to my laravel program (Because it is an external api's font (Google API).

So here is the main point, regarding how to implement Google's font, one can simply :

1) visit https://www.google.com/fonts/

2) Search the font that you wanted

3) Select the "quick-use" button when hovering over the font's row.

4) Select the weight of the font (Note that only select the options that you will be using to reduce performance impact)

5) Copy the import command and add the CSS as shown in the page. (Paste it on a parent view so it can be inherited)

And again, don't blindly trust the Computed tab.

No comments:

Post a Comment