Slash Coding

  • Android Development
  • CSS
  • Subscribe
  • About Us
  • Contact Us
You are here: Home / Web Development / CSS / How to use Custom Fonts in your Web Design : 2 Ways

How to use Custom Fonts in your Web Design : 2 Ways

By Aneesh Bhatnagar

Custom Fonts for a website, or a single webpage are becoming common these days. The reason behind this is that people want to showcase the content on their website in various different fonts, and the natively supported fonts on various computers and browsers is very low. I have used a lot of different fonts for different websites that I have worked on, and they have turned out great. Now, the problem with using Custom Fonts is that you are unaware if the user would have that specific font installed or not. So, to overcome this problem, we can take any of the following measures, that I will get to in a minute.

If you are a web designer, you might want to check out these articles:

  • Difference between CSS Class and ID : I bet you did not know this!
  • Different CSS Positions explained
  • Image Slideshow Background using CSS

Without any further ado, let’s get into the tutorial.

#1 Using Images as Text

When you need to write only a small part of the webpage in a different font, it is advisable to write that text into an image using Photoshop (or any similar software). When you write this text, you must apply the font to the text that you want, and have the size of the image as wide and high as the text. Also, it is advisable to have a transparent background, and the image must be saved as a .PNG file that can be viewed over the internet easily. To write your text as an image, follow these steps:

1. Open Photoshop, and create  a new document with the required size.

New Image in Photoshop

 

2. Now, type the text you want in the required font and colour.

Type the Text

3. Next, hide the background layer by clicking the eye-icon next to the Background layer in the layers palette.

Hide Background Layer

4. Press Ctrl + Shift + S on your keyboard to save the image for web, and choose the following options for your image when you save. If PNG-8 makes you image a bit diffused, save it as PNG-24 and you would be good to go.

Save for Web Photoshop

 

#2 Importing Custom Fonts using CSS

When you need to have the entire page or a lot of content in your webpage to follow a custom font, you might consider using this option. Using this option is simple, but it requires the font files for your custom font to be downloaded on the user’s computer. This option is only recommended when the amount of text to be written in the specific font is quite large. To use custom fonts in your CSS, use the following code.


@font-face {
font-family: 'SlashCodingFont';
src: url('fonts/Font-file.eot?') format('eot'),
url('fonts/Font-file.otf') format('opentype'),
url('fonts/Font-file.woff') format('woff'),
url('fonts/Font-file.ttf') format('truetype'),
url('fonts/Font-file.svg') format('svg');
}

In this CSS code, we basically define the various formats available for our font, and we use them under a common reference name, “SlashCodingFont“. You must avoid using space in the font-name so that you are able to use it wherever you want without much trouble. Remember, that having one file format of the custom font might also work, but including all the available font-file formats are advised as they guarantee cross-operating system compatibility.

Now, when you need to specify your custom font for any element using CSS, you can use the following code for the same. In this code, I have applied the font “SlashCodingFont” to all the paragraphs and heading tags.


p, h1, h2, h3, h4, h5, h6{
font-family:'SlashCodingFont';
}

Well, that’s it for this simple tutorial. Using these techniques you are capable of using custom fonts on your website or webpage, without having to worry about the user’s end. However, there is another way around for this, and I would be posting an article on that as well in the coming days. If you face any problem, you can get in touch with me via the comments section below. Don’t forget to subscribe to Slash Coding for latest post updates via RSS Feeds, Facebook, Google+ or Twitter.

Did you enjoy this article?
Subscribe to our email alerts when we post something new so you don't miss out.

About Aneesh Bhatnagar

Aneesh Bhatnagar is a freelance web developer, who specializes in front-end website development with HTML5, CSS3 and jQuery. He believes in transforming the entire web into a Responsive Web. He also specializes in use of Bootstrap framework to get websites up and running.

Search Slash Coding

Follow Us

RSS Feeds Facebook Twitter Follow Google+

Categories

  • Android Development
  • C++
  • Developer Tips
  • Slash Coding
  • Web Development
    • CSS
    • JavaScript
    • jQuery
    • PHP

Recently Published

  • Moving Ahead from Front End and Android Development
  • How to Export a Project from Android Studio
  • What is jQuery? Let’s Answer this Common Question today!
  • Mobile App Prototyping : Pixate Studio
  • How to Create a Countdown Timer using jQuery

Subscribe to Email Alerts

Eager to learn more from Slash Coding?
Sign up for daily email updates when anything new comes up. Get it straight in your inbox.

Follow Us on Social Media

RSS Feeds Facebook Twitter Follow Google+

Copyright © 2025 · Slash Coding · Powered by the Genesis Framework
Sitemap | Privacy Policy | About | Contact

×
Get Notified of the new Tutorials when they are posted!
Never miss any article update from Slash Coding. Subscribe to email alerts today!