CODEWITHSUNDEEP
htmlcssfonts
Abdul Jabbar
Abdul Jabbar

Reputation: 2573

Missing/Unusual font making the text overlap

I have this code generated with the font "HelveticaNeueLT Pro 25 UltLt", not too sure about the font but the resulting text gets overlapped:

<div style=" position:absolute; top:36pt; left:64.8pt; border:0pt solid black; width:507.8pt;height:125pt;">

<div align="left" style="line-height:0pt; ">
<span style="white-space:pre-wrap;  font:normal 34pt HelveticaNeueLT Pro 25 UltLt; color:rgb(102,102,102);">My </span>
<span style="white-space:pre-wrap;  font:normal 34pt HelveticaNeueLT Pro 25 UltLt; color:rgb(102,102,102);">Name</span>
<span style="white-space:pre-wrap;  font:normal 34pt HelveticaNeueLT Pro 25 UltLt; color:rgb(102,102,102);"> Is</span>
</div> 

<div align="left" style="line-height:0pt; ">
<span style="white-space:pre-wrap;  font:normal 30pt HelveticaNeueLT Pro 25 UltLt; color:rgb(77,217,255);">David </span>
<span style="white-space:pre-wrap;  font:normal 30pt HelveticaNeueLT Pro 25 UltLt; color:rgb(77,217,255);">Soban</span>
</div> 

</div>

Whereas when i change the font to Arial, Everything comes at its position.

<div style=" position:absolute; top:36pt; left:64.8pt; border:0pt solid black; width:507.8pt;height:125pt;">

<div align="left" style="line-height:0pt; ">
<span style="white-space:pre-wrap;  font:normal 34pt Arial; color:rgb(102,102,102);">My </span>
<span style="white-space:pre-wrap;  font:normal 34pt Arial; color:rgb(102,102,102);">Name</span>
<span style="white-space:pre-wrap;  font:normal 34pt Arial; color:rgb(102,102,102);"> Is</span>
</div> 

<div align="left" style="line-height:0pt; ">
<span style="white-space:pre-wrap;  font:normal 30pt Arial; color:rgb(77,217,255);">David </span>
<span style="white-space:pre-wrap;  font:normal 30pt Arial; color:rgb(77,217,255);">Soban</span>
</div> 

</div>

Is there a way to set a default font in case the given font is not available or incorrect? How to make this font work as it is a valid font.. I have it in my system fonts but still not working. Does it have something to do with the browser understanding or in general HTML doesn't support it.

Upvotes: 3

Views: 77

Answers (3)

Vandervals
Vandervals

Reputation: 6054

You totally shouldn't use the font attribute! That is completly out of date, you should use css classes or (not very recomended but still better than the font attribute) write a style attribute:

<style>
.title{
  font-family: HelveticaNeue, Arial, sans-serif;
  font-size: 24px;
}
</style>
<div class="title">Your title here</div>

Also, as a designer I must tell you that you should use px or em units instead of pt units and you should avoid Helvetica if are you working for screen display as it doesn't render very well and if the font size is small it doesn't even look like an helvetica. A good option would be Lucida Sans, Verdana, Tahoma, Lato, Open sans...

Upvotes: 1

Thomas Ayoub
Thomas Ayoub

Reputation: 29431

Set the Arial (or any other default) font to the parent container and redefine it in your children style. If the redefined font is available it'll be displayed, if not, it'll keep the parent one.

<div style=" position:absolute; top:36pt; left:64.8pt; border:0pt solid black; width:507.8pt;height:125pt;">

<div align="left" style="line-height:0pt; font:normal 34pt Arial;">
<span style="white-space:pre-wrap;  font:normal 34pt HelveticaNeueLT Pro 25 UltLt; color:rgb(102,102,102);">My </span>
<span style="white-space:pre-wrap;  font:normal 34pt HelveticaNeueLT Pro 25 UltLt; color:rgb(102,102,102);">Name</span>
<span style="white-space:pre-wrap;  font:normal 34pt HelveticaNeueLT Pro 25 UltLt; color:rgb(102,102,102);"> Is</span>
</div> 

<div align="left" style="line-height:0pt; font:normal 34pt Arial;">
<span style="white-space:pre-wrap;  font:normal 30pt HelveticaNeueLT Pro 25 UltLt; color:rgb(77,217,255);">David </span>
<span style="white-space:pre-wrap;  font:normal 30pt HelveticaNeueLT Pro 25 UltLt; color:rgb(77,217,255);">Soban</span>
</div> 

</div>

Upvotes: 1

Navneet Panchariya
Navneet Panchariya

Reputation: 158

add line-height

<div style=" position:absolute; top:36pt; left:64.8pt; border:0pt solid black; width:507.8pt;height:125pt;">

<div align="left" style="line-height:20pt; ">
<span style="white-space:pre-wrap;  font:normal 34pt HelveticaNeueLT Pro 25 UltLt; color:rgb(102,102,102);">My </span>
<span style="white-space:pre-wrap;  font:normal 34pt HelveticaNeueLT Pro 25 UltLt; color:rgb(102,102,102);">Name</span>
<span style="white-space:pre-wrap;  font:normal 34pt HelveticaNeueLT Pro 25 UltLt; color:rgb(102,102,102);"> Is</span>
</div> 

<div align="left" style="line-height:20pt; ">
<span style="white-space:pre-wrap;  font:normal 30pt HelveticaNeueLT Pro 25 UltLt; color:rgb(77,217,255);">David </span>
<span style="white-space:pre-wrap;  font:normal 30pt HelveticaNeueLT Pro 25 UltLt; color:rgb(77,217,255);">Soban</span>
</div> 

</div>

Upvotes: -1

Related Questions