1) When my website fonts are not installed on a user's computer, it can make the site look unattractive. Is there a way to ensure that the website looks exactly as intended even on computers without the necessary fonts installed? Perhaps through forcing an installation or referencing an API?
Note:
- Suggestions involving placing images will not be accepted.
- The Google Font API does not support my fonts (Margot, Alef).
2) I am using Bootstrap for my site and have tried to understand the grid layout from here, but I am having trouble implementing it. I have a background image with text and would like to position a button directly underneath it. Below is the code I am currently using:
<div class="fullwidthbanner-container overlay-fix">
<div class="top-overlay"></div>
<div class="fullwidthbanner" data-0="background-position:0px 0px;" data-end="background-position:0px -800px;">
<div class="col-sm-12 header-area">
<div class="row">
<div class="col-sm-8 resp-center header animate animate_aft">
<a href="https://www.somewhere.com" class="top-download btn btn-default btn-lg">DOWNLOAD NOW</a>
</div>
<div class="col-sm-4 animate animate_afb">
<div class="phone-holder">
<img class="phone-in-hand" src="phone-in-hand.png" alt="some video"/>
</div>
</div>
</div>
</div>
</div>
</div>