Photoshop Question posted in
The official user guide can be found here.

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

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.

Tags:

3

Answers


  1. 0

    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='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

    then:

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

    Done. Very little resources.

    Login or Signup to reply.
  2. 0

    You can download google fonts .ttf file or whaterver format you like or supports and call that file instead of accessing from a url. Which will be much much faster. And yes images are truely bad as it makes impossible for search engine to read.

    Login or Signup to reply.
  3. 0

    Use google fonts.

    The Google Fonts CDN is built to deliver content, content loaded from it will probably load faster then it would if it was on your server.

    You don’t have to download the font, or worry about browser support, simply add the <link> tag to your HTML.

    You should NOT use images to display text, for several reasons:

    1. Screen readers can’t read text in an image
    2. Size. Depending on the size of the image and font, the image may be larger than the font file.
    3. A major pain to update
    4. UX problems. i.e. Users can’t copy text, select, etc.

    When should you use images?

    When you need a text effect that can’t be achieved with CSS, SVG, or canvas(Not that many). As noted by @Stephen P in the comments below, you should still add text, just visually hide it with CSS

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search