Copy/Paste Elements & Content

This video will cover adding and managing your fonts in Readz.

We'll start by showing you where you can find the font management menus in Readz. Next, we'll talk about how you can add fonts whether from a file, from Adobe Typekit, or from Google Fonts. Then we'll cover how you can manage all of your fonts, and how your fonts affect your page's performance. Lastly, we'll talk about fonts for mobile. 

Let's start by pulling up our font settings menu. From the Readz editor, you can find the font menu by selecting a text box and going into our element text style menu. Here, if we click on this italic F, we open up our font settings menu.

Before I talk more about this menu in detail, I wanna show you where else you can access this menu. You can access the same settings menu from your Readz dashboard by going to the preferences tab. After clicking on the preferences tab, you go to the last option in this left hand menu, fonts. And that will bring you into the exact same font setting menu.

So now, let's talk about using this menu. Here on the left side, we can see the options for how you can add your own fonts. First, are the web fonts from Adobe Typekit and from Google Fonts. These work in slightly different ways. With Adobe Typekit, you'll be creating a kit or group of fonts and then adding them all in one go, then all of the fonts from your kit will be added to Readz.

With Google Fonts, it's a little different, whether you'll be adding fonts individually by copying the code from their website.

So let's look at exactly how to do this starting with Typekit. I'll Start by going into my own Adobe Typekit account. Here, I can see my kits in the top right hand menu. When I click view all kits, I can see a list of all the kits I've created and next to the name, I can see the kit ID is listed. All you'll need to do to get this kit or fonts into Readz is to copy that ID and then paste it into the box in the Readz fonts settings menu and click update ID. Now, that group of fonts from Adobe Typekit will be uploaded into Readz. 

So next, we'll take a look at how you can add Google fonts to your Readz page. We'll take them right from the Google fonts' website. So here,on Google fonts, we'll choose a font and then we'll add it to our Readz page. So let's take Roboto Condensed for example. So next to Roboto Condensed, I'll click on this little plus sign, add to family, then the pop up that's going to appear saying one family selected. When we click on it, we can see the option to embed the font. We'll leave everything as is and just copy this text right here. Then we'll go back to Readz and we'll paste that into the box under Google Fonts. Then we'll click add fonts and then we'll be able to see Roboto Condensed listed over here on the right hand side in our list of fonts. 

The third way that you can add fonts is by uploading the actual file of the font. This is fairly straightforward. You click on upload fonts from the font file menu, then you select the folder containing the font family from your computer and upload it to Readz. Great.

Now, that we've covered how to add fonts to Readz, let's cover how to manage all of our fonts. So we can manage our fonts in the right hand side of the font settings menu. Here, we can see a list of all the fonts. Let's just take a moment to see what all of the symbols here mean.

The icons on the left are showing the source of the font, so a G is letting us know that it's a Google font, and an R is letting us know that it's a system font from Readz and so on. These Readz fonts will always be there as system fonts and as fallback fonts.

Then to the right, we have several actions you can take. First of all, if the font is able to be removed, you'll see a little X. If I remove a font, it will be removed from the options here as well as the options in the Readz design studio. I can choose to add it back in the same process that we just went through.

Then we see these little eye icons. These are the difference between showing a font in the design studio or hiding a font. By making this icon a closed eye, I can choose to have a font be hidden in the font selection in the Readz design studio without completely deleting it.

Lastly, we have these check marks which show whether or not a font is currently being used on any of our pages. This is useful because maybe I want to check this list every now and then and do a little clean up by deleting some fonts that aren't really being used. Every font on here is going to be loaded with your page so it's good to only have what you need. This makes a good segway into our next section on how fonts are going to affect your pages performance.

As a little reminder, web fonts are optimized, so compared to other means using web fonts will increase the performance of your page. That being said, each web font still takes some bandwidth to load, so if you have hundreds of web fonts on your page that is going to affect the speed at which your page loads and your search engine results. So always be careful. One or two extra fonts is okay, but having lots of unnecessary web fonts on your page could affect the loading time by a few seconds. All right.

That brings us to the last topic of today, mobile fonts. As you might already know, Google has a mobile first policy which means they look at performance and quality of your page in mobile form to determine how high they're gonna rank your page. Secondly, we've learned that Google is much more strict on performance standards of your page on mobile than on desktop. We've seen that you're gonna get penalties for using non-system fonts on your mobile version of the page even if these fonts are web fonts, and even if they are from Google itself, Google fonts. You will still get a penalty.

So if you're very interested in optimizing your page especially for mobile so that you'll be ranked hire by Google, you should try to stick to the system fonts or the default fonts that come with Readz on your mobile forms.But because you might still want your fonts on desktop, we've given you the option to set fallback fonts for mobile while keeping your more personalized ones on desktop and tablet.

I'll show you, now how you can set those fallback fonts. So we're back in the font settings menu. This time, we're going to click on the second tab, fallback fonts. We can see now that there is a mobile SEO optimization. If we wanna set these fallback fonts, we'll turn this on. Now, you can see that for every font used on our pages, we can select a system font that will be used on mobile. While there aren't as many system fonts to choose from, all browsers are going to load these fonts faster and doing this will help with SEO and your page ranking from Google. 

So in conclusion, we've covered where to find our font menus, how to add and manage our fonts, how fonts are going to affect our pages performance, and lastly, how we can optimize our mobile phones to have a better ranking from Google. That's all on this topic for now. Thanks for listening.
In this video we show you how to copy & paste content in the Readz platform, and we also give you a couple of power-tips.
Managing Fonts
Thank you & welcome!
Thank you & welcome!