• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 428
  • Last Modified:

How do I use ccs to use @font-face for 200+ fonts and provide fast experience for user browsing?

Looking to add over 200+ fonts to a web page as a choice for user to choice a font on a single page.

As it takes a while to load using @font-face available in html 5, are there any ways to do quicker?
and for multiple visits by same user is it possible to save them on user machine
 or at least in session so doesn't have to load all 200 +fonts on each new page view?
  • 3
3 Solutions
Just load an initial 5 fonts or so then load the rest dynamically (ajax) as the visitor scrolls down the page.
200+ fonts?  Overkill in the first degree.

What Gary suggest is a solution for initial load but be disruptive of processing if the user scrolls down quickly.

If these are custom fonts you want to force the user to use then there is probably no perfect solution one way or another the user is going to have to pay the price for the excessive content load.

If the objective is to give the user options, then the ultimate option is to not specify any fonts, so the browser uses the users defaults which are generally the fonts they prefer.

You could also break the list down into categories and then let the user drill down to groups of fonts.

stephenwildeAuthor Commented:
Thank you for comments

200+ fonts - is  divided into categories so only allowing a category at a time to load so limited to 30 fonts.

Also will use a small image file with text created by each font when all are need on the same page.

I will also explore to see if I can find a way to do the load in the background during the session to use any idle time.
stephenwildeAuthor Commented:
please provide an "A" - I do appreciate the time and expertise of supplying answers.

The reason why a C grade was used, they were both incomplete solutions as if implemented the functionality would have changed.

Using bmp/png images of each font allows all 200+ fonts to be represented on the page.
stephenwildeAuthor Commented:
The answer is a mixture of Ajax, diving the fonts into categories (so not all required at once) and finally when all fonts are required use a bm/jpg of the image - which can be displayed if the font is not on the user machine

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now