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.
2. Now, type the text you want in the required font and colour.
3. Next, hide the background layer by clicking the eye-icon next to the Background layer in the layers palette.
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.
#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.
