Embed Fonts in CSS

9Objectives

  • Apply CSS3 standards to embed fonts to a website with the use of @font-face rule
  • Apply steps to embed a viedo

@font-face Rule

In the @font-face rule, you must first define a name for the font (e.g. myFirstFont) and then point to the font file.

Note: Use lowercase letters for the font URL.
Uppercase letters can give unexpected results in IE!

To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:

Demo – Accessed from an External URLfont-face-demo1


Demo – Accessed from the Root folder


Adding Youtube Videos to a Web Page


Placing videos on our web pages is not complicated.

  • Videos can make our pages more interesting and engaging.
  • Most video-hosting services, such as YouTube, will provide us with HTML code ready to copy and paste into our web page.

Click here for step-by-step instructions


References
Using @font-face
CSS3 @font-face Rule
Google Fonts