How to connect a font to the site, Google fonts

19.09.18 IT / CSS 3104

When the desired font is selected for the site, it remains only to connect it and set the required text sizes for various page elements. Connecting a font to the site can be mastered even by a novice developer if you follow a simple instruction.

How to set the font for the desired page element ? For this there is a special property from the family font - font-family . An example of setting a font is given below:

  .class {
font-family: verdana, arial, tahoma, 'sans-serif';
}
 

The example shows that you can list several fonts separated by commas, in this case, if the specified font is not found on the user's system, then the next font listed will be used.

It is better, of course, not to use standard fonts, as in this case the site will not look very modern. It is much better to find a beautiful font for your site in a special service, for example, in Google Fonts .

Google Fonts offers a large number of free fonts . This is a handy service that allows you to immediately see how the desired font will look, it is possible to change the size and typeface when previewing. When the desired font is selected, it is enough to get the code to integrate it into the site.

You can also customize the font in advance: select the desired font styles and languages. It is recommended that you choose only the most essential font styles so that it does not significantly affect the overall website loading speed.

You can also download the font from Google Fonts and connect it locally. To do this, hover over the download icon in the upper right corner of the window that opens. This can come in handy in some cases.