Current Assignments:
> HW-04
> HW-05

Due:
Mon Nov 06 @ 11:55PM
Previous module:
Next module:

External Fonts from the Web

Sometimes, as with embedding movies and audio, it is easier and more efficient to utilize a service that will deliver the fonts via their servers.

This type of service will allow you to not worry about font-package types. As the service will often query the browser and deliver the appropriate type. Additionally, this means that you do not have to manage the fonts on your server space.

Google Fonts, in addition to allowing for font downloads, also provides a font server service.

There are embed links from the same pop-up window that allows you to download a font-package. Simply copy the HTML or CSS embed code from their site into the appropriate place. Then specify the font in CSS rules.

An Example
Linking a Google Font

As an example, lets do the same thing as the previous page, but instead, use Google’s embed code.

To do this, we will pick up after step 4.

NOTE: Make sure you have still selected a font, and gone into the CUSTOMIZE tag to select any additional font styles you may need.

Select additional font styles from the CUSTOMIZE tag

Steps 1 through 4

Please refer back to the “Example with Google Fonts” area of the previous page.

Instead of downloading the fonts, select the “EMBED” tag next to “CUSTOMIZE”. Select the EMBED tag

Then depending on whether you want to include the embed code in your HTML OR CSS, select the “STANDARD” tag OR “@IMPORT” tag.

Then copy the code below in the gray box.

STANDARD

Standard Embed Code

This would go in the <head> element of index.html:

HTML
<link href="https://fonts.googleapis.com/css?family=Arvo:400,400i,700,700i" rel="stylesheet">
@IMPORT

'@IMPORT' Embed Code

This could be placed either in:

  1. a CSS file, such as at the top of your style.css file.
  2. the index.html file inside a <style>...</style> element.

NOTE: Where ever you place it, you must make sure it appears before you try to assign the font.

If we placed this in our css file, it would appear at the top like:

CSS
@import url('https://fonts.googleapis.com/css?family=Arvo:400,400i,700,700i');

6. Use the Font

At this point, the font is ready for use. We could pick up from step 10 on the previous page.

To accomplish the same thing as the previous page, our final code would look like the following:

NOTE: We are using the "HTML link" method from Google fonts for embedding the font code. As such, this is placed in our HTML. It does not usally need an additional CSS "fonts" file.

I Think Arvo is a Cool Font!

This is some plain ol' text, in a paragraph.

This is a paragraph with emphasized or italic content.

This is a paragraph with some strong content.

This is a paragraph with both strong and emphasized text TOGETHER!!!!

{ TODO: }

  1. Again, try recreate the above example using embed codes and a style.css and index.html set-up. Was this easier?
  2. Explore this area on our “Go Further With Fonts” page.
Previous section:
Next section: