Week 4:

Web Fonts



Embedding Fonts

The default behavior of trying to find fonts is to declare the name of the font you would like your HTML page to display, from which the browser will read that request and check the system on which the browser runs to see if those fonts exist. If the font exist, it gets displayed on the page. If not, it uses a different font, potentially unknown to the designer. Embedding a web font allows you to uplaod a font file to your web server and refer to it to be loaded on client systems and displayed the way you designed, regardless of what fonts they may have installed.

TTF: Truetype Font
OTF: Open Type Font
WOFF: Web Open Font Format
SVG: Scalable Vector Graphics
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789!@#$%^&^*()-=[];',.
@font-face {
  font-family: "Drip";
  src: url('adrip1.ttf');
}
.graf{
  font-family:Drip;
  font-size: 5em;
}

Resources