Typography is a very important aspect to any piece of design work. It’s always important to make sure that your type is legible, readable, and aesthetically appealing when displayed.
However, with web design, getting your words and sentences to appear exactly the same as your original mockups and designs can often prove tricky, especially when you want to use the latest trendy and fancy fonts.
Web Safe Fonts
Every time a browser loads a webpage, it is told by your website’s stylesheets to display text onscreen in a specific font. Historically, in order for everything to be displayed correctly, you must have had that specific font stored locally on your computer, otherwise the font would not be displayed. What would be displayed instead, is a substitute font chosen by your browser, ruining the look and feel of your lovingly designed website.
Because of this issue, it was recommended that when building a website, you chose from a list of “web-safe” fonts that would have a high chance of being displayed correctly across a number of different browsers and operating systems.
A selection of some of the standard web-safe fonts include:
Georgia
Courier New
Times New Roman
Arial
Comic Sans
But this is 2018. Today’s websites are full of custom fonts that display perfectly across all of our devices. So how are these fonts displayed accurately when we don’t have the fonts installed locally?
Let’s look at a few of the popular ways of using custom fonts on websites:
@FontFace
This is probably the simplest method of displaying custom fonts on your website. All it requires is for you to have the font files sitting on your server or your web hosting. It lets you load the font files from your CSS and then apply that font to the styling of your HTML text. No other type of web technologies are used. Due to its open nature however, your are only allowed to use open source (non commercial fonts), this limits you in which fonts you able to display.
In order to use custom fonts, you first set up the location of your fonts in your stylesheet:
@font-face {
font-family: 'Droid Serif';
src: url('my-fonts/droid-serif.ttf');
}
Then put them to use:
h1, h2, h3 { font-family: 'Droid Serif', serif; }
Pros:
- Powered by CSS, no Javacript needed
- Completely accessible
- Easy to implement without external plugins
- Font styling (CSS) support
Cons:
- Limited to open source fonts
- Some fonts can be too large to download
- No common font-file format on all browsers
- Distribution is not allowed
Google Fonts
Google Web Fonts service hosts a huge collection of typefaces in their servers. Like @FontFace, Google Fonts is completely free to use.
In order to use Google Fonts, you just have to link to the particular font you wish to use from the HTML and CSS. Similarly to @FontFace, you are limited to Google’s list of fonts that you can use (albeit quite large!).
Here is an example of how to set up the Open Sans font from Google in your webpage, by using HTML in the <head> section:
<head><link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></head>
And the CSS needed to apply it to your text:
body {
font-family: 'Open Sans', serif;
}
Popular web applications, such as WordPress, widely support the use of Google Fonts. Most of time using a Google Font is as simple as selecting it from a dropdown menu!
Pros:
- Powered by CSS, no JavaScript
- Completely accessible and easy to use
- Fast load times
- Widely supported by web applications such as WordPress
Cons:
- Choice is limited to a range of free fonts
- As fonts are widely used, designs may not look as unique
Adobe Typekit (now called Adobe Fonts)
If free fonts aren’t your thing and you would prefer access to a large number of commercial fonts, the Adobe Typekit might be the solution for you. This will be especially useful if you need professional or classic fonts for corporate branding. Being a premium service there is an annual fee, however as you own the license, distribution is not a problem.
Using the Adobe TypeKit website you can search for, and add fonts to, what are called “Kits”. Once you have created a Kit, you get given an embed code, which you insert into the <head> section of your website.
The embed code looks something like this:
<link rel="stylesheet" href="https://use.typekit.net/fnW3sdq.css">
Once set up, you apply the fonts using your website’s stylesheets:
h1 {
font-family: "proxima-nova", sans-serif;
}
Pros:
- Large library of fonts, including classic typefaces
- Easy to implement through Typekit’s website
Cons:
- Premium service with a yearly fee
No Limits
Gone are the days when you need to limit your web designs to a handful of web-safe fonts. With just a bit of CSS and a good web font service, like the ones mentioned above, you can use a number of unique, great looking custom fonts that meet all of your design needs, with the confidence that they will be rendered perfectly on your websites.
Our Design Services
At SwarmOnline, typography plays a major role in the design of all of our applications. Are you looking to have an app designed? Do you want to check your future app’s look-and-feel before writing a single line of code? Our team can help you create a slick application prototype to help you better assess your project idea feasibility and your software development budget.
