Missing / Fancy font overlapping text
I have this code generated by the font "HelveticaNeueLT Pro 25 UltLt", not too sure about the font, but the resulting text overlaps:
<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 to 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 if the given font is not available or is incorrect? How do I get this font to work since it is a valid font. I have this in my system fonts but still doesn't work. Does it have anything to do with understanding the browser or HTML doesn't support it at all.
source to share
Set the font Arial
(or whatever the default) to the parent container and override it to match your kids' style. If the overridden font is available it will be displayed, if not it will keep the parent.
<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>
source to share
Don't use the font attribute entirely! This is completely deprecated, you have to use the css classes or (not very recommended but still better than the font attribute) write the 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 you are working on the screen, as it does not display well and if the font size is small it even not like helvetica. A good option would be Lucida Sans, Verdana, Tahoma, Lato, Open sans ...
source to share
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>
source to share