etsu logo

CSCI 1210

Essentials of Web Development

Essentials of Web Development

CSCI 1210


Custom Fonts

Setting Up a Domain

Fonts


Typography

Fonts

One catch to the font-family property:

The display font must be installed on the client machine to work. This is why we’ve been specifying a ‘fallback’ font when we use the font-family property - e.g.,

font-family: Arial, Helvetica, sans-serif;

If Arial and Helvetica aren’t installed on the client’s computer, the browser will pick the first sans-serif font it finds that is

Fonts

There are a couple of things we can do about this, however

HTML & CSS3 includes functionality to ‘serve’ up a custom font from the server to the client, but, being CSS3 and not fully adopted yet, we can’t count on it working for all browsers

You have to be careful to use fonts that aren't copyrighted

Additionally, you're adding a little bloat to your code base and, potentially taking a performance hit

Fonts

Another option is Google Fonts

Google has a bunch of free fonts (hundreds? thousands?) to offer

They include downloading the fonts and adding them to your site for the previous option

But another option is just to add a link (that Google provides) to your pages

Fonts

screen shot

Google Fonts

Five Steps

  1. Navigate to Google Fonts
  2. Select the font(s) you want to use
  3. Click on ‘Use’
  4. Copy the link into your HTML document’s head element
  5. Add the font name’s value to the font-family property in your CSS

Google Fonts

screen shot

Google Fonts

screen shot

Google Fonts

screen shot

Google Fonts

screen shot

Google Fonts

screen shot

Google Fonts

screen shot

A note of caution...

You should use external fonts like this sparingly as they introduce performance overhead

The browser has to pull the font information from an external source

On a high-traffic site, this could become a noticeable issue

Purchase & Configure a Domain


Your Own Website

So, you've developed a site, either for yourself, or for a client

Now it's time to get it out there...

We refer to this as deployment

First thing, you're going to need a domain

Your Own Website

As part of the development of a web site, you'll probably have a web-visible development server that isn't advertised, just to make sure that everything works properly before this step

Technically, it is still accessible to web users, but doesn't have a domain name

How can we do this? By using the server's IP address in place of a domain name

E.g., 54.45.237.155/index.html

So, while it is accessible, it's almost invisible to search engines

Your Own Website

But when it's time to roll it out, the next logical step is to provision a domain

There are many companies from whom you can purchase a domain

The Internet Corporation for Assigned Names and Numbers (ICANN) is the agency that is actually responsible for, among other things, domain registration

Other companies, such as Internet Corporation for Assigned Names and Numbers (ICANN)GoDaddy, act as middlemen between their customers and ICANN

Your Own Website

The following slides use illustrations from GoDaddy

But GoDaddy is not, by far, the only company from whom you can purchase a domain

Your Own Website

Great.

GoDaddy has completely redesigned their UI

Thus invalidating all of my screenshots

~~ Sigh ~~

GoDaddy

screen shot

GoDaddy

screen shot

GoDaddy

screen shot

GoDaddy

screen shot

GoDaddy

screen shot

GoDaddy

screen shot

GoDaddy

screen shot

GoDaddy

screen shot

GoDaddy

screen shot

GoDaddy

screen shot

GoDaddy

screen shot

If you are going to host your site on a provider other than GoDaddy, you have to point GoDaddy at your provider

GoDaddy

screen shot