Tamil Web Fonts: Beginner's Guide to CSS Font Family Declarations in Tamil
Learn how to include Tamil fonts to your website in the correct way. Find out about the font-face property, link the font from Google Fonts and see how to optimize it for performance also.
Karthik Kamalakannan
Founder and CEO
Try doing this, create an HTML file index.html
file and add the following line,
Open the file in your browser and see. This is what I got,
what the hell
Depending on your system and OS you might see the actual Tamil font. If you’re not able to see it, then it can be fixed by adding theUTF-8
charset.
Worked 🎉
What happens is once the browser knows that this is a UTF-8 Unicode Type character, it finds the font that matches the content and displays it.
In my case, it is Times
font that came with Mac OS that gets selected as the default font to show, if I’m on Windows it would probably be Latha
or Nirmala UI
as the font family that the browser selects.
The problem with browser selecting fonts
It’s not standard across devices, one OS will show the font as one type and other will do it differently making your styles unreliable.
And some systems will not have Tamil fonts installed in them, Android didn’t ship with Tamil fonts until the release of Android 4 and many other devices like the Kindle still doesn’t have Tamil fonts in their system.
The Fallback method
The obvious solution for using Tamil fonts on all systems is using the fallback method. So what is the fallback method? Well consider the following style,
In this style, if you didn’t import any fonts on your webpage, your browser will look for the font Roboto first in your system.
If it finds Roboto
installed on your system it will display your page in that font otherwise it will move on to searching for Arial
and if it can’t find that as well, then it will move on to the default sans-serif
font in your system. This is the fallback method. If one font isn’t available then it immediately moves to the next font in the list.
Remember that this method heavily depends on the fonts being installed on the user’s device (unless you import the font), for example, all Android devices over version 4 will always have Roboto
font inbuilt so it will be displayed but iOS doesn’t have Roboto
so it will move on to Arial
.
By using this method, let’s set a font family for Tamil,
Let’s see what happens here,
These fonts provide fallback depending on the user’s device in question which works for most of the devices that everyone uses.
But using all these fonts will make your text on your webpage look different on different devices and operating systems and could make your brand inconsistent. And what if you don’t like any of the Tamil fonts listed above? What if you like a specific Tamil font which you want to use?
The Font-Face property
font-face
is a CSS property that allows you to load a custom font on a webpage. For example, let’s say there is a font called Shruthi Hassan
for which you have the woff
and woff2
files.
You can include those fonts in your webpage by using,
The above CSS loads the font file in the URL given and you can use to style elements by using,
There are lots of file types for fonts such as, .eot, .woff2, .woff, .ttf, .svg
. Most modern browsers recognises .woff2
but you can support all old browsers by using,
From CSS Tricks
From Google Fonts
Google fonts also provides some Tamil fonts which you can use for free in your project, for this example let’s see a font called Hind Madurai
You can use this font by adding a link tag to your webpage,
and use it to style the text by,
That’s all.
Well, that’s all if you want to use Hind Madurai
as the font for the English version of your font too, but if you want to use Hind Madurai
only for Tamil text then move on to the next section.
Unicode-range in Font-Face
The unicode-range
is a property where you can specify the specific unicode that you want to load from the font file.
A font may have hundreds of unicode characters, a font might even include emoji characters but we don’t need all those, so we can specify the font that we are most interested in to the browser by doing something like this,
The unicode range given above is specific for Tamil characters, by doing this the browser only uses the font for Tamil text and uses a different font for English text.
The font-display property
And finally for some performance, we can add the font-display
property to make sure that there is no empty white space when the font is loading. More details here.
The font-display: swap;
will make sure that the fallback font is used until the Shruthi Hassan
is loaded so that the user can start reading the content rather than waiting for the font to download in an empty page.
Wrapping up
This is how the final font-face
property looks like,
Of course, there are even more optimizations that could be done like Subsetting in font files, font face observer, and using service workers to cache the font files but those are fairly advanced concepts, let us know if you are interested in those.
Recommended Reading