Font Google
CSS Google Fonts
You can use Google Fonts if you’d rather not utilize any of the HTML standard fonts.
With over a thousand font options, Google Fonts can be used for free.
How To Use Google Fonts
Simply provide a unique style sheet link in the <head> section and use the font reference in the CSS.
Example
Here, we want to use a font named “Sofia” from Google Fonts:
<head>
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
Result:
FONT MUKAVA
Example
Here, we want to use a font named “Trirong” from Google Fonts:
<head>
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
Result:
FONT MUKAVA
Example
Here, we want to use a font named “Audiowide” from Google Fonts:
<head>
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
Result:
FONT MUKAVA
Note: Always list at least one fallback font when providing a font in CSS (to avoid unexpected behaviors). Thus, at the conclusion of the list, you should additionally include a generic font family (such as serif or sans-serif).
Use Multiple Google Fonts
Simply use the pipe symbol (|) to divide the font names if you want to use more than one Google font, like shown here:
Example
Request multiple fonts:
<head>
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
Result:
FONT MUKAVA
Styling Google Fonts
Naturally, you can use CSS to design Google Fonts whatever you’d like!
Example
Style the “Sofia” font:
<head>
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
Result:
FONT MUKAVA
Enabling Font Effects
Additionally, Google has made a variety of font effects available for use.
Add a special class name to the element that will employ the special effect after adding effect=effectname to the Google API. Font-effect- always comes first in the class name and concludes with effectname.
Example
Add the fire effect to the “Sofia” font:
<head>
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on Fire</h1>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
Result:
FONT MUKAVA
Simply use the pipe symbol (|) to divide the effect names if you want to request more than one font effect, like in this example:
Example
Add multiple effects to the “Sofia” font:
<head>
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>
</body>
Result:
