Tag Archives: css

The post How to Add Google Fonts to Your WordPress Website appeared first on HostGator Blog . Is Your Site Using the Right Font? Thanks to the growing number of mobile internet users, finding the right font has become a big project for site designers, publishers, and retailers. The BBC and the Guardian have recently debuted new bespoke fonts designed to be easier to read on phones—and save the companies money on licenses for commercial fonts. Even if you don’t have a flagship-media budget, there are ways you can update your site fonts for better readability, a more consistent appearance across browsers and devices, and faster page-load times to help your SEO. What Fonts Are Best for Your Site? Whether you’re a design fan or someone who likes to consider all the options, it’s really easy to fall down a rabbit hole of fonts. There are thousands of open-source fonts that anyone can download and use, and thousands more available for purchase. Because you want fonts that make your website easier to use and faster, it’s probably best to limit yourself to Google Fonts , a repository of open-source fonts that are easy to read on small screens and which cache quickly to speed up page load times. At this writing, Google Fonts offers a mere 848 font families, 823 of which work for English-language copy. To narrow down your 800-plus choices, you’ll need to apply some basic font choice principles , like those described by Janie Kliever at Canva. Two to three fonts is the ideal number for most sites. If you stick with only one, your site may look sterile and visitors may have a hard time figuring out which text is a headline and which is your main copy. More than two or three fonts can make the site look chaotic and amateurish. Choose fonts that have some contrast so that they create a visual hierarchy. For example, you could use a bold or serif font for your headlines so they stand out and a simple sans serif font for body copy so it’s easy to scan, even on a smartphone. Google Design gives a broader overview of typography, fonts, and how to find the best fonts for your site in their Choosing Web Fonts: A Beginner’s Guide . Among the things the authors say you should consider are: Are you designing your site for the long-term or short-term? Long-term projects often need font families with many style options. How long will your text blocks be? Even on-screen, serif fonts are a good idea if you’ll feature five or more paragraphs at a time. What size will your type be? Simpler fonts are easier to read at small sizes, but they may not stand out enough in headlines. Will your visitors translate your site into other languages? If so, you’ll need to choose a font family that supports multiscript characters so those translations display properly. The guide recommends a few fonts for specific situations to help you get started. You can also browse the entire Google Fonts library here .   Finding Google Fonts for Your Site When you’re ready to explore Google Fonts, it can be a bit of a challenge to navigate the somewhat clunky directory to find the right typefaces. As an example, let’s walk through looking for a serif font to use for headlines on a site for a petsitting business—something bold and businesslike but a bit playful. In the Google Fonts search filter sidebar, you can select the serif category and decide how you want the results presented—by age, popularity, or alphabetized by name. Under languages, you can narrow your results to typefaces that support English by selecting ‘Latin’ (confusing, but we do use the Latin alphabet). Next, you can check the boxes to open slider menus and fine-tune your options for number of styles (variations on the font, like lighter, bolder, or italic), thickness, slant, and width. By choosing ‘serif’ and ‘Latin,’ you get 174 options for your petsitting website headline font. Bree Serif looks like it could work. To see how your copy will look, you can replace the dummy copy with your text by inserting the cursor, clearing out the dummy text, and entering ‘Our Petsitting Service Menu.’ (You can also click ‘apply to all fonts’ so we don’t have to retype it.) You can use the slider menu to resize the text anywhere from 8 to 112 points. You can also use the dropdown menu on the left to see how your copy looks in a sentence or paragraph or the alphabet and numerals in that font. Clicking the + button adds Bree Serif to a tray at the bottom, where you can collect all the fonts you want to use. When you’re ready to install them, click the black tray bar and you’ll see HTML and CSS code to embed the font in your site. (More on this below.) You can download as many fonts as you like, but Google recommends that you don’t download everything “just in case,” because of the time and space it would take. How Can You Use Google Fonts On Your Site? If you’re comfortable adding code to your site, you can use the Get Started with Google Fonts API guide to using stylesheets to specify the font families and styles you want on your site. You’ll also find out how to drastically reduce the font file size for headings and logos by optimizing font requests. For anyone who’s not comfortable editing their own site code, there are several plugins for WordPress that can install and manage Google Fonts for you. One of the most popular options, with more than 300,000 installations, is Easy Google Fonts . With this plugin, you can avoid editing the code for your site’s theme and you get a menu of all Google Fonts without having to manually select and download any of them. The plugin adds a typography menu in the WordPress Customize section of the dashboard, where you can select font families, styles, color, and other text elements for each type of header and text in your site theme. You can see a realtime preview of what each change you make will look like; visitors to your site will only see your changes if you save and publish them. To change text elements that aren’t part of your theme’s default controls, Easy Google Fonts allows you to create your own font controls that will show up in the Typography menu. After you choose the Google Fonts you want to use and make sure they look right in the preview, you’re ready to save and publish to update your site.   Update Your Fonts, Upgrade Your Site By updating your site’s fonts, you’re not only giving it an updated look, you’re also building a better user experience. Faster-loading fonts that are designed for on-screen readability are the key to keeping visitors coming back, especially as more people do their browsing on their phones. Find the post on the HostGator Blog Continue reading →