HTML & CSS : two separate issues desire one answer :)

Question

1) 我的字体没有安装在用户的计算机上 --> 网站看起来很糟糕。我如何强制网站在没有安装我的网站字体的计算机上看起来完全一样(强制安装或引用 API)

注意:

• 不欢迎建议放置图片的回答。
• 建议使用 google 字体 API 的答案 - 它不支持我的字体(Margot、Alef)。

2) 我的网站使用 Bootstrap ，我查看了 here了解网格布局但似乎无法使其工作。我有一个带有一些文本的背景图片，希望我的按钮正好位于它的下方。这是我的代码

<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>

Answer 1

Q1:你可以尝试在http://www.fontsquirrel.com/tools/webfont-generator中生成一个网页字体并嵌入我们的网站