Importing Google Fonts

An important part of changing the aesthetic of a layout is the fonts you choose to use – there are several “web-safe” fonts that work automatically cross-platform and across multiple browsers (here is one such list of web-safe fonts), and often these fonts will work great for multiple elements! However, there are many, many more fonts that are available to use thanks to Google’s Google Fonts initiative. Follow the steps below to add the coding required to open up a whole new world of fonts.

  • There are several options to filter out certain kinds of fonts (serif, sans serif, handwriting, etc. – here is a great crash course delineating font types) – you can utilize these filters or simply browse through the entire catalog.
  • Once you find a font you like, click on it. There will be multiple “styles” or “weights” to choose from – the three styles you should typically pick (with the “+ Select this style” button to the right) are “Regular 400,” “Regular 400 Italic,” and “Bold 700” – these three form the basis of pretty much any text you’ll have on your layout. Note: some fonts will not have all of these style options – that’s ok, and your layout text will function fine 99% of the time without, especially if the font in question is only used as the header or subheader font.
  • After you have selected all of the fonts (and their corresponding font styles) you wish to use for your layout, notice the slide-out menu on the right of the screen: it will normally be on the “Review” tab and should list all of the fonts you clicked on. After verifying that they are all listed, click on the “Embed” tab. Under the “Embed” tab, click on the “@import” button. There are now two code snippet boxes available to you.
  • The first code snippet is the CSS required to import the fonts for you to use them on HP. Copy it in its entirety, and paste it as the first thing in your CSS box (it is paramount that it is the first thing).
  • The second code snippet includes all of the CSS lines for telling certain elements to look like a certain font. For example, if you selected the Roboto and Cinzel fonts, and wish to use Roboto as your body text font – copy the line that says font-family: ‘Roboto’, sans-serif; and paste it into your body { CSS element. Repeat these steps for each element with their corresponding assigned fonts.
%d bloggers like this: