Google Webfonts

 Hey Devious CSSkinners!

A great part of making an appealing web design, whether its a Website or a Journal article skin, is the Typography. Fonts play a big role in this. Many websites and journal skins had to resort to using common typefaces that were installed on all machines. With CSS3, several websites use the @font-face property to implement the font file in their web pages. As this feature is not available for Journal skins, there is another way to use fancy fonts that dA has allowed to integrate into Journal Skins (it's not yet available for use in Gallery CSS).

Google Fonts are open source fonts hosted on Google's services for everyone to view and use. They will work just about anywhere online: webpages, google documents and presentations. So instead of using the limited fancy fonts *cough*HelveticaNeue*cough* that may not work for everyone, why not try adding a Google webfont to make your Journal Skin or even website look appealing?

Note: Don't include too many different fonts because it'll take longer to load. For example, `Ravenswd has provided the complete list of Google Fonts right in this journal, but notice how long it takes to load.

So let's have a look at the Google Fonts page below and the important features it offers:

1. There's a total of 626 different font families in Google Fonts at the moment, but this number changes as you filter them
2. This is where you can search for a specific font family if you know what the font begins with or by the Name of the Creator of certain fonts
   
3. You can narrow down the font families with all the different filter options:
   
• Serif - Characters that have lines at the edges
  
• Sans Serif - Characters that don't have the lines at the edges
  
• Handwriting - Characters that look handwritten in print or cursive
  
• Display - Monospaced characters where I think they each have the same width
4. You can display all styles in the font family if any, for example, Normal, Italic and Bold
5. There's many options in the Preview of Fonts
• By Word, Sentence, Paragraph or Poster format. This makes it easier for you to decide if you want the font for your Headers or Paragraph text
• You can change the preview text, even add your own specific text to help you decide
• Change the size of the font
• Order the fonts by Popularity, Alphabetical order, Newest, Trending fonts and by font families with the most number of styles to least
  
6. You can then quickly Add the fonts you like to your Collection for later use
7. This is the part where the fonts are all collected for you to bookmark, download, import to your website and the code to integrate into your CSS when you click on Use
   

Here you can see a collection of my favorite fonts from each Category (Serif, Sans Serif, Display, Handwriting) with all the different Styles (Normal, Bold, Italic), if any. But to integrate the font into our skin, what we want to do is skip until number 4 to include into your Journal Skins.



As you can see in the figure above, all you have to do is copy paste the CSS under whichever selector you want to use the font for. Here's a working example:

CSS

HTML

<h1>The quick brown fox jumps over the lazy dog.</h1>

OUTPUT

Now there's a few things to keep in mind when integrating a font into your CSS.

CSS Font Properties

font-family

font-family: 'Amaranth', sans-serif;

The font-family property should have a generic family as a fallback system. If the browser does not support the first font (or takes time to load that one), it shows the next font as plan b. This font should be something that all machines have pre-installed in their systems.

CSS:
Output:

font-size

Basically you can either fix the size of your font in pixels, points, em or percentage:

• Pixels are fixed-size units used for screen media. One pixel is equal to one dot on the computer screen resolution so this allows for pixel perfect representation. The problem with the pixel unit is that it does not scale upward or downward to fit mobile devices.
• Points are traditionally used in print media, such as documents that need to be printed on paper. One point is equal to 1/72 of an inch. Points are also fixed-size units and cannot be scaled.
• The good thing about "em" is that it's a scalable unit that is popularly used in web document media due to their mobile-friendly nature. An em is calculated by the current font-size. Most browsers default font-size is 16px, so 1em is equal to 16px or 12pt, 2em would equal 24pt, .5em would equal 6pt, etc.
• The percent unit is similar to the "em" unit. The current font-size is equal to 100%, so 16px = 100%. While using the percent unit, your text remains fully scalable for mobile devices if the user increases or decreases their default font-size percentage.

font-weight

This is basically the thickness of the letters and characters. The property values start from lighter, to normal, to bold, to bolder. Or you can define their value by numbers from 100 - 900.











You have to make sure if the font family you're using even has the different weight styles. Look at the at the end to find these easily.

font-style

This specifies the font style for text such as normal or italic and inherit can be included in here so that the font uses the style from the parent element.

font-variant

This is used if you want your text to be displayed in a small-caps font or not

font-variant:normal;

font-variant:small-caps;

font

font: font-style font-variant font-weight font-size/line-height font-family;

Sets all the font properties in one declaration with that order but it may get confusing so it's probably better to declare them separately.

CSS:
OUTPUT:


Anyway, think that's about it! Here's a cool link =dhik-a showed me to help you narrow down the Google font families that have ALL styles:



So what are some of your favorite Google webfonts?

Advanced Typography

If you want even more options to customize your fonts, you're in luck! In this section, I will demonstrate some of the many properties you may use to customize your fonts:

The Basics

Let's start off by changing the text color. It's as simple as picking a color!
Code: h1 { color: red; }
Example: IMPORTANT: The contest will end tomorrow!

Next, we'll change the background with. This is great for highlighting content.
Code: h1 { background:yellow; }
Example: Limit 1 (one) entry per person.

Now, if you want to use a dark background, it is probably a good idea to have lighter color text (and vice versa.)
Code: h1 { background:black; color:white; }
Example: The skunk stole the squirrel's acorn from the den.

Text Decoration

The text-decoration property allows you to put lines above, below, and through your text.

The overline is great for people who like gravity backwards!
Code: h1 { text-decoration: overline; }
Example: I want to buy a one-way ticket and fly to Pluto in a starship.

The strikethrough effect can be achieved by using the <s> tag.
Code: h1 { text-decoration: line-through; }
Example: Commission slot 7: OPEN!

The underline effect can be achieved by using the <u> tag.
Code: h1 { text-decoration: underline; }
Example: The Hunger Games by Suzanne Collins

You can also combine multiple text decorations to form a cool handwriting-grid effect.
Code: h1 { text-decoration: overline line-through underline; }
Example: You think I'm paranoid but I'm just complicated.

(not recommended) If you're feeling nostalgic, there's also the obsolete <blink> effect that works only in older browsers!
Code: h1 { text-decoration: blink; }
Example: I am an eye blinking at you.

Text Transformation

Sometimes, you even may want to edit text capitalization in bulk or force all uppercase letters to show up for emphasis. That's where text-transform comes in.

Capitalize capitalizes the first letter in each word.
Code: h1 { text-transform: capitalize; }
Example: The quick brown fox jumped over the lazy dog.

Uppercase forces every single letter to appear in their uppercase form.
Code: h1 { text-transform: uppercase; }
Example: The quick brown fox jumped over the lazy dog.

Lowercase forces every single letter to appear in their lowercase form.
Code: h1 { text-transform: lowercase; }
Example: The quick brown fox jumped over the lazy dog.

(not recommended) Full-width forces every single letter to appear in their full width form. It is currently rolling out in  major browsers and is not yet fully available for everyone. Some Windows XP users may see boxes instead of text.
Code: h1 { text-transform: full-width; }
Example: Ｔｈｅ　ｑｕｉｃｋ　ｂｒｏｗｎ　ｆｏｘ　ｊｕｍｐｅｄ　ｏｖｅｒ　ｔｈｅ　ｌａｚｙ　ｄｏｇ．

Letter Spacing and Line Height

These two CSS properties will allow you to manipulate space between letters and space.

If you want to space out individual letters, letter-spacing will do the trick!
Code: { letter-spacing: 2px; }
Example: I live in a mansion. Lots of room to run around here!

Additionally, you may use the negative-spacing attribute to squeeze in individual letters.
Code: h1 { letter-spacing: -2px; }
Example: I am a pack rat. I like to squeeze myself inside any small box I can find!


You can use line-height to space out individual line. Refrain from using a line height smaller than your font-size. Below is an example of line-height being used to achieve double spacing.
Code: h1 { line-height: 2em; }

Example: Cotton candy caramels cupcake marzipan I love bear claw powder chupa chups tiramisu. Cheesecake brownie cupcake chocolate lemon drops I love oat cake chocolate bar donut. Chocolate candy sugar plum gummi bears. Lollipop cheesecake faworki muffin ice cream powder. Toffee halvah apple pie fruitcake caramels fruitcake I love lemon drops. Macaroon fruitcake halvah pudding. Oat cake biscuit pastry halvah. Lollipop carrot cake dragée bonbon. Wypas wafer dragée carrot cake applicake bonbon bear claw powder wafer. Gummi bears I love gummies faworki.

Documentation - if needed

Color: You can use a name, hex code, or rgb value.
h1 {color: red;} will give you red text.
h1 {color: #4da400;} will give you green text.
h1 {color: rgb(142, 68, 173);} will give you purple text.

Background: You can use a name, hex code, or rgb value. If you have a dark background, you may want to use a lighter color for text.
h1 {background: yellow;} will give you a yellow background.
h1 {background: #d8ffc4;} will give you a light green background.
h1 {background: rgb(142, 68, 173); color:white;} will give you a purple background with white text.

Text-decoration: You can use one of four effects. Combinable.
h1 {text-decoration: overline;} will give you a line above text.
h1 {text-decoration: line-through;} will give you a line through text.
h1 {text-decoration: underline;} will give you a line under text.
h1 {text-decoration: blink;} will give you blinking text. This is no longer supported!

Text-decoration: You can use one of four effects.
h1 {text-transform: capitalize;} will give you words with capital letters.
h1 {text-transform: uppercase;} will give you all uppercase letters.
h1 {text-transform: lowercase;} will give you all lowercase letters.
h1 {text-transform: full-width;} will give you ａｌｌ  ｆｕｌｌ－ｗｉｄｔｈ  ｌｅｔｔｅｒｓ． This is not yet fully supported!

Letter-spacing: You can use positive or negative values. Supports px, pt, and em.
p {letter-spacing: 2px;} will give you 2px of space between letters.
p {letter-spacing: 2pt;} will give you 2pt of space between letters.
p {letter-spacing: 1em;} will give you double spacing between letters.

Line-height: You can use positive or negative values. Supports px, pt, em, and %.
p {line-height: 40px;} will give you a line height of 40px.
p {line-height: 40pt;} will give you a line height of 40pt.
p {line-height: 2em;} will give you double spacing.
p {line-height: 200%;} will give you double spacing.

The <font> Tag

Additionally, you will be able to customize your fonts without a premium membership using the <font> tag:
Code: <font face="Times New Roman" size="5">This text is in Times New Roman! font>

Example: This text is in Times New Roman!

dA Font Formatting Guide
To READ this with a Fancy Layout WITH source code, see http://viclou.deviantart.com/journal/DeviantART-lt-font-gt-Formatting-Guide-261232088

Introduction
Did YOU Know that you can use the < font > tag in boxes, journals, descriptions, and in litterature?
Well, yes you can! No Premium Membership REQUIRED!

To prove my point, :eyes: below!

Test.Test.Test.Test.Test.LOL!

The Tag
Did you enjoy the awesome presentation of the "Test." text above? Well, here's the source code:

<font face="Droid Sans" size="9">Test.</font><font face="Arial" size="3">Test.</font><font face="Tahoma" size="1">Test.</font><font f

Notes

Here is the CSS used for this tutorial:

/* Tutorial Styles */
.css.color-red{color:red;}
.css.color-white{color:white;}
.css.bg-yellow{background:yellow;}
.css.bg-black{background: black;}
.css.deco-overline{text-decoration: overline;}
.css.deco-thru{text-decoration: line-through;}
.css.deco-underline{text-decoration: underline;}
.css.deco-blink{text-decoration: blink;}
.css.deco-all{text-decoration: overline line-through underline;}
.css.trans-capitalize{text-transform: capitalize;}
.css.trans-uppercase{text-transform: uppercase;}
.css.trans-lowercase{text-transform: lowercase;}
.css.trans-full-width{text-transform: full-width;}
.css.space-neg2{letter-spacing: -2px;}
.css.space-2{letter-spacing: -2px;}
.css.lh-double{line-height: 2em;}

/* Journal Styles */
.css.color-purple{color: rgb(142, 68, 173);}
.css.color-green{color: #4da400;}
.css.bg-purple{background: rgb(142, 68, 173);}
.css.bg-green{background: #d8ffc4;}
.css.lh-40{line-height: 40px;}