Jumat, 26 September 2014

How to use Google Web Font with external CSS file

Dezul
19.06
0
How to use Google Web Font with external CSS file These days, pretty much all websites take advantage of external css file to manage look/feel of the html pages. Doing so allows you to change look/feel of all pages by simply modifying just one file, usually called stylesheet.css. However getting fonts to look the same on different devices/OS isn't as simple because different computers/smartphones have different sets of fonts. To overcome this and ensure that all of your visitors view your site with the same font no matter what OS is used, you need to use what's called Web Fonts. You can host it yourself or use ones hosted by other providers, but I prefer Google Web Fonts (free too).

In this post, I will show you how to create a html file, a css file, tell the html file to use css file, and then modify the css file to use Google Web fonts. It's pretty simple. When I started working on this solution, I couldn't find a straight forward tutorial online. So after I figured it out, I decided to post my notes here. For this tutorial you can create both the html file and CSS file on your PC’s internal HD, like in Documents folder. You should create both files with a text editor like Notepad (Windows), Sublime (Mac) or Textmate (Mac). Do NOT use Microsoft Word or TextEdit (Mac).

Create test.html

Create a basic HTML page with following and name it as test.html. In your text editor, save the file. But do NOT close your text editor yet. You will be editing test.html later in this tutorial.
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3.  
    4. 

  4. <head>
    5. 

  5. <meta charset="utf-8">
    6. 

  6. <title>Test title</title>
    7. 

  7. </head>
    8. 

  8.  
    9. 

  9. <body>
    10. 

  10. Test content.
    11. 

  11. </body>
    12. 

  12.  
    13. 

  13. </html>
    14.
In File Manager right click on test.html > Open with > Firefox (or any other browser of your choice). You should see the test.html page in your web browser of choice but it looks not that professional. We will add some decoration with CSS.

Create a CSS file, calling it stylesheet.css

Create an external CSS style file in the same folder as test.html. We will name this CSS file as stylesheet.css. Add following content.
  1. body {
    2. 

  2. background-color: #EDEDED;
    3. 

  3. font-family: GillSans, Calibri, Trebuchet, sans-serif;
    4. 

  4. margin: 30px;
    5. 

  5. }
    6.
The CSS file basically sets the test.html to have a grayish background color with 30pixels of margin between the browser window. It also gives some fonts visitors’ web browser should use to display the text. Because different computers have different fonts, not all will see same font, which is not desirable. This will be fixed later with Google Web Fonts.

Tell test.html to use stylesheet.css

Now we need to link test.html with stylesheet.css. Go back to your text editor to edit test.html. Add following line above </head>.
  1. <link rel="stylesheet" href="stylesheet.css" type="text/css" />
    2. 

At this point test.html in your text editor should look like this:
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8">
    5. 

  5. <title>Test title</title>
    6. 

  6.  
    7. 

  7. <link rel="stylesheet" href="stylesheet.css" type="text/css" />
    8. 

  8.  
    9. 

  9. </head>
    10. 

  10.  
    11. 

  11. <body>
    12. 

  12. Test content.
    13. 

  13. </body>
    14. 

  14.  
    15. 

  15. </html>
    16.
Save test.html

Review test.html in browser. It looks professional now

Go to your browser window that’s showing test.html. Refresh your window. You should see the background color change to light gray color. The font should also look different.

Using Google Web Fonts

  1. I won’t try to explain in detail here but fonts you specify in CSS may not appear properly on others’ web browser window. They may not have the font you specified. To remedy problem you can use what’s called Web Fonts.
  2. I will use Google Web Fonts. In this step I will pick a font at Google Web Fonts site. And then I will copy and paste 2 separate lines of code.
    1. Go to http://www.google.com/webfonts.
    2. You can scroll through to find the font you like. I will use Roboto Condensed for this tutorial. Search for ‘Roboto Condensed’
    3. If you wish, click on ‘See all styles’ to see all 6 styles of Roboto Condensed fonts. Click on ‘Quick use’
    4. Option 1: I will only pick Normal 400. Adding more fonts will slow down webpages. Pick only what you will use.
    5. Option 2: Nothing to do here.
    6. Option 3: There are 3 types of codes you can use. I recommend ‘@import’. I don’t recommend Standard and Javascript. Using Standard code requires adding a line in each HTML document. The Javascript may not work as some (albeit few) disable Javascript in their browsers. With ‘@import’ method, you only need to worry about editing stylesheet.css.
      1. Option 3.1: To use ‘@import’ code, click on ‘@import’ tab to see the code. Copy following code to beginning of stylesheet.css.
      2. @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
    7. Option 4: Copy following code to stylesheet.css.
      1. font-family: 'Roboto Condensed', sans-serif;
    8. Delete the following line from stylesheet.css
      1. font-family: GillSans, Calibri, Trebuchet, sans-serif;
  3. Your stylesheet.css file should contain following lines.
    1. @import url(http://fonts.googleapis.com/css?family=Open+Sans);
      2. 

    2.  
      3. 

    3. body {
      4. 

    4. background-color: #EDEDED;
      5. 

    5. font-family: "Open Sans", sans-serif;
      6. 

    6. margin: 30px;
      7. 

    7. }
      8.
  4. Make sure to save stylesheet.css. You do not have to close your text editor.
  5. Refresh your web browser. The webpages now render with Roboto Condensed font. This pretty much guarantees all the visitors will view your site using the same font.
  6. If you have multiple html pages, you can change font on all of them just by modifying one file (stylesheet.css), as long as they all use the same stylesheet.css. You should obviously ensure all html files use the same stylesheet.css.

Sumber: http://paulcodr.co/blog/2013/google-web-font-css/