Adding custom fonts to your web page.

Adding a font and some typographic treatments to your website text can have an important impact

Start with modifying the fonts you have

CSS offers a variety of ways to modify whatever font you’re using. For example, you can change the color, size, and add an underline (there’s more than one way to do this – my preferred method is illustrated below). First, identify what text will get this treatment.  Then add the style declaration.

 h2 { 
/* ^ This is an h2, but you can replace it with any element, class, id, pseudo-element, pseudo-class,      child-selector, anything you can target. */

            color: rgba(0, 128, 0, 0.88); 
            /* ^ This is using RGBA (red, green, blue, alpha (or transparency)). You can use RGBA to color any element - transparency can create some cool effects */

            font-size: 1.5rem; 
            /* ^ Here the font is styled to be 150% of the base font size. You can use rem, em, percentage, or px on anything you can target */

            border-bottom: 1px double rgb(0, 128, 0);
            /* ^ Here the RGB (no alpha) is being used, other options include HEX, keyword (e.g. green), HLS */

}

This is just scratching the surface

There is so much you can do to modify a font. For further reading on the subject, I’d recommend taking a look at the W3Schools.com page on Fonts and their page on Text

Don’t want the default browser font?

Sometimes the default browser font just won’t do. Well, you’re in luck. CSS allows you to specify the font you’d like to use. The basic method is to utilize the font-family declaration. Again, W3Schools does a great job explaining it on their font-family description.

There are three ways you can do this

Use a web safe font

What this means is that you’ll rely on a font that is known to be on most computers. See Dan’s Tools great table on os compatible fonts.

Another resource to look at on the subject includes Web Design Dev’s 16 Gorgeous Web Safe Fonts . This is first on this list because there are some distinct advantages to using a font that’s already on your visitors’ computers, namely speed.

Download a font and embed it into your web page

Services like https://www.fontsquirrel.com/, http://www.dafont.com/, and Adobe’s Typekit are great sources for fonts. Once you have the font (be sure to check the license), utilize CSS3’s @font-face to get it into your site. For more information on using @font-face check out the w3schools.com page on the subject. You can really have a unique and high impact typography utilizing fonts found on these services.

Not all font formats work with all browsers

Font Squirrel has a great tool called the generator. You can use this to reformat your fonts into formats that most browsers can read. With the generator you upload your font and Font Squirrel prepares a package with the formatted fonts and the CSS code to use in your project. It’s pretty awesome.

Google Fonts

Google has an amazing service called Google Fonts. With it you can link to Google’s servers to deliver your fonts. It’s super intuitive, just select the fonts you want to use, then follow their direction on getting it into your web page. Google give you a link to a css file and the name of the font. Simply add the font-family wherever you want to see your font.

Have fun with fonts

Your font selection has a huge impact on the design of your site. As with any media, it’s better to have just a few fonts (no more than 3 on a page), and that those font’s coordinate with the message.

Inspirational Web Typography

20 Best Web Fonts from Google Web Fonts and @font-face

Typography in Web Design

 

Enjoy the journey.

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *