How to use Google Fonts with CSS?

If you are starting to work with cssit sounds familiar Google Fonts (or free fonts). It is no wonder, since this tool has become a very useful element for web developers. That is why we have prepared this post so that you know how you can implement Google Fonts with css to improve your workflow.

In general, the style design and The application of fonts when creating your website is something extremely important that you should not underestimate; You can improve the user experience considerably if you pay enough attention to the layout and design of everything that will be seen on the screen once your website is published. Lettering styles and fonts from Google fonts are part of this, of course.

What is Google Fonts?

Google Fonts is basically uAn encyclopedia of free source fonts developed by Google. Of course, it is not the only one of its kind and you can find many collaborative open source projects such as Open Foundry either 36 Days of type, where designers share and create different typographic styles for public use in the community. You can also find various online pages dedicated to sharing free type fonts such as the famous ones dafont, Font Squirrel either Fontex. Of course, Google Fonts enter this group.

Remember that free fonts use open source licenses (SIL Open Font, Apache), which allows you to use them without having to buy them or attribute rights to their designers. At this point, you will already know how essential this tool is for your website.

How to use Google Fonts with CSS for your website?

At the time of implementing Google Fonts on your website, Keep in mind that you must have basic knowledge of both Html like css and that there are mainly two ways to add the font to your page. In the first case, in order to add the typography and insert Google fonts in CSS that you want, you must follow these steps:

Head to the Google Fonts site, search for the font you want, and select the style you want. With the font selected in Google fonts, click on «Quick Use». Copy the code Html standard provided by Google Fonts in the header of your web page, between the tags «header«. here .

Advantages of using Google Fonts

Use Google Fonts with css For creating your website it has the following advantages:

They are very easy to use: This implies that also They are efficient and fast. They will save you hours of work in front of the computer trying to create fonts for your website from scratch with Google fonts.
They are highly compatible: can be viewed in most formats, devices, programming languages ​​and screens when downloading fonts from Google fonts. This is a huge advantage since you will be assured that those who open your website will see exactly what you want and that formatting errors will not be generated in the view of the page. For greater efficiency in your workflow, by download fonts from Google fontsyou will have the option of add your most frequent fonts to a list of favorites in a Google fonts option. Google fonts allows you to see statistics of the impact of fonts on loading speed of your page.

Do you want to learn more about CSS?

Now that you know how to use Google Fonts with CSS to add your favorite fonts, we help you master CSS and other tools. With our Web Development Bootcamp you will be able to master this and other tools and technologies such as JavaScript, React, Microservices and even server deployment in less than 7 months. Sign up now!