Our Response to COVID-19 | We're working remotely to ensure continued digital support for our clients »
Adtrak
3 min read

Local Font Files Not Rendered Well in Chrome?

For a while now the web design industry has been tackling the issue of local fonts on the web. Times have now changed from the days of designing strictly in web-safe fonts (Arial, Tahoma, Georgia etc.) to using JavaScript (Cufon) to render more fancy fonts.

With a huge wealth of fonts (both paid and free) now readily available online to designers, rendering fonts online has become more of an issue. Sure, your website may look great in Photoshop, but how are you going to emulate that intricate font across multiple browsers such as Chrome?

There are a variety of font services out there: fonts.com and Google fonts are the big players; however we decided to go down the route of @font-face, as we have a large collection of bought fonts already that we could utilise through @font-face.

@font-face

@font-face is a CSS rule which allows you to download a particular font from your server to render on a webpage if the user hasn’t got that specific font installed on their local machine. This means that web designers no longer have to adhere to a particular set of ‘web safe’ fonts that the user has pre-installed on their computer, or rely on users having JavaScript enabled. This works by turning the font file into a @font-face kit using an online generator like Font Squirrel.

@font-face & Chrome Not Working Well

We have been using @font-face at Adtrak for a while now, and have found only a few issues with it – the main one being rendering in Chrome. The first time I used @font-face; I loaded my website in Google’s browser and was greeted by a jagged, harsh looking font render – nowhere near as nice as Firefox. After a quick search, it became apparent that I wasn’t alone in the experience. I struggled to find a decent fix for this; one method I did use for a while added a CSS text shadow to overcome the jagged edges, but this wasn’t a great, full fix.

Fixing the Rendering Issue

After experimenting myself, I stumbled across what appears to be a decent, very easy fix for this issue. It appears that Chrome utilises the .svg file in the @font-face kit, and doesn’t like being called last. Below is the standard call for @font-face using CSS:

@font-face {font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;}

As can be seen in the example, the .svg file comes last in the list of called URLs. If we amend the code to target webkit browsers, then tell them to solely utilize the .svg file.

@font-face {font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;}

@media screen and (-webkit-min-device-pixel-ratio:0) {@font-face {font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
}}

Try It Yourself

If you want to try this out on your local machine, set up two identical websites, and change the .svg to come first in one, and last in another, then flick between the two – you will be able to see the huge difference this makes to the render quality of the font. Your graphic designer will love you for it. 

Understand

Our starting point is you. We spend time getting to know your business, its challenges and your goals.

Plan

We listen, then we create. We explore different approaches, techniques and strategies based on your needs.

Deliver

Our experts work collaboratively to build a complete and effective web design and digital marketing solution.

Evaluate

We prioritise measurable results and will report, analyse, test, assess, tweak and develop continuously.

Get in touch today on 0115 959 8900 or Contact Us

Loading Images...

Looking for more leads for your business? Let's work together.Start your journey

Loading Reviews…