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?
stephenwildeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Just load an initial 5 fonts or so then load the rest dynamically (ajax) as the visitor scrolls down the page.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
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.

Cd&
0
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.
0
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.
0
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
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Fonts Typography

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.