Forums » Suggestions & Development Discussion » Suggestion: Bring back Google Font previews?

I enjoy making custom templates, both for myself and other epic users. I was ecstatic to see that we had received so many new one when the site was redone, but why was the option to preview them removed?

So, so many were added, and having to google each one individually is really time consuming. Would it be possible to get the previews for them back?
Also! Possibly upping the amount of fonts we can use in custom templates from 3 to 5? Or the ability to add as many extra as we need? I know so many CSS friends who would appreciate being able to use a wider variety in our templates.

Hey there!

So, back when we had about 60 google fonts, I accomplished the preview by having 1 giant image that contained a sample of all of the different fonts with the same written phrase. When you selected a font, I scrolled the image through a "slot" so that the font you'd selected was the only one showing through.

Now that we offer just shy of 1000 Google Fonts, this "big giant image" trick isn't viable any longer. Another common method of allowing font preview is to download all the fonts into the browser so you can "live" preview any of them. Obviously we don't want to have people download 1,000 fonts in one go in order to show the template design page; it'd be a load time disaster, ruin people's data plans for mobile users, and could cause browser crashing and freezes.

We can do on-demand downloads of fonts - that is, they begin downloading only when selected. This will allow us to do a preview, but it won't be instant, as you'll have to wait for each font to finish transmitting, and also has the potential to really mess with people's data plans if we don't do this carefully and give a lot of warnings for people that this might be a potential issue for. Still, this is probably the eventual solution I'll end up with.

Speaking of having more than three fonts per design; I know it's REALLY fun to play with fonts, but I've prevented using more than three per design for the same reason I don't allow auto-play videos or auto-play music on the site. It's fun to design, but for people actually trying to view the profile, having lots of Google Fonts can create slow loading, unnecessary overuse of data plans, and other annoyances.

In that case, is there a list anywhere of the more basic fonts that RPR itself uses? Ones that don't require to add the google fonts in order to be used? Like Arial, Georgia, Cambria, etc? I had tried searching for one but couldn't seem to find it.

Unfortunately, no such list can exist.

Font use on the web is very tricksy. The only fonts that will definitely display are those that are actually installed on the viewer's device. There is no universal list of fonts that are factory-installed on every computer. It changes even within the same brand and model of computer over time.

Then we come to mobile devices, which often only have 3 or 4 installed fonts.

In short, there's no guaranteeing any specific font will ever be available in a viewer's collection.

That's why many websites (including the RPR and all of our official character styles) employ what is known as a "font stack." A font stack is a list of different fonts, from most specific (Ex. "Trajan Pro Bold") and desirable, to least specific (for example "sans-serif", meaning any sans-serif the computer DOES happen to have on hand).

When a browser displays your page, it will try to use the first font that is specified. But if that font isn't installed on the computer, it digs down into the stack and tries the next one. And the next one. Until it finds something that is installed.

Here's the font stack we use for the body fonts in our "Arcana" character style series: Garamond, "Hoefler Text", "Times New Roman", Times, serif;

Here's the one we use for the body fonts on the main RPR site: Cambria, georgia, serif;

As you can see, we never expect any particular font to definitely be available, and instead just express our list of preferred choices until we get to the fallback of "Okay, whatever you DO have in this family."

You can use this same technique when designing custom templates. I definitely encourage all budding web designers to learn all about it and the technical realities that make it necessary

I think what you're after with that isn't an RPR list, but rather a "web-safe" list (possibly with the main RPR fonts, those used sitewide).

The reason for the heavy load with things like Google fonts is because they all have to be downloaded whenever the page is accessed, basically. More traditionally, the ability to see a typeface/font is dependant on if that typeface exists on the device being used to view the page. "Web safe" typefaces are those considered so universally common to come pre-installed on devices that there's a very, very high chance of it being installed on any given device that will be viewing the page. Fortunately, the internet has plenty of lists of what those web-safe typefaces are (even if many of them tend to include some that are less universal).

I think the only one RPR actually loads up is Redressed (for headers), and I think the rest are trying to rely on what people have installed, but I might be wrong.

This is all the google fonts available right now, but it does have extra ones that RPR does not have. However, you can search for all the fonts that rpr DOES have and see their preview in different font sizes here on the google fonts website.

This is what I use anyway. *shrug*