HTML Holiday Greeting Card Part 2

This is a continuation of our previous tutorial which showed you how to create your own Holiday Greeting Card with HTML on Codepen. You will learn to:

  1. Use Google Fonts to include a custom font.
  2. Add your own images to your page, hosted on Postimage.org

Use Google Fonts

  1. Go to Google.com/fonts
  2. Scroll or keword-search to find a desired font.
  3. In the box containing that font sample, select the quick-use arrow.
  4. Copy and paste the standard link code between the opening and closing head tags on your page.
  5. Copy and paste the font-family property into your site's css. See Example

Add images with PostImg.org

  1. Go to Postimg.org.
  2. Use the 'browse' button to find and select the image on your computer you want to upload.
  3. Click the 'Upload it' button.
  4. Click the 'copy to clipboard' button, which is to the left of 'Direct Link'.
  5. Paste the image's url into a image tag in the body of your webpage. Codepen shortcut: type img, hit TAB, then paste. See Example