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

Posted on 2014-08-24
Last Modified: 2014-09-14
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?
Question by:stephenwilde
    LVL 58

    Accepted Solution

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

    Assisted Solution

    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.


    Assisted Solution

    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.

    Author Comment

    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.

    Author Closing Comment

    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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
    In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now