HTML4 Line Spacing - html

I am having trouble trying to decrease the line spacing here. Changing the line-height doesn't do anything.
<p><span style="color: rgb(137, 137, 137); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; line-height: 18px;"> ★</span> iPhone Investor</p>
<p><span style="color: rgb(137, 137, 137); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; line-height: 18px;"> ★</span> iPad Investor</p>
<p><span style="color: rgb(137, 137, 137); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; line-height: 18px;"> ★</span> Brokers' client</p></div>
Thanks for any help


You can decrease the line spacing by applying the line-height style to the p element, rather than the span element.
Here's a full working example:
.spacing {
line-height: 18px;
}
.star {
color: rgb(137, 137, 137);
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif;
}
<p class="spacing">
<span class="star"> ★</span> iPhone Investor
</p>
<p class="spacing">
<span class="star"> ★</span> iPad Investor
</p>
<p class="spacing">
<span class="star"> ★</span> Brokers' client
</p>


I am not positive, but I think you referring to the margin that is added to 'p' tags by default.
All p tags have a margin on the bottom, something like 15px; You can override that with the following...
CSS in a file...
p { margin-bottom: 5px; }
or Inline
<p style="margin-bottom: 5px"></p>

Related

Having some trouble with adding more components in my existing flexbox

This is what I have:
This is what I want:
In the descriptions of the two smaller images, I'm having difficulty implementing the city name and description in my current flexbox.
.bottomcontainer {
display: flex;
justify-content: space-evenly;
padding-left: 3vw;
padding-right: 35vw;
align-items: baseline;
}
.bottomcontainerdescriptions {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.bottomcontent {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-left: 30px;
}
.people {
width: 23vw;
border: 5px solid #ffffff;
/* picture in the About Us of 3 people */
}
.bottomimages {
width: 9vw;
border: 5px solid #ffffff;
}
<body style="background-color: #e3e3e3;">
<div class="bottomcontainer">
<div class="bottomcontent">
<h2 style="font-size: 26px;font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;">
About Us
</h2>
<img src="images/people.webp" class="people">
<h2 style="font-size: 16px; color: black; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; padding-top: 10px;">
We Make Real Estate Easy
</h2>
<h2 style="font-size: 12px;font-weight: initial;font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; max-width: 30vw;">
We're here to make to make everything about Real Estate easy. Whether you are an Owner, Investor, Property Manager or Tenant ManifestMy.Space is your one stop shop to manage your space.
</h2>
</div>
<div class="bottomcontent">
<h2 style="font-size: 26px;font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;">
Investors
</h2>
<img src="images/tucson.webp" class="bottomimages">
<br>
<img src="images/austin.webp" class="bottomimages">
</div>
</div>
</body>
If I add another column in my current flexbox, my other components get squished together as my alignment is space-evenly. If I could get some assistance on this, it would be much appreciated!

mpdf generating blank page without showing error

I have created Html content using an editor and wanted to download that content in pdf format using mpdf library, but mpdf generated a blank page and it doesn't show any error, I have checked the tag of HTML is closed properly.here the $value['templateContaint']'s data coming from the editor .
foreach ($templateData as $key => $value) {
ob_start();
$mpdf = new Mpdf(['mode' => '0','format' => 'A4','margin_left' => 15,'margin_right' => 15,'margin_top' => 10,'margin_bottom' => 10,'margin_header' => 10,'margin_footer' => 10]);
$mpdf->debug = true;
ob_clean();
$mpdf->SetDisplayMode('fullpage');
$mpdf->WriteHTML($value['templateContaint']);
$content = ob_get_clean();
$mpdf->Output('./public/media/letter_management/ '.$templateTypeData[0]['templateName'].'_'.$value['empId'].'_'.date('Ymd').'.pdf', 'F');
}
<div><span id="docs-internal-guid-9c95ba87-7fff-7e55-0d79-fbaf3d96753d"><p dir="ltr" style="line-height: 1.2; margin-left: -90pt; text-indent: -90pt; margin-top: 0pt; margin-bottom: 0pt; padding: 0pt 0pt 0pt 90pt; text-align: right;"><span style="font-size: 12pt; font-family: "Times New Roman"; color: rgb(0, 0, 0); background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="border:none;display:inline-block;overflow:hidden;width:263px;height:66px;"><img src="https://lh3.googleusercontent.com/9PONnqNL7puPuIJUhPrFTueBGtzZyin2DmLoEeAICZJo_pp-lH-orBpopKHk6OHEzzYQbccrAbS6NR_SBnIcde7MUcVQLQh9hVzD8Mmurlez0BFVUPTT4FPHKMgIytIFQi5kLpRyQtGAyUIj9Q" width="263" height="66" style="margin-left:0px;margin-top:0px;"></span></span>
</p>
</span>
</div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><b>{Reference_No}</b><br></span></div><span style="font-family: Calibri, sans-serif; font-size: medium;"><b>{current_date}</b></span>
<div>
<div><span style="font-family: Calibri, sans-serif; font-size: medium;"><br></span></div>
<div><span style="font-family: Calibri, sans-serif; font-size: medium;">To,</span></div>
<div><b style="font-family: Calibri, sans-serif; font-size: medium;">{candidate_name}</b></div>
<div><span style="font-weight: bold;"><font face="Calibri, sans-serif" size="3">{Address_1}</font><br><font face="Calibri, sans-serif" size="3">{Address_2}</font><br></span></div>
<div><span style="font-family: Calibri, sans-serif; font-size: medium; font-weight: bold;">{Address_3}</span><span style="font-weight: 700; font-family: Calibri, sans-serif; font-size: medium;"><br></span></div>
<div><span style="font-family: Calibri, sans-serif; text-decoration-line: underline; font-size: medium; font-weight: bold;"><center style="text-align: center;">Subject: Offer Letter</center></span></div>
<div><br></div>
<div><span style="font-family: Calibri, sans-serif; font-size: medium;"><b>Dear</b> <b> </b><font style="font-weight: bold;">{candidate_name},</font></span></div>
<div><span style="font-family: Calibri, sans-serif; font-size: medium;">This has reference to your application and subsequent discussion you had with us. We are pleased to offer you the agreed position of <b>{Designation}</b>,<span style="font-weight: 700;"> </span>
<span
style="font-weight: bold;">{Department}</span><span style="font-weight: 700;"> </span>in our organization on the terms and conditions mutually discussed and agreed upon.</span>
</div>
<div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><br></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;">You are requested to bring with you the following documents (original together with one photocopy each) at the time of joining your duties:</span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><style="margin-left:100px;">1. Proof of age- either Birth Certificate, SSC Certificate, or any other acceptable document</style="margin-left:100px;"></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><style="margin-left:100px;">2. Relieving Certificate & Service Certificate from your present employer </style="margin-left:100px;"></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><style="margin-left:100px;">3. Educational Certificates including mark sheets</style="margin-left:100px;"></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><style="margin-left:100px;">4. Four copies of your recent photograph in passport size </style="margin-left:100px;"></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><style="margin-left:100px;">5. Residence proof and Identity Proof (Copy of PAN card / Passport / Driving License / Election photo identity / Aadhar Card or any other proof issued by State / Central Government)</style="margin-left:100px;"></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><style="margin-left:100px;">6. Copy of current salary slip and Appointment Letter / latest Increment Letter</style="margin-left:100px;"></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><br></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;">As discussed, you shall join us before <span style="font-weight: bold;">{date_of_joining}</span>. A detailed Appointment Letter shall be issued to you after your joining. In case
you fail to join within the stipulated period, the offer will stand withdrawn automatically.</span>
</div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;">Please acknowledge receipt of this offer letter by sending back a duly signed copy as a token of your acceptance.</span><br></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><br></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;">You are also requested to provide us a copy of your resignation letter within 3 days of receipt of this offer letter</span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><br></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;">We are happy to welcome you to be a member of the <span style="font-weight: bold;">Loxim</span> family and look forward to a long and mutually beneficial association. </span>
</div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><br></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;">With best wishes, </span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><br></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><b>For, Loxim Industries Ltd.</b></span></div>
</div>
<div><span id="docs-internal-guid-a140a951-7fff-7fb4-3410-22ad15bba414"><span style="font-size: 12pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); background-color: transparent; font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="border:none;display:inline-block;overflow:hidden;width:64px;height:43px;"><img src="https://lh5.googleusercontent.com/kMWrDhpPS-YcE1ySwJP47SUoyla0Jhs6wfVeyqBeCHaz8_F-huYboALaeYiKH692E3ZQ-OUPBBFng1R9-IvXWtAye4JEeFTtoU7SK3ApnyP3jYnKRnSQtSJe0OdGsvtZ1hsZ0V0hGySezwGZVQ" width="64" height="43" style="margin-left:0px;margin-top:0px;"></span></span>
</span><span style="font-weight: bold; font-size: small;"><br></span></div>
</div>
<div><span id="docs-internal-guid-0a660945-7fff-5859-f82d-f7dd68374856"><p dir="ltr" style="line-height:1.2;text-align: justify;margin-top:0pt;margin-bottom:0pt;"><span style="font-size: 12pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); background-color: transparent; font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Treesa Antony</span></p>
<p
dir="ltr" style="line-height:1.2;text-align: justify;margin-top:0pt;margin-bottom:0pt;"><span style="text-align: left; font-size: 16px; white-space: pre-wrap;"><font face="Calibri, sans-serif"><span style="font-weight: 700;"><font color="#000000">{hrvp_Designation}</font></span></font>
</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal; font-size: 12pt; font-family: Calibri, sans-serif; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;"><span style="color: rgb(0, 0, 0);">,</span></span>
<span
style="text-align: left; font-size: 16px; white-space: pre-wrap;">
<font color="#000000" face="Calibri, sans-serif"><span style="font-weight: 700;"> {hrvp_Department}</span></font>
</span><br></p>
<div><br></div>
<div><span style="font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="" id="docs-internal-guid-576e2aa4-7fff-169c-6e37-d45d8cba5932"><p dir="ltr" style="color: rgb(0, 0, 0); font-family: Calibri, sans-serif; font-weight: normal; white-space: pre-wrap; line-height: 1.2; text-align: right; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 8pt; font-family: Arial; color: rgb(236, 105, 48); font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; background-color: rgb(255, 255, 255);"> </span>
<span
style="font-size: medium;"><span style="font-family: Arial; color: rgb(236, 105, 48); font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; background-color: rgb(255, 255, 255);"> </span><span style="font-family: Arial; color: rgb(236, 105, 48); font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; background-color: rgb(255, 255, 255);">LOXIM INDUSTRIES LIMITED</span></span>
<span
style="font-size: 8pt; font-family: Arial; color: rgb(236, 105, 48); font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; background-color: rgb(255, 255, 255);"> </span>
</p>
<p dir="ltr" style="color: rgb(0, 0, 0); font-family: Calibri, sans-serif; font-size: 12pt; font-weight: normal; white-space: pre-wrap; line-height: 1.2; text-align: right; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: rgb(255, 255, 255);"><span style="font-size: 8pt; font-family: Arial; color: rgb(91, 91, 91); font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;">Registered Office:</span>
<span
style="font-size: 8pt; font-family: Arial; color: rgb(91, 91, 91); font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"> ONE42, South Tower 9</span><span style="font-size: 8pt; font-family: Arial; color: rgb(91, 91, 91); font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="font-size:0.6em;vertical-align:super;">th</span></span>
<span
style="font-size: 8pt; font-family: Arial; color: rgb(91, 91, 91); font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"> Floor, Ambli Bopal Road, Bodakdev Ahmedabad 380 054, Gujarat, India.</span>
</span>
</p><span style="color: rgb(91, 91, 91); font-family: Arial; font-size: 8pt; font-weight: normal; white-space: pre-wrap; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><div style="text-align: right;"><span style="background-color: transparent; font-size: 8pt;">+91 79 6155 0000 . info#loxim.com . www.loxim.com</span></div>
</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><div style="background-color: transparent; color: rgb(91, 91, 91); font-family: Arial; font-size: 8pt; font-weight: normal; white-space: pre-wrap; text-align: right;"><span style="background-color: transparent; font-size: 8pt;">CIN : U24114GJ2003PLC042820</span></div>
</span>
</span>
</span>
</div>
<div style="background-color: transparent; text-align: right; white-space: pre-wrap; font-weight: normal; font-size: 8pt; font-family: Arial; color: rgb(91, 91, 91);"><span id="docs-internal-guid-775e482b-7fff-f527-a446-1b5df7ee01f3"><span style="font-size: 12pt; font-family: "Times New Roman"; color: rgb(0, 0, 0); background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="border:none;display:inline-block;overflow:hidden;width:263px;height:66px;"><img src="https://lh4.googleusercontent.com/sEu20rfa1gU6YuIPVUjfOGdjh6bFIUfFNATo3BoHZzwYeNgElh90HRMlZZimR6qpRbt8BqR3bOdsayYqt2O7wA9BUdGnAaxpcih48bQhvTykKZ-xwwg94AfMDs5iCVqVd77RkAbWfOXJSwd-mg" width="263" height="66" style="margin-left:0px;margin-top:0px;"></span></span>
</span>
</div>
<div style="text-align: left; background-color: transparent;">
<div><span style="font-family: Calibri, sans-serif; font-size: medium; font-weight: bold;">{Reference_No}</span></div>
<div><span style="font-family: Calibri, sans-serif; font-size: medium; font-weight: bold;">{current_date}</span></div>
<div><span style="font-family: Calibri, sans-serif; font-size: medium; font-weight: bold;">{current_date}</span></div>
</div>
</span>
</div>

Why does the border not line up with content?

I'm new to CSS/HTML, and I can't figure out why the border does not line up with the content/image. The bottom border is offset by a few pixels, leaving a gap between the edge of the picture and the actual border. Does anyone know how to fix this?
/* Body */
body {
background-image: url("https://i.pinimg.com/originals/a4/bf/58/a4bf58276d674626f52092e2194f79d8.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: black;
}
/* Title */
h1 {
background-color: rgba(255, 255, 255, 0.5);
height: auto;
margin: 0% 1% 2% 1%;
padding: 0% 10% 0% 10%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 225%;
color: white;
text-align: center;
line-height: 150%;
text-shadow: 2px 2px rgb(253, 0, 232);
}
/* Left Body Items */
#left {
float: left;
width: 67%;
margin-right: 2%;
margin-left: 1%;
}
/* Presentation Text */
#intro_text {
background-color: rgba(255, 255, 255, 0.80);
padding: 2%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: black;
text-align: justify;
line-height: 130%;
}
/* Skyline Photo */
#photo {
border-width: 3%;
border-style: solid;
border-color: rgb(253, 0, 232);
}
/* Bar Menu */
/* Right Body Items */
#right {
float: right;
width: 30%;
}
/* Booking Button */
#button {
/* Booking Button */
background-color: black;
margin-bottom: 2%;
border-style: solid;
border-width: 2%;
border-color: white rgb(253, 0, 232) rgb(253, 0, 232) white;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: white;
text-align: center;
text-decoration: underline;
font-weight: bold;
font-style: italic;
text-shadow: 1px 1px rgb(253, 0, 232);
}
/* Informations */
#infos {
/* General Information */
background-color: rgba(253, 0, 232, 0.6);
padding: 1% 3% 3% 3%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: white;
}
.bold_underlined {
/* Information Headings */
font-weight: bold;
text-decoration: underline;
}
#metro {
/* Metro Information */
color: gold
}
<h1>Rooftop Bar, in the center of NYC</h1>
<!--Title-->
<div id="blocks">
<!--Body-->
<div id="left">
<!--Left Body Items-->
<div id="intro_text">
<!--Presentation Text-->
The 23rd Street Rooftop Bar welcomes you every day for a unique New York experience. In the iconic neighborhood of Chelsea, the bar presents a magnificent view on the New York skyline at night. With DJs from all around the world, the Rooftop Bar offers
a vast assortment of music to suit all tastes: from Disco to Hip-Hop, passing by Pop and Electro. The perfect party for you!
</div>
<br>
<div id="photo">
<!--Skyline Photo-->
<img src="https://www.thepresslounge.com/wp-content/uploads/2014/06/Press_Lounge_0028-HDR-2-Edit-1600x900.jpg" alt="View from the rooftop." width="100%">
</div>
<br><br>
<div id="menu">
<!--Bar Menu-->
Menu
</div>
</div>
<div id="right">
<!--Right Body Items-->
<div id="button">
<!--Booking Button-->
<p>
Book now!
</p>
</div>
<div id="infos">
<!--Informations-->
<p>
<!--Age & ID-->
<em>All guests must be aged 21 or older.<br>
A valid ID is required.<br></em>
<br>
<!--Opening Hours-->
<span class="bold_underlined">Opening Hours:</span><br> Mon: 5pm-1am<br> Tue: 5pm-1am<br> Wed: 5pm-1am<br> Thu: 5pm-1am<br> Fri: 5pm-2am<br> Sat: 2pm-3am <br> Sun: 2pm-8pm<br>
<br>
<!--Contact Info-->
<span class="bold_underlined">Contact Info:</span><br>
<em>📞 +1 917-722-2439</em><br> 📧
<em>&nbsp info#rtnyc.com </em><br>
<br>
<!--Location-->
<span class="bold_underlined">Access:</span><br>
<span id="metro"><strong>Ⓜ</strong> 23rd Street</span><br>
<em>119 W 23rd St, New York, NY 10011, USA</em>
</p>
<!--Embeded Map-->
<iframe src="https://snazzymaps.com/embed/187161" width="100%" height="250px" style="border:none;" title="Google Map of Rooftop Party location"></iframe>
</div>
</div>
</div>
https://jsfiddle.net/wp9cn3kt/1/

Just give display: block; property to your image and that's it.
/* Body */
body {
background-image: url("https://i.pinimg.com/originals/a4/bf/58/a4bf58276d674626f52092e2194f79d8.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: black;
}
/* Title */
h1 {
background-color: rgba(255, 255, 255, 0.5);
height: auto;
margin: 0% 1% 2% 1%;
padding: 0% 10% 0% 10%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 225%;
color: white;
text-align: center;
line-height: 150%;
text-shadow: 2px 2px rgb(253, 0, 232);
}
/* Left Body Items */
#left {
float: left;
width: 67%;
margin-right: 2%;
margin-left: 1%;
}
/* Presentation Text */
#intro_text {
background-color: rgba(255, 255, 255, 0.80);
padding: 2%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: black;
text-align: justify;
line-height: 130%;
}
/* Skyline Photo */
#photo {
border-width: 3%;
border-style: solid;
border-color: rgb(253, 0, 232);
}
/* Bar Menu */
/* Right Body Items */
#right {
float: right;
width: 30%;
}
/* Booking Button */
#button {
/* Booking Button */
background-color: black;
margin-bottom: 2%;
border-style: solid;
border-width: 2%;
border-color: white rgb(253, 0, 232) rgb(253, 0, 232) white;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: white;
text-align: center;
text-decoration: underline;
font-weight: bold;
font-style: italic;
text-shadow: 1px 1px rgb(253, 0, 232);
}
/* Informations */
#infos {
/* General Information */
background-color: rgba(253, 0, 232, 0.6);
padding: 1% 3% 3% 3%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: white;
}
.bold_underlined {
/* Information Headings */
font-weight: bold;
text-decoration: underline;
}
#metro {
/* Metro Information */
color: gold
}
<h1>Rooftop Bar, in the center of NYC</h1>
<!--Title-->
<div id="blocks">
<!--Body-->
<div id="left">
<!--Left Body Items-->
<div id="intro_text">
<!--Presentation Text-->
The 23rd Street Rooftop Bar welcomes you every day for a unique New York experience. In the iconic neighborhood of Chelsea, the bar presents a magnificent view on the New York skyline at night. With DJs from all around the world, the Rooftop Bar offers
a vast assortment of music to suit all tastes: from Disco to Hip-Hop, passing by Pop and Electro. The perfect party for you!
</div>
<br>
<div id="photo">
<!--Skyline Photo-->
<img src="https://www.thepresslounge.com/wp-content/uploads/2014/06/Press_Lounge_0028-HDR-2-Edit-1600x900.jpg" style="display: block;" alt="View from the rooftop." width="100%">
</div>
<br><br>
<div id="menu">
<!--Bar Menu-->
Menu
</div>
</div>
<div id="right">
<!--Right Body Items-->
<div id="button">
<!--Booking Button-->
<p>
Book now!
</p>
</div>
<div id="infos">
<!--Informations-->
<p>
<!--Age & ID-->
<em>All guests must be aged 21 or older.<br>
A valid ID is required.<br></em>
<br>
<!--Opening Hours-->
<span class="bold_underlined">Opening Hours:</span><br> Mon: 5pm-1am<br> Tue: 5pm-1am<br> Wed: 5pm-1am<br> Thu: 5pm-1am<br> Fri: 5pm-2am<br> Sat: 2pm-3am <br> Sun: 2pm-8pm<br>
<br>
<!--Contact Info-->
<span class="bold_underlined">Contact Info:</span><br>
<em>📞 +1 917-722-2439</em><br> 📧
<em>&nbsp info#rtnyc.com </em><br>
<br>
<!--Location-->
<span class="bold_underlined">Access:</span><br>
<span id="metro"><strong>Ⓜ</strong> 23rd Street</span><br>
<em>119 W 23rd St, New York, NY 10011, USA</em>
</p>
<!--Embeded Map-->
<iframe src="https://snazzymaps.com/embed/187161" width="100%" height="250px" style="border:none;" title="Google Map of Rooftop Party location"></iframe>
</div>
</div>
</div>

If you want a simple fix, you can try put the id="photo" in the img element instead of the container (if no need to have a container).
<div> <!--Skyline Photo-->
<img id="photo" src="https://www.thepresslounge.com/wp-content/uploads/2014/06/Press_Lounge_0028-HDR-2-Edit-1600x900.jpg" alt="View from the rooftop." width="100%">
</div>
Styling in original code:
#photo {
border-width: 3%;
border-style: solid;
border-color: rgb(253, 0, 232);
}

How can i import all google font at once?

I want help on importing all of Google web font at once ,
I tested the normal 'link rel' in my head tag to import The Family Tangerine for my post and it worked perfectly.
Although i want a way in which i can import all the fonts available, so i can use them whenever i want , do i have to write them one by one or is there any full embedded link rel for all of them .
Pease help me out.

Hmm, it will result in an extremely large file being imported, and Google may even disallow it, but I guess you could select every font from the list. I've selected 101 of the fonts and it seems to work ok.
Go to https://fonts.google.com/ and start clicking every, single, font, and every, single, font weight (better get some food and drink ready, it might take a day or two) Google will provide a <link href="https://fonts.googleapis.com/css?family= with all the fonts appended. Add this to your page, then you can define the font-family for an element using any of the font names.
/*
font-family: 'Roboto', sans-serif;
font-family: 'Zilla Slab Highlight', cursive;
font-family: 'Open Sans', sans-serif;
font-family: 'Spectral', serif;
font-family: 'Slabo 27px', serif;
font-family: 'Lato', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Source Sans Pro', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'Zilla Slab', serif;
font-family: 'Montserrat', sans-serif;
font-family: 'PT Sans', sans-serif;
font-family: 'Roboto Slab', serif;
font-family: 'Merriweather', serif;
font-family: 'Saira Condensed', sans-serif;
font-family: 'Saira', sans-serif;
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Saira Semi Condensed', sans-serif;
font-family: 'Saira Extra Condensed', sans-serif;
font-family: 'Julee', cursive;
font-family: 'Archivo', sans-serif;
font-family: 'Ubuntu', sans-serif;
font-family: 'Lora', serif;
font-family: 'Manuale', serif;
font-family: 'Asap Condensed', sans-serif;
font-family: 'Faustina', serif;
font-family: 'Cairo', sans-serif;
font-family: 'Playfair Display', serif;
font-family: 'Droid Serif', serif;
font-family: 'Noto Sans', sans-serif;
font-family: 'PT Serif', serif;
font-family: 'Droid Sans', sans-serif;
font-family: 'Arimo', sans-serif;
font-family: 'Poppins', sans-serif;
font-family: 'Sedgwick Ave Display', cursive;
font-family: 'Titillium Web', sans-serif;
font-family: 'Muli', sans-serif;
font-family: 'Sedgwick Ave', cursive;
font-family: 'Indie Flower', cursive;
font-family: 'Mada', sans-serif;
font-family: 'PT Sans Narrow', sans-serif;
font-family: 'Noto Serif', serif;
font-family: 'Bitter', serif;
font-family: 'Dosis', sans-serif;
font-family: 'Josefin Sans', sans-serif;
font-family: 'Inconsolata', monospace;
font-family: 'Bowlby One SC', cursive;
font-family: 'Oxygen', sans-serif;
font-family: 'Arvo', serif;
font-family: 'Hind', sans-serif;
font-family: 'Cabin', sans-serif;
font-family: 'Fjalla One', sans-serif;
font-family: 'Anton', sans-serif;
font-family: 'Cairo', sans-serif;
font-family: 'Playfair Display', serif;
font-family: 'Droid Serif', serif;
font-family: 'Noto Sans', sans-serif;
font-family: 'PT Serif', serif;
font-family: 'Droid Sans', sans-serif;
font-family: 'Arimo', sans-serif;
font-family: 'Poppins', sans-serif;
font-family: 'Sedgwick Ave Display', cursive;
font-family: 'Titillium Web', sans-serif;
font-family: 'Muli', sans-serif;
font-family: 'Sedgwick Ave', cursive;
font-family: 'Indie Flower', cursive;
font-family: 'Mada', sans-serif;
font-family: 'PT Sans Narrow', sans-serif;
font-family: 'Noto Serif', serif;
font-family: 'Bitter', serif;
font-family: 'Dosis', sans-serif;
font-family: 'Josefin Sans', sans-serif;
font-family: 'Inconsolata', monospace;
font-family: 'Bowlby One SC', cursive;
font-family: 'Oxygen', sans-serif;
font-family: 'Arvo', serif;
font-family: 'Hind', sans-serif;
font-family: 'Cabin', sans-serif;
font-family: 'Fjalla One', sans-serif;
font-family: 'Anton', sans-serif;
font-family: 'Acme', sans-serif;
font-family: 'Archivo Narrow', sans-serif;
font-family: 'Mukta Vaani', sans-serif;
font-family: 'Play', sans-serif;
font-family: 'Cuprum', sans-serif;
font-family: 'Maven Pro', sans-serif;
font-family: 'EB Garamond', serif;
font-family: 'Passion One', cursive;
font-family: 'Ropa Sans', sans-serif;
font-family: 'Francois One', sans-serif;
font-family: 'Archivo Black', sans-serif;
font-family: 'Pathway Gothic One', sans-serif;
font-family: 'Exo', sans-serif;
font-family: 'Vollkorn', serif;
font-family: 'Libre Franklin', sans-serif;
font-family: 'Crete Round', serif;
font-family: 'Alegreya', serif;
font-family: 'PT Sans Caption', sans-serif;
font-family: 'Alegreya Sans', sans-serif;
font-family: 'Source Code Pro', monospace;
*/
<link href="https://fonts.googleapis.com/css?family=Abel|Abril+Fatface|Acme|Alegreya|Alegreya+Sans|Anton|Archivo|Archivo+Black|Archivo+Narrow|Arimo|Arvo|Asap|Asap+Condensed|Bitter|Bowlby+One+SC|Bree+Serif|Cabin|Cairo|Catamaran|Crete+Round|Crimson+Text|Cuprum|Dancing+Script|Dosis|Droid+Sans|Droid+Serif|EB+Garamond|Exo|Exo+2|Faustina|Fira+Sans|Fjalla+One|Francois+One|Gloria+Hallelujah|Hind|Inconsolata|Indie+Flower|Josefin+Sans|Julee|Karla|Lato|Libre+Baskerville|Libre+Franklin|Lobster|Lora|Mada|Manuale|Maven+Pro|Merriweather|Merriweather+Sans|Montserrat|Montserrat+Subrayada|Mukta+Vaani|Muli|Noto+Sans|Noto+Serif|Nunito|Open+Sans|Open+Sans+Condensed:300|Oswald|Oxygen|PT+Sans|PT+Sans+Caption|PT+Sans+Narrow|PT+Serif|Pacifico|Passion+One|Pathway+Gothic+One|Play|Playfair+Display|Poppins|Questrial|Quicksand|Raleway|Roboto|Roboto+Condensed|Roboto+Mono|Roboto+Slab|Ropa+Sans|Rubik|Saira|Saira+Condensed|Saira+Extra+Condensed|Saira+Semi+Condensed|Sedgwick+Ave|Sedgwick+Ave+Display|Shadows+Into+Light|Signika|Slabo+27px|Source+Code+Pro|Source+Sans+Pro|Spectral|Titillium+Web|Ubuntu|Ubuntu+Condensed|Varela+Round|Vollkorn|Work+Sans|Yanone+Kaffeesatz|Zilla+Slab|Zilla+Slab+Highlight" rel="stylesheet">
An alternate, and much more performant solution, might be to use the Google Web Font Loader which allows you to load any of the Google fonts via JS. This would allo you to load ANY of the Google fonts, without loading ALL of the Google fonts.
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"> </script>
<script>
WebFont.load({
google: {
families: ['Any Google Font']
}
});
</script>

You can import all Google Fonts to your website using the Easy Fonts library. All you have to do is import the following CSS file:
<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />
and, then use the fonts the way you want. Additionally, you can also use the font families and font weights using CSS classes as below:
<div class="font-lato w500i">
<a class="font-open-sans w700" href="https://google.com">Google</a>
</div>
Full class reference for each font family is available here.

You can load multiple google font's but you have to define font families for every font you want to import. You need to separate each font using '|' character.
<link href='//fonts.googleapis.com/css?family=Brawler|Ubuntu|Righteous' rel='stylesheet' type='text/css'>

I was using google api to get all fonts:
https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY
Copy only font family names. I was using VS Code and Regular Expression.
Replace space with + to build stylesheet link:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=ABeeZee|Abel|Abhaya+Libre|Abril+Fatface|Aclonica|Acme|Actor|Adamina|Advent+Pro|Aguafina+Script|Akaya+Kanadaka|Akaya+Telivigala|Akronim|Aladin|Alata|Alatsi|Aldrich|Alef|Alegreya|Alegreya+SC|Alegreya+Sans|Alegreya+Sans+SC|Aleo|Alex+Brush|Alfa+Slab+One|Alice|Alike|Alike+Angular|Allan|Allerta|Allerta+Stencil|Allura|Almarai|Almendra|Almendra+Display|Almendra+SC|Amarante|Amaranth|Amatic+SC|Amethysta|Amiko|Amiri|Amita|Anaheim|Andada|Andika|Andika+New+Basic|Angkor|Annie+Use+Your+Telescope|Anonymous+Pro|Antic|Antic+Didone|Antic+Slab|Anton|Antonio|Arapey|Arbutus|Arbutus+Slab|Architects+Daughter|Archivo|Archivo+Black|Archivo+Narrow|Aref+Ruqaa|Arima+Madurai|Arimo|Arizonia|Armata|Arsenal|Artifika|Arvo|Arya|Asap|Asap+Condensed|Asar|Asset|Assistant|Astloch|Asul|Athiti|Atma|Atomic+Age|Aubrey|Audiowide|Autour+One|Average|Average+Sans|Averia+Gruesa+Libre|Averia+Libre|Averia+Sans+Libre|Averia+Serif+Libre|B612|B612+Mono|Bad+Script|Bahiana|Bahianita|Bai+Jamjuree|Ballet|Baloo+2|Baloo+Bhai+2|Baloo+Bhaina+2|Baloo+Chettan+2|Baloo+Da+2|Baloo+Paaji+2|Baloo+Tamma+2|Baloo+Tammudu+2|Baloo+Thambi+2|Balsamiq+Sans|Balthazar|Bangers|Barlow|Barlow+Condensed|Barlow+Semi+Condensed|Barriecito|Barrio|Basic|Baskervville|Battambang|Baumans|Bayon|Be+Vietnam|Bebas+Neue|Belgrano|Bellefair|Belleza|Bellota|Bellota+Text|BenchNine|Benne|Bentham|Berkshire+Swash|Beth+Ellen|Bevan|Big+Shoulders+Display|Big+Shoulders+Inline+Display|Big+Shoulders+Inline+Text|Big+Shoulders+Stencil+Display|Big+Shoulders+Stencil+Text|Big+Shoulders+Text|Bigelow+Rules|Bigshot+One|Bilbo|Bilbo+Swash+Caps|BioRhyme|BioRhyme+Expanded|Biryani|Bitter|Black+And+White+Picture|Black+Han+Sans|Black+Ops+One|Blinker|Bodoni+Moda|Bokor|Bonbon|Boogaloo|Bowlby+One|Bowlby+One+SC|Brawler|Bree+Serif|Brygada+1918|Bubblegum+Sans|Bubbler+One|Buda|Buenard|Bungee|Bungee+Hairline|Bungee+Inline|Bungee+Outline|Bungee+Shade|Butcherman|Butterfly+Kids|Cabin|Cabin+Condensed|Cabin+Sketch|Caesar+Dressing|Cagliostro|Cairo|Caladea|Calistoga|Calligraffitti|Cambay|Cambo|Candal|Cantarell|Cantata+One|Cantora+One|Capriola|Cardo|Carme|Carrois+Gothic|Carrois+Gothic+SC|Carter+One|Castoro|Catamaran|Caudex|Caveat|Caveat+Brush|Cedarville+Cursive|Ceviche+One|Chakra+Petch|Changa|Changa+One|Chango|Charm|Charmonman|Chathura|Chau+Philomene+One|Chela+One|Chelsea+Market|Chenla|Cherry+Cream+Soda|Cherry+Swash|Chewy|Chicle|Chilanka|Chivo|Chonburi|Cinzel|Cinzel+Decorative|Clicker+Script|Coda|Coda+Caption|Codystar|Coiny|Combo|Comfortaa|Comic+Neue|Coming+Soon|Commissioner|Concert+One|Condiment|Content|Contrail+One|Convergence|Cookie|Copse|Corben|Cormorant|Cormorant+Garamond|Cormorant+Infant|Cormorant+SC|Cormorant+Unicase|Cormorant+Upright|Courgette|Courier+Prime|Cousine|Coustard|Covered+By+Your+Grace|Crafty+Girls|Creepster|Crete+Round|Crimson+Pro|Crimson+Text|Croissant+One|Crushed|Cuprum|Cute+Font|Cutive|Cutive+Mono|DM+Mono|DM+Sans|DM+Serif+Display|DM+Serif+Text|Damion|Dancing+Script|Dangrek|Darker+Grotesque|David+Libre|Dawning+of+a+New+Day|Days+One|Dekko|Dela+Gothic+One|Delius|Delius+Swash+Caps|Delius+Unicase|Della+Respira|Denk+One|Devonshire|Dhurjati|Didact+Gothic|Diplomata|Diplomata+SC|Do+Hyeon|Dokdo|Domine|Donegal+One|Doppio+One|Dorsa|Dosis|DotGothic16|Dr+Sugiyama|Duru+Sans|Dynalight|EB+Garamond|Eagle+Lake|East+Sea+Dokdo|Eater|Economica|Eczar|El+Messiri|Electrolize|Elsie|Elsie+Swash+Caps|Emblema+One|Emilys+Candy|Encode+Sans|Encode+Sans+Condensed|Encode+Sans+Expanded|Encode+Sans+Semi+Condensed|Encode+Sans+Semi+Expanded|Engagement|Englebert|Enriqueta|Epilogue|Erica+One|Esteban|Euphoria+Script|Ewert|Exo|Exo+2|Expletus+Sans|Fahkwang|Fanwood+Text|Farro|Farsan|Fascinate|Fascinate+Inline|Faster+One|Fasthand|Fauna+One|Faustina|Federant|Federo|Felipa|Fenix|Finger+Paint|Fira+Code|Fira+Mono|Fira+Sans|Fira+Sans+Condensed|Fira+Sans+Extra+Condensed|Fjalla+One|Fjord+One|Flamenco|Flavors|Fondamento|Fontdiner+Swanky|Forum|Francois+One|Frank+Ruhl+Libre|Fraunces|Freckle+Face|Fredericka+the+Great|Fredoka+One|Freehand|Fresca|Frijole|Fruktur|Fugaz+One|GFS+Didot|GFS+Neohellenic|Gabriela|Gaegu|Gafata|Galada|Galdeano|Galindo|Gamja+Flower|Gayathri|Gelasio|Gentium+Basic|Gentium+Book+Basic|Geo|Geostar|Geostar+Fill|Germania+One|Gidugu|Gilda+Display|Girassol|Give+You+Glory|Glass+Antiqua|Glegoo|Gloria+Hallelujah|Goblin+One|Gochi+Hand|Goldman|Gorditas|Gothic+A1|Gotu|Goudy+Bookletter+1911|Graduate|Grand+Hotel|Grandstander|Gravitas+One|Great+Vibes|Grenze|Grenze+Gotisch|Griffy|Gruppo|Gudea|Gugi|Gupter|Gurajada|Habibi|Hachi+Maru+Pop|Halant|Hammersmith+One|Hanalei|Hanalei+Fill|Handlee|Hanuman|Happy+Monkey|Harmattan|Headland+One|Heebo|Henny+Penny|Hepta+Slab|Herr+Von+Muellerhoff|Hi+Melody|Hind|Hind+Guntur|Hind+Madurai|Hind+Siliguri|Hind+Vadodara|Holtwood+One+SC|Homemade+Apple|Homenaje|IBM+Plex+Mono|IBM+Plex+Sans|IBM+Plex+Sans+Condensed|IBM+Plex+Serif|IM+Fell+DW+Pica|IM+Fell+DW+Pica+SC|IM+Fell+Double+Pica|IM+Fell+Double+Pica+SC|IM+Fell+English|IM+Fell+English+SC|IM+Fell+French+Canon|IM+Fell+French+Canon+SC|IM+Fell+Great+Primer|IM+Fell+Great+Primer+SC|Ibarra+Real+Nova|Iceberg|Iceland|Imbue|Imprima|Inconsolata|Inder|Indie+Flower|Inika|Inknut+Antiqua|Inria+Sans|Inria+Serif|Inter|Irish+Grover|Istok+Web|Italiana|Italianno|Itim|Jacques+Francois|Jacques+Francois+Shadow|Jaldi|JetBrains+Mono|Jim+Nightshade|Jockey+One|Jolly+Lodger|Jomhuria|Jomolhari|Josefin+Sans|Josefin+Slab|Jost|Joti+One|Jua|Judson|Julee|Julius+Sans+One|Junge|Jura|Just+Another+Hand|Just+Me+Again+Down+Here|K2D|Kadwa|Kalam|Kameron|Kanit|Kantumruy|Karantina|Karla|Karma|Katibeh|Kaushan+Script|Kavivanar|Kavoon|Kdam+Thmor|Keania+One|Kelly+Slab|Kenia|Khand|Khmer|Khula|Kirang+Haerang|Kite+One|Kiwi+Maru|Knewave|KoHo|Kodchasan|Kosugi|Kosugi+Maru|Kotta+One|Koulen|Kranky|Kreon|Kristi|Krona+One|Krub|Kufam|Kulim+Park|Kumar+One|Kumar+One+Outline|Kumbh+Sans|Kurale|La+Belle+Aurore|Lacquer|Laila|Lakki+Reddy|Lalezar|Lancelot|Langar|Lateef|Lato|League+Script|Leckerli+One|Ledger|Lekton|Lemon|Lemonada|Lexend|Lexend+Deca|Lexend+Exa|Lexend+Giga|Lexend+Mega|Lexend+Peta|Lexend+Tera|Lexend+Zetta|Libre+Barcode+128|Libre+Barcode+128+Text|Libre+Barcode+39|Libre+Barcode+39+Extended|Libre+Barcode+39+Extended+Text|Libre+Barcode+39+Text|Libre+Barcode+EAN13+Text|Libre+Baskerville|Libre+Caslon+Display|Libre+Caslon+Text|Libre+Franklin|Life+Savers|Lilita+One|Lily+Script+One|Limelight|Linden+Hill|Literata|Liu+Jian+Mao+Cao|Livvic|Lobster|Lobster+Two|Londrina+Outline|Londrina+Shadow|Londrina+Sketch|Londrina+Solid|Long+Cang|Lora|Love+Ya+Like+A+Sister|Loved+by+the+King|Lovers+Quarrel|Luckiest+Guy|Lusitana|Lustria|M+PLUS+1p|M+PLUS+Rounded+1c|Ma+Shan+Zheng|Macondo|Macondo+Swash+Caps|Mada|Magra|Maiden+Orange|Maitree|Major+Mono+Display|Mako|Mali|Mallanna|Mandali|Manjari|Manrope|Mansalva|Manuale|Marcellus|Marcellus+SC|Marck+Script|Margarine|Markazi+Text|Marko+One|Marmelad|Martel|Martel+Sans|Marvel|Mate|Mate+SC|Maven+Pro|McLaren|Meddon|MedievalSharp|Medula+One|Meera+Inimai|Megrim|Meie+Script|Merienda|Merienda+One|Merriweather|Merriweather+Sans|Metal|Metal+Mania|Metamorphous|Metrophobic|Michroma|Milonga|Miltonian|Miltonian+Tattoo|Mina|Miniver|Miriam+Libre|Mirza|Miss+Fajardose|Mitr|Modak|Modern+Antiqua|Mogra|Molengo|Molle|Monda|Monofett|Monoton|Monsieur+La+Doulaise|Montaga|Montez|Montserrat|Montserrat+Alternates|Montserrat+Subrayada|Moul|Moulpali|Mountains+of+Christmas|Mouse+Memoirs|Mr+Bedfort|Mr+Dafoe|Mr+De+Haviland|Mrs+Saint+Delafield|Mrs+Sheppards|Mukta|Mukta+Mahee|Mukta+Malar|Mukta+Vaani|Mulish|MuseoModerno|Mystery+Quest|NTR|Nanum+Brush+Script|Nanum+Gothic|Nanum+Gothic+Coding|Nanum+Myeongjo|Nanum+Pen+Script|Nerko+One|Neucha|Neuton|New+Rocker|New+Tegomin|News+Cycle|Newsreader|Niconne|Niramit|Nixie+One|Nobile|Nokora|Norican|Nosifer|Notable|Nothing+You+Could+Do|Noticia+Text|Noto+Sans|Noto+Sans+HK|Noto+Sans+JP|Noto+Sans+KR|Noto+Sans+SC|Noto+Sans+TC|Noto+Serif|Noto+Serif+JP|Noto+Serif+KR|Noto+Serif+SC|Noto+Serif+TC|Nova+Cut|Nova+Flat|Nova+Mono|Nova+Oval|Nova+Round|Nova+Script|Nova+Slim|Nova+Square|Numans|Nunito|Nunito+Sans|Odibee+Sans|Odor+Mean+Chey|Offside|Oi|Old+Standard+TT|Oldenburg|Oleo+Script|Oleo+Script+Swash+Caps|Open+Sans|Open+Sans+Condensed|Oranienbaum|Orbitron|Oregano|Orelega+One|Orienta|Original+Surfer|Oswald|Over+the+Rainbow|Overlock|Overlock+SC|Overpass|Overpass+Mono|Ovo|Oxanium|Oxygen|Oxygen+Mono|PT+Mono|PT+Sans|PT+Sans+Caption|PT+Sans+Narrow|PT+Serif|PT+Serif+Caption|Pacifico|Padauk|Palanquin|Palanquin+Dark|Pangolin|Paprika|Parisienne|Passero+One|Passion+One|Pathway+Gothic+One|Patrick+Hand|Patrick+Hand+SC|Pattaya|Patua+One|Pavanam|Paytone+One|Peddana|Peralta|Permanent+Marker|Petit+Formal+Script|Petrona|Philosopher|Piazzolla|Piedra|Pinyon+Script|Pirata+One|Plaster|Play|Playball|Playfair+Display|Playfair+Display+SC|Podkova|Poiret+One|Poller+One|Poly|Pompiere|Pontano+Sans|Poor+Story|Poppins|Port+Lligat+Sans|Port+Lligat+Slab|Potta+One|Pragati+Narrow|Prata|Preahvihear|Press+Start+2P|Pridi|Princess+Sofia|Prociono|Prompt|Prosto+One|Proza+Libre|Public+Sans|Puritan|Purple+Purse|Quando|Quantico|Quattrocento|Quattrocento+Sans|Questrial|Quicksand|Quintessential|Qwigley|Racing+Sans+One|Radley|Rajdhani|Rakkas|Raleway|Raleway+Dots|Ramabhadra|Ramaraja|Rambla|Rammetto+One|Ranchers|Rancho|Ranga|Rasa|Rationale|Ravi+Prakash|Recursive|Red+Hat+Display|Red+Hat+Text|Red+Rose|Redressed|Reem+Kufi|Reenie+Beanie|Reggae+One|Revalia|Rhodium+Libre|Ribeye|Ribeye+Marrow|Righteous|Risque|Roboto|Roboto+Condensed|Roboto+Mono|Roboto+Slab|Rochester|Rock+Salt|RocknRoll+One|Rokkitt|Romanesco|Ropa+Sans|Rosario|Rosarivo|Rouge+Script|Rowdies|Rozha+One|Rubik|Rubik+Mono+One|Ruda|Rufina|Ruge+Boogie|Ruluko|Rum+Raisin|Ruslan+Display|Russo+One|Ruthie|Rye|Sacramento|Sahitya|Sail|Saira|Saira+Condensed|Saira+Extra+Condensed|Saira+Semi+Condensed|Saira+Stencil+One|Salsa|Sanchez|Sancreek|Sansita|Sansita+Swashed|Sarabun|Sarala|Sarina|Sarpanch|Satisfy|Sawarabi+Gothic|Sawarabi+Mincho|Scada|Scheherazade|Schoolbell|Scope+One|Seaweed+Script|Secular+One|Sedgwick+Ave|Sedgwick+Ave+Display|Sen|Sevillana|Seymour+One|Shadows+Into+Light|Shadows+Into+Light+Two|Shanti|Share|Share+Tech|Share+Tech+Mono|Shippori+Mincho|Shippori+Mincho+B1|Shojumaru|Short+Stack|Shrikhand|Siemreap|Sigmar+One|Signika|Signika+Negative|Simonetta|Single+Day|Sintony|Sirin+Stencil|Six+Caps|Skranji|Slabo+13px|Slabo+27px|Slackey|Smokum|Smythe|Sniglet|Snippet|Snowburst+One|Sofadi+One|Sofia|Solway|Song+Myung|Sonsie+One|Sora|Sorts+Mill+Goudy|Source+Code+Pro|Source+Sans+Pro|Source+Serif+Pro|Space+Grotesk|Space+Mono|Spartan|Special+Elite|Spectral|Spectral+SC|Spicy+Rice|Spinnaker|Spirax|Squada+One|Sree+Krushnadevaraya|Sriracha|Srisakdi|Staatliches|Stalemate|Stalinist+One|Stardos+Stencil|Stick|Stint+Ultra+Condensed|Stint+Ultra+Expanded|Stoke|Strait|Stylish|Sue+Ellen+Francisco|Suez+One|Sulphur+Point|Sumana|Sunflower|Sunshiney|Supermercado+One|Sura|Suranna|Suravaram|Suwannaphum|Swanky+and+Moo+Moo|Syncopate|Syne|Syne+Mono|Syne+Tactile|Tajawal|Tangerine|Taprom|Tauri|Taviraj|Teko|Telex|Tenali+Ramakrishna|Tenor+Sans|Text+Me+One|Texturina|Thasadith|The+Girl+Next+Door|Tienne|Tillana|Timmana|Tinos|Titan+One|Titillium+Web|Tomorrow|Trade+Winds|Train+One|Trirong|Trispace|Trocchi|Trochut|Truculenta|Trykker|Tulpen+One|Turret+Road|Ubuntu|Ubuntu+Condensed|Ubuntu+Mono|Ultra|Uncial+Antiqua|Underdog|Unica+One|UnifrakturCook|UnifrakturMaguntia|Unkempt|Unlock|Unna|VT323|Vampiro+One|Varela|Varela+Round|Varta|Vast+Shadow|Vesper+Libre|Viaoda+Libre|Vibes|Vibur|Vidaloka|Viga|Voces|Volkhov|Vollkorn|Vollkorn+SC|Voltaire|Waiting+for+the+Sunrise|Wallpoet|Walter+Turncoat|Warnes|Wellfleet|Wendy+One|Wire+One|Work+Sans|Xanh+Mono|Yanone+Kaffeesatz|Yantramanav|Yatra+One|Yellowtail|Yeon+Sung|Yeseva+One|Yesteryear|Yrsa|Yusei+Magic|ZCOOL+KuaiLe|ZCOOL+QingKe+HuangYou|ZCOOL+XiaoWei|Zen+Dots|Zeyada|Zhi+Mang+Xing|Zilla+Slab|Zilla+Slab+Highlight">

Using a font from the google font library is essentially adding a style-sheet every time to your page that needs to be downloaded every time your site loads.
There's no shortcut to download all google fonts to a single website because the inefficiency of having a ginormous amount of CSS downloaded when your page is accessed simply isn't the best solution. Professional web developers have a specific font-stack for each website and only include those specific fonts used in that page. This is my suggestion.

Spacing & Outlook IOS App signature

I've recently tried using a HTML signature in the Outlook app for IOS and everything displays correctly but for some reason an extra line is inserted between each line of text. Can't seem to work out why, or whether there is issues with code / if I can implement anything to stop the extra line the Outlook app seems necessary.
<p style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 12px; color: #1f497d; margin-bottom: 10px;"> </p>
<p style="font-family: Helvectica, Arial, sans-serif; font-size: 12px; line-height: 12px; color: #1f497d; ">Kind regards, </p>
<p>
<br /> <span style="color: #00b0f0; font-family: Helvetica, Arial, sans-serif; font-size: 14px;"><strong>Full Name</strong></span>
<br /> <span style="color: #1f497d; font-family: Helvetica, Arial, sans-serif; font-size: 12px"><strong>Company Name</strong></span></p>
<p><span style="color: #1f497d; font-family: Helvetica, Arial, sans-serif; font-size: 12px">Direct: <span style="color: #e36c0a;">0207 201 <strong>1234</strong></span></span>
<br /><span style="color: #1f497d; font-family: Helvetica, Arial, sans-serif; font-size: 12px"> Email: <a style="color: #1f497d;" href="mailto:email#email.co.uk">email#email.co.uk</a></span>
<br /><span style="color: #1f497d; font-family: Helvetica, Arial, sans-serif; font-size: 12px"> Web: <a style="color: #1f497d;" href="http://www.website.co.uk/">www.website.co.uk</a></span></p>
<p style="font-size: 0px; line-height: 0; font-family: Helvetica, Arial, sans-serif;"> </p>
Any suggestions greatly appreciated, sending me mad!