I am sending mail using PHPMailer and Gmail doesn't seem to recognize the font "Kaushan Script" in heading while it successfully recognizes "Roboto Condensed" in rest of the body. Both are Google Fonts. Still, gmail is able to recognize one and ignores the other and places it's own random font. Inspecting element in gmail still shows the font name I used. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<style>
.mail-head, .mail-foot {
background: linear-gradient(315deg, #ee9617 0%, #fe5858 74%);
padding: 10px;
width: 100%;
box-sizing: border-box;
color: #fff;
font-size: 2rem;
font-family: "Kaushan Script", cursive;
}
.mail-foot {
font-size: 14px;
text-align: center;
font-family: "Roboto Condensed", sans-serif;
}
.mail-body {
font-size: 1rem;
font-family: "Roboto Condensed", sans-serif;
padding: 20px;
line-height: 1.5;
border-right: 1px solid #ee9617;
border-left: 1px solid #fe5858;
}
.logo {
width: auto;
height: 2.5rem;
}
.logo-title {
position: absolute;
top: 1rem;
left: 4.5rem;
}
.otp {
color: #f69;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="mail-head">
<span class="logo-title">Site Name</span>
</div>
CONTEXT
As far as I know Gmail doesn't support all Google Fonts or webfonts. In April 2018, Gmail released an updated interface for their webmail client. This new interface uses a limited list of popular webfonts including Google Sans and Roboto. (This explains why Roboto works is your case).
PROBLEM
I haven't found official documentation on this nor a list of the Google fonts or webfonts supported Gmail's interface.
ALTERNATIVE
These are the fonts supported by Gmail. Try to change "Kaushan Script" for any of them to confirm "Kaushan Script" is not supported by Gmail. Check if you can use any of these fonts to replace "Kaushan Script". Otherwise I suggest to use an image instead.
Good luck!