Search code examples
cssfontswebfontsgoogle-font-apigoogle-webfonts

How implement google fonts when download the font in collection?

i would like to use two google fonts, but my fear is that adding in this way: 

<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

could be slower (in performance) than download fonts in collection...

So i download two fonts in collection, but i have doubt how i could to implement in my website...

Maybe i just have to insert the two collections in the css folder and than add in head

<link href='https://path/css/font/ ???????' rel='stylesheet' type='text/css'>

but i don't know what file i have to link in path... For example when i download PT Sans in collection, in this folder i have these files:

enter image description here

I hope you can help me understand more..

Thanks a lot and sorry for my english

Solution

  • Simply call your fonts in css file.

    @font-face {
    font-family: myFirstFont;
    src: url(font1.woff); /* specify the path of your font location*/
}

    Repeat this for next fonts.

     @font-face {
        font-family: myFirstFont;
        src: url(font2.woff); /* specify the path of your font location*/
    }