20 most beautiful Google fonts and how to use them
1. Why use Google Fonts ?.
2. Tips for using Google fonts.
3. How to create a pair of Google fonts.
4. How to install Google Fonts in web pages.
5. How to use Google Fonts in WordPress.
6. Collection of 20 most beautiful Google fonts.
1. Why use Google Fonts?
When it comes to web fonts, Google Fonts is a resource that designers can take advantage of, allowing you to add custom fonts to all types of web pages and applications.
With a collection of more than 900 fonts that support over 135 different languages, Google Fonts provides access to a large library of web fonts for free. In addition to regular storage and updates, Google Fonts also allows you to use free fonts for personal and commercial projects without the need to add additional properties.
2. Tips for using Google fonts
The Google Fonts library includes a lot of designs beautiful font. At first glance, you might want to use them all at once. Follow these tips to avoid making mistakes:
– Do not use more than 2 fonts: You can use one font for the title and another for text content. This is a very common rule of all web designers and graphic designers. Using more than 2 fonts can hinder user experience and even break design consistency. It will also affect web page loading time.
– Use standard font: Using bold font can affect the performance of your website or application because the site must take too many typefaces from Google servers every time it loads. Depending on the type of website or application you create, choose the right font – one for regular text, one for bold and italic text.
– Considering the point size: The point size is the font size you use in the design. For example, 16pt to 24pt is a common size used for textual content in website and blog designs. When choosing a web font, keep in mind the point size.
– Multi-language support
According to Internet World Stats, only 25% of Internet users use the English language, while billions of people use other languages.
Even if your site is written in English, Google allows users to easily translate text into different languages. However, it will only work if the font you use supports user language conversion.
3. How to create a pair of Google fonts
A font pair is two (or more) fonts you choose from Google’s font collections for use in design. To select a font pair, all you have to do is click the plus symbol (+) next to a font and it will automatically be added as a selection. You can then click the floating panel on the right to remove the font from the selection, copy the embed code to install the font on the webpage and choose the font weight.
When you choose a font, Google Fonts will suggest the appropriate font to match the font you have selected. Alternatively, you can also use tools like FontPair and Fontjoy.
4. How to install Google Fonts in the website
After you select a font and font weight on Google Fonts, you can install it on the web page using the embed code.
+ Copy the code in the section Embed Font and then paste the code into the top of your web page. Include it soon
tag.
+ Then copy the code in the section Specify in CSS and paste the code into your CSS stylesheet’s CSS document.
5. How to use Google Fonts in WordPress
While most premium WordPress themes have built-in support for Google font customization, there are still a few themes that provide limited font choices. If you want to use Google Fonts in WordPress, you can follow the method described in the website section, but the easiest way is to install a plugin.
Free plugin Easy Google Fonts will allow you to access the Google Fonts library by visiting Appearance >> Customize and then via the menu Typography.
6. Collection of 20 most beautiful Google fonts
1. Roboto
+ Font type: Sans-Serif
+ Best for: Text content
Roboto is one of the most popular web fonts in the Google Fonts library, used by more than 26 million websites. It has smooth sans-serif design, suitable for long paragraphs and other content.
– Download Roboto Font
2. Montserrat
+ Font type: Sans-Serif
+ Best for: Content & titles
Montserrat is a unique font that can be used for both title and content. It comes in a variety of styles, from casual to super bold and black. This font is suitable for Roboto.
– Download Montserrat font here.
3. Playfair Display
+ Font type: Serif
+ Best for: Headlines
Playfair Display is a modern serif font used by more than 5 million websites on the Internet. Fonts best suited for designing large headings. Download Playfair Display here.
4. Lora
+ Font type: Serif
+ Best for: Text content
Lora is one of the best serif web fonts available in Google Fonts. It is a great choice for the textual content of internal news and web sites. This font only includes 2 formats: lowercase and italic. Download Font Lora here.
5. Karla
+ Font type: Sans-Serif
+ Best for: Text content
Karla also has a smooth sans-serif design that gives a strange vibe. Its minimalist character design will help you improve your site’s editing capabilities. Download Font Karla here.
6. Merriweather
+ Font type: Serif
+ Best for: Content & titles
Merriweather is an elegant serif font commonly used in combination with the Lora font. This font is perfect for both headlines and text content, especially for professional and business websites. Download Font Merriweather here.
7. Ubuntu
+ Font type: Sans-Serif
+ Best for: Headlines
Ubuntu is the default font used in popular Linux-based operating systems of the same name. This font is a great choice for headlines, especially for blogs and magazines. Download Ubuntu font here.
8. Rubik
+ Font type: Sans-Serif
+ Best for: Headlines
Rubik sets the ideal font for headers on your website. It is available in 5 formats and 5 different styles. Download Rubik font here.
9. Source Sans Pro
+ Font type: Sans-Serif
+ Best for: Text content
Source Sans Pro is a professional font designed and released by Adobe with an open source license. Download Font Source Sans Pro here.
10. Archivo
+ Font type: Sans-Serif
+ Best for: Headlines
Archivo is a sans-serif font inspired by the 19th-century American font. It has 4 different formats. Download Font Archivo here.
11. Asap
+ Font type: Sans-Serif
+ Best for: Content & titles
Asap is a font designed by a pair of professional designers. This font has 4 styles and it is suitable for both the title as well as the content. Download Font Asap here.
12. Domine
+ Font type: Serif
+ Best for: Headlines
Domine is one of the few serif fonts available on Google Fonts. The font is only in regular and bold format so it is only used for headings. Domine can combine with Montserrat to become a beautiful font pair. Proceed to download Domine font here.
13. Space Mono
+ Font type: Serif
+ Best for: Headlines
Space Mono is the type of font you often see on tech startups and programming websites. The design was inspired by the fonts used in the 1960s. Download Font Space Mono here.
14. Poppins
+ Font type: Sans-Serif
+ Best for: Content & titles
Poppins is a geometric sans-serif font with an elegant monolinear design. Accurate geometric design of characters is suitable for both the title and text content. Download Font Poppins here.
15. Work Sans
+ Font type: Sans-Serif
+ Best for: Headlines
Work Sans is the best sans-serif font for headlines. Its bold and extremely bold format is the most beautiful typeface. The only downside of this font is that it doesn’t include italic typefaces. Download Font Work Sans here.
16. Nunito
+ Font type: Sans-Serif
+ Best for: Content & titles
Nunito is the perfect web font for creative projects because it comes with a unique circular character design. The font includes 7 different formats. Download Font Nunito here.
17. Arvo
+ Font type: Serif
+ Best for: Content & titles
Arvo is a serif font commonly used in professional website designs. The font has 2 styles and it is suitable for both the content and the title. Fonts that best integrate with Open Sans. Download Font Arvo here.
18. Oswald
+ Font type: Sans-Serif
+ Best for: Headlines
Oswald has a narrow design and has 6 different formats, suitable for modern websites. Proceed to download Oswald font here.
19. Oxygen
+ Font type: Sans-Serif
+ Best for: Headlines
Oxygen is a sans-serif font that has a unique set of characters, not including italic typefaces. You download Font Oxyen here.
20. Open Sans
+ Font type: Sans-Serif
+ Best for: Text content
https://thuthuat.taimienphi.vn/20-font-chu-google-dep-nhat-va-cach-su-dung-55305n.aspx
Open Sans is another popular font used by more than 25 million websites. The general style of characters may not help your design stand out, but it does provide a better user experience. You download Font Open Sans here.
.
