So, you’re making a website, and you want to dress it up by changing the font (style of print). How would you go about it? Let’s add Google Fonts!

First, go to the Google Fonts website: https://fonts.google.com/ (screenshot below).

Look through the available fonts to find one that you like. You can scroll through the different options, use the Search box, or try the dropdown menus to narrow down your selections.

If you hover your mouse cursor over one of the fonts you’ll notice additional options.

The leftmost Red menu is a dropdown that lets you see a paragraph, a sentence, the alphabet, and numerals in that font. The dropdown’s 5th option: Custom will let you test out the font using your own text; like your name, for instance.

The centermost Red menu is also a dropdown. This one lets you adjust the font-weight; also called the boldness of the font. The level of boldness ranges from 100 (thin) to 700 (bold); with 400 (regular) being the default.

The rightmost Red menu is a Slider Bar. It lets you change the size of the font in pixels (px – a common web measurement). The font-size ranges between the tiny 8px to the enormous 300px; with 40px being the default.

When you find the font(s) that you want, click the Red circle to the right of the font’s name to select it.

After selecting a font you’ll notice a Black bar in the lower right hand corner of the screen (see screenshot below). The bar will tell you how many font-families you’ve selected. In the example below 1 font has been selected.

Next, click the Black bar to expand the selection menu.

Below you’ll see the expanded selection menu, and that I’ve selected 2 fonts: Josefin Sans & Libre Franklin.

Now, to add the fonts to our website

If you’ll notice, the selection menu is made up of 3 sections: Your Selection, Embed Font, and Specify in CSS.

Personally, I always use the STANDARD option instead of @IMPORT. I’m not sure exactly why, but somewhere I heard that it’s the better way to go. 🤷

Embed font

Next, you’ll want to copy and paste the link code into the <head> section of your HTML code. For an example, see the HTML section of my CodePen below.

Specify in CSS

Then, copy and paste, the font-family styles into your CSS rules. For an example, see the CSS section of my CodePen below.

Then, stand back and admire the pretty font. 😀

TIP💡: Keep your font choices to no more than 2 fonts. Using more than 2 may cause a slowdown in the loading time of your page. Do your users a favor, and keep it simple.

Check out my CodePen below to see what a difference changing font can make. I suggest viewing it at the 0.5x setting.

In the CodePen’s CSS section under #improvedTitle & #improvedFont, you’ll see where the code for the two fonts has been specified. Also notice, that a fallback font has been specified for each selected font. The fallback font for both selected fonts is sans-serif.

Question: Why use a fallback font?

Answer: Because not all web browsers display all types of fonts.

TIP💡: If you want to use multiple fallback fonts, be sure to separate each font name by using a comma; in order of: your chosen font, second choice, third choice, etc… The browser will see if it can display your first choice, if not it will check the next and so forth; until it finds a font that it can use. That’s why a standard web font like sans-serif is the fallback for our example above. Sans-serif is in the same font-family as the 2 fonts that were selected.

Just be sure to test what your site looks like using your fallback fonts. That way you’ll avoid unpleasant surprises.

According to the Google Fonts website:
The Google Fonts API is compatible with the following browsers:
Google Chrome: version 4.249.4+
Mozilla Firefox: version: 3.5+
Apple Safari: version 3.1+
Opera: version 10.5+
Microsoft Internet Explorer: version 6+

This means that older browsers, won’t be able to handle all the prettiness you just added. 😡

That’s all for now. Thanks for reading! 😉

Part 1 of 2 – What is HTML? Why use it?

In the previous post, I mentioned that HTML is the first of the 3 foundations of creating websites. It’s like the skeleton that supports your body, or the frame (chassis) that supports your car. But what exactly can you do with HTML?

HTML stands for Hypertext Markup Language. Hypertext refers to the text and links used to navigate to other web pages, and to the different parts of the same web page. For example, when you get to the bottom of a page, and want to return to the top; you might click a button or an icon that takes (or links) you back to the start of the page.

HTML is not a programming language, it is a markup language. Programming languages are computer languages written in terms that computers understand; they handle math and logic (decision-making). JavaScript is the programming language that forms the third foundation of Web Development. For right now, though, let’s just consider HTML.

Markup language is a used to give your browser and computer directions on how to display and structure the elements that make up a document; which in our case is a web page.

As a markup language, HTML is written in symbols, words, and abbreviations (human language) that can easily be read and understood by humans. So even a beginner can read and understand an HTML document. Let’s give it a try!

A Simple Reading Exercise

The image below is a simple HTML document. We’ll break it down piece by piece.

An HTML document (or file) is made up of elements which are marked by the use of tags. Each tag includes (is surrounded by) the symbols < > .

— Note: HTML files end in either .htm or .html

The first HTML tag is <!DOCTYPE html> it tells the browser that your web page document is written in HTML 5; the most up-to-date version of HTML.

Next we see the <html> opening tag. Notice that at the bottom of the document, there’s a similar </html> tag. This one is the html closing tag. These tags surround all of the web page’s HTML code indicating where the HTML code starts and ends.

The <head> and </head> tags surround the section of code that forms the head of the page. The head contains elements of the page that are not visible to the user, such as: the web page’s settings and keywords that are used by search engines. The head is also is where you connect your web page to a style sheet (styling directions), other tools, and resources. If you choose to add a specific font (lettering), or libraries to access icons (for Facebook and Twitter), you would do so in the <head> of the page.

The <title> tags contain the wording to used on the tab at the top of the web page. Usually the title is something short and simple, like: the subject of the page, or a company name.

The <body> and </body> tags surround the visible parts of the web page, such as: headings and subheadings, images, paragraphs, controls, audio and video clips, icons, animations, and other content.

Next, notice the <link> tag. It’s used to connect our HTML document to a resource that is not located on the page (an external resource). In this case, the link tag is linking or “pulling” styling directions (a style sheet) onto the web page.

Link is a self-closing tag, meaning that it is made up of a single tag. It doesn’t require opening and closing tags. The type attribute of this tag shows that the style sheet is a text file written in CSS (Cascading Style Sheets). CSS is one of the 3 foundations of website development; the language used to decorate and position the elements of the HTML document. The href attribute describes where the style sheet is located / where it’s stored so that it can be connected to the web page.

— Note: CSS files end in .css

The <div> tags are used to mark divisions (or different sections) of the page. Another option for indicating sections of the page, is to use the <section> tags. A web page often has many sections or divs. This allows you to apply specific styling and features (fonts, images, backgrounds) to many different sections of the page. This allows you more control over the website’s design; than you would be possible if the entire page had to utilize just one style.

About Headings…

There are six default sizes of HTML headings: ranging from h1 to h6.

The way to write a heading is: <h2>The Next Heading</h2>

The paragraph (<p> & </p>) tags indicate a paragraph, and automatically include spacing and margins (which can be adjusted using CSS). The <p> tags can be used with a paragraph, multiple paragraphs, a few words, one word, or even just one letter; depending on your design.

Like the link tag, the image (<img>) tag is a self-closing tag. <img> is used to link or connect an image to the web page. The attributes of the image in the example are: id, alt, & src.

The id is an identifier for just one HTML element on the page, in the same way that a photo ID is to identify just one person.

The alt attribute is used to provide alternate text (a description) for an image. All images require an alt description. The alt is will be visible on the web page, in the event that your image doesn’t load. Also for any users utilizing a screen reader, such as the visually impaired; their device will read your alt description of the image aloud to them.

The src, or source attribute, is the address for (or location of) the image; telling the browser where to load an image from.

The <script> tags are used to connect a JavaScript file to your web page. JavaScript is the programming language that adds all of the cool, interactive features to the page. The <script> tags in the example above, have two attributes: type & src (source). The type indicates that the file being called onto the web page is a JavaScript text file. The src for this file is cutePuppies.js.

— Note: JavaScript files end in .js

Last but not least, we have the comment tags. Comments are useful for making notes about what you’re working on; which is especially useful for when you have to step away from your projects. Well written comments help you and others to read and understand your work; they are vital when working on a team project. The example above contains two separate comments.

HTML comments open with <!– and close with –> , and can span one or more lines. If you happen to forget the comment-closing tag, all of your code following the comment-opening tag would become part of one long comment. So remember to close your comments. The browser ignores the comments, so they are invisible to users; but developers can see them by viewing the HTML code.

Phew, what a long post! But you’ve made it through, and you’ve read your first HTML file! In the next post we’ll consider where and how to write an HTML file.

Thanks for reading!

Asha : )

Websites at their most basic, are made up of 3 building blocks: HTML, CSS, and JavaScript.

HTML or Hyper Text Markup Language, is the base that a website is built upon. Think of HTML as: your skeleton, the bones of your body; the chassis of your car; the floor, walls, and ceiling of your room. HTML is what you use to lay out the structure of your web site. HTML isn’t flashy, but nothing works without it.

Nothing to see here. Move along. . . Move along. . .

CSS stands for Cascading Style Sheets. CSS is the set of directions that you use to decorate your web page; to indicate how content and the elements of a website should be displayed. Think of CSS as your car’s paint job, the tinted windows, those sleek leather seats, and chrome finishes. In your home, CSS would be like the paint on the walls, the artwork, rugs, curtains, fabrics, finishes, and flooring; all of the decor. But more than that, CSS can also handle positioning items on the web page, animations, the timing of those animations, and some of the effects that you see when you hover over the elements of the web page.

Using CSS you get to be very specific about how your website’s appearance takes shape. Suppose that, you hire a house painter to paint your kitchen Blue. If you’re not specific as to what you want (or have a misunderstanding with the painter), you could end up with every kitchen surface (ceiling, counter tops, appliances, cabinets, lighting, even the flooring) being painted blue. As opposed to having that one accent wall painted Blue . . . which was what you actually wanted. Oh, well. . . So again, CSS allows you to be very specific about the appearance of your website. Specificity is king!

The name is JavaScript, but you can call him JS for short.

JavaScript is where the interactivity that we all know and love comes in. Thus far, the car may look nice; but it’s got HAND CRANK WINDOWS and no air conditioning. The house has all of the beautiful finishes; but it has no electricity, no water; and, oh goodness no! No Wi-Fi. Yipes!! JavaScript is a programming language; meaning that it can handle logic, math, and decision-making; something that HTML and CSS just can’t do. JS runs the parts of the web page that we can see; as well as, the parts that are behind the scenes. JavaScript makes all of the fun, cool, flashy stuff possible. So now, not only does the car look sleek; it’s also totally deluxe: power windows, power sunroof, power seats, Bluetooth connectivity, high-end sound system, remote starter, touchscreen console, seat warmers.

In Summary:

HTML is what you use to design the structure of your web page.

CSS specifies the appearance and positioning of the web page’s elements.

JavaScript is the life of the party! JS handles the fun, interactive stuff.