Image Slider

free design templates free graphics and images free design software free fonts free 3d models

Visual Tab Menu

Coding Custom Fonts

coding custom web fonts
Learn how to easily put custom fonts on your website

The Issue...

Different computers with different operating systems means different pre-installed fonts. Obvious enough I suppose, but what web designers can often overlook is how this will effect their designs. There is amazingly no single font that is guaranteed to be available on every computer. Yes, really, not one.

So already you can see how problems with incorrect font display can arise. When creating a website you must strongly consider which font you will use as it has a huge impact on the overall style of the website. What I mean is that when someone accesses your website, they are not guaranteed to see the fonts on it as you intended, unless of course you use one of the methods outlined below. As always these methods won't cost you a thing - we are called Free Design Stuff after all.

Basic and Limited Solution...

The simplest, but most limited solution, is to use these very common fonts followed by serif, sans-serif or monospace so that the most similar available font on the user's device is selected. As in the example below.

p {font-family: Arial, Helvetica, sans-serif;}

These font pairings are the most safe to use :
  • Arial / Helvetica 
  • Times New Roman / Times
  • Courier New / Courier

Some other options that usually work cross-platform are:
  • Palatino
  • Garamond
  • Bookman
  • Avant Garde

Some other fonts that work on Windows and MacOS but not Unix+X are:
  • Verdana
  • Georgia
  • Comic Sans MS
  • Trebuchet MS
  • Arial Black
  • Impact


Better Solutions...

Embed a font. By embedding fonts in your website you can be certain that the website will display as intended regardless of whether the user has the font installed on their computer or not. There are two main methods or embedding fonts, one is where you store the font in the website hosting space and link to it via the @font-face method and the other is to use an online type service such as Google Fonts or Adobe Edge Web Fonts where the font is stored on their servers and connected to via a script in your website header.


@font-face:

This method allows you to specify a font by name eg. "myFirstFont", and specify the URL where it can be found as in the example below.

@font-face { font-family: myFirstFont; src: url(sansation_light.woff);}

You can then use the font for an HTML element by referring to the name of the font (myFirstFont) through the font-family property as in the example below.

div {font-family: myFirstFont;}


Adobe Edge Web Fonts:

Edge Web Fonts gives you access to a vast web font library made possible by contributions from Adobe, Google, and designers around the world.

Just choose the fonts you want to use on your website, copy a line of JavaScript into your site's <head> section. The example below is for a font called "sans-pro".

<script src="http://use.edgefonts.net/source-sans-pro.js"></script>

You're ready to start using the specified fonts in your site's CSS. That's all there is to it. No sign up, no subscription, no cost.

.css-selector { font-family: 'sans-pro', sans-serif; }

Google Fonts:

Google fonts works in a very similar way to Adobe Edge Web Fonts in that you can select from an online library of fonts, link to a font or fonts via a script and then call on that font in your CSS. So a script like the one below into the <head> section.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">

Then in your CSS call on the font as you normally would.

.css-selector { font-family: 'Font Name', serif; } 

No comments:

Post a Comment