Login
  • CSS
  • Font Google

Font Google

CSS Google Fonts

 

Google Fonts

If you do not want to use any of the standard fonts in HTML, you can use Google Fonts.

Google Fonts are free to use, and have more than 1000 fonts to choose from.

How To Use Google Fonts

Just add a special style sheet link in the section and then refer to the font in the CSS.

Example

Here, we want to use a font named "Sofia" from Google Fonts:

Result:

Sofia Font

Lorem ipsum dolor sit amet.

123456790

Example

Here, we want to use a font named "Trirong" from Google Fonts:

Result:

Trirong Font

Lorem ipsum dolor sit amet.

123456790

Example

Here, we want to use a font named "Audiowide" from Google Fonts:

Result:

Audiowide Font

Lorem ipsum dolor sit amet.

123456790

Note: When specifying a font in CSS, always list at minimum one fallback font (to avoid unexpected behaviors). So, also here you should add a generic font family (like serif or sans-serif) to the end of the list.

For a list of all available Google Fonts, visit our .

Use Multiple Google Fonts

To use multiple Google fonts, just separate the font names with a pipe character (|), like this:

Example

Request multiple fonts:

Result:

Audiowide Font

Sofia Font

Trirong Font

Note: Requesting multiple fonts may slow down your web pages! So be careful about that.

Styling Google Fonts

Of course you can style Google Fonts as you like, with CSS!

Example

Style the "Sofia" font:


Result:
Sofia Font

Lorem ipsum dolor sit amet.

123456790

Enabling Font Effects

Google has also enabled different font effects that you can use.

First add effect=effectname to the Google API, then add a special class name to the element that is going to use the special effect. The class name always starts with font-effect- and ends with the effectname.

Example

Add the fire effect to the "Sofia" font:


Sofia on Fire
Result:

Sofia on Fire

To request multiple font effects, just separate the effect names with a pipe character (|), like this:

Example

Add multiple effects to the "Sofia" font:



Neon Effect


Outline Effect


Emboss Effect


Multiple Shadow Effect

Result:

Neon Effect

Outline Effect

Emboss Effect

Multiple Shadow Effect

 
Font Google
Login
ADS CODE