Embed Google Web Fonts - Here's how
Google web fonts are a great way to add beautiful typography to your website. We show you how you can embed the fonts and use them on your site.
Embed Google web fonts on your own page
You can find the Google web fonts here. The fonts offered are free of charge and are also available in various styles.
- Find a font on the website and click on the middle symbol with the right arrow and the text "Quick Use".
- In the first step, you can now use the checkbox to select which styles you want to use.
- An animation on the right shows you how the number of styles influences the loading times of your page.
- In the second step you can specify which character sets you need. Here, too, you only have to click on the corresponding checkboxes.
- In the third step, your required code for integration is issued. This is available in three different versions, which you can select using the tabs above the text box.
- In order for the web fonts to be used, Google recommends that you copy the code into the first line of the element of your HTML document. You can also view an example on the page for clarification.
- Finally, you have to include the desired font in your CSS style. The Google Fonts API will calculate the browser-specific CSS data. Here, too, an example helps you with more detailed questions of understanding.
In another practical tip, we will show you three good websites where you can find and use license-free fonts.