Adam Adam - 8 months ago 22
HTML Question

I have some cofusion about whether to use images for text or google font

I am want to use a font that is not popular. this font exist in google fonts and also in Photoshop. I am confused because both ways will have some loading time, I know that images are not the good way to go for texts (but at least the image will be internal), however google font will introduce some overhead as the font will be requested from an external source

which method has good performance (in terms of load speed):

1) using Photoshop to write the text and save it as an image than use the image in my webpage? or

2) using google font?

3) and if using google font. do i have to download the font file with all formats and then put it in my website folder? or I just use the html link tag to? which one is more efficient.

and thanks a lot in advance.


Google fonts are CDN, so they take up zero of your server resources (while images do). That said, Google fonts can slow down your page. But typically only when you're using a handful of fonts. I wouldn't be concerned at all with 1 or 2. Overall, either method would be little to no concern in the end.

However, using images for text is a flash back to 1998. Bad practice. More so on your end, as updating text, changing design, running A/B tests, accessibility, SEO, and maintaining the site in general will become a major pain in the a**. Simplest answer? Avoid it.

Directly from Google Fonts site:

Tip: Using many font styles can slow down your webpage, so only select the font styles that you actually need on your webpage.

Tip: If you choose only the languages that you need, you'll help prevent slowness on your webpage.

Example usage:

// include in the <head/> of your website
<link href='' rel='stylesheet' type='text/css'>


// in your css:
h1 { font-family: 'Open Sans', Arial, serif; font-weight: 400; }

Done. Very little resources.