This tutorial will show you how to change a Google web font in the Multipurpose Website Templates.
Sometimes, the font used in an original template does not correspond with your logo design or has no special symbols for your language, so you need to change it on the website. Let us show you how to do it in a few simple steps.
- First, open the Google Fonts page at https://fonts.google.com/ and choose the font you like the most. It might be the same font as the one you’re currently using (in case you need its extended version).
- Click on the + (select font) icon to the right of the font’s name, e.g., Montserrat.
- Below you will see the ‘1 Family Selected’ message. Click on it to expand the pop-up window and go to the Customize tab. You may select here the font parameters, such as font-weight and the character set.
- Next, see the Embed tab, it allows implementing the font to your website.
- There are two ways to embed the font to the site (see the ‘Embed Font’ section):
- Use the content of a Standard tab and paste it into the
<head>of your HTML file for an appropriate page. This way is suitable if you need the font to be used on certain pages only. Example:
https://gist.github.com/ilko725/74652983d80d524d6c743f1a6ff8724d - Switch to the @import tab and copy the line that starts with
@import, e.g.Paste it to the top of the style.css file, located in the css folder of your website.
This will activate the font all over the website and save you lots of time and efforts.
- Use the content of a Standard tab and paste it into the
- Finally, open the style.css file if you haven’t done that yet and specify a new font-family for your site items. You can copy the appropriate line from the Google Fonts Specify in CSS section, e.g.
font-family: 'Montserrat', sans-serif;
That’s all, after completing these steps your new font will appear on the website and make it look spectacular for your site visitors. Wish you good luck!
