How implement google fonts when download the font in collection?


Tags: css,fonts,webfonts,google-font-api,google-webfonts

Problem :

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*/
    }

    CSS Howto..

    How to implement padding-free sprites in css?

    How to make CSS file more important than another CSS file? [closed]

    Show/Hide tr elements based on multiple CSS classes and input from multiple checkboxes

    Google font - how to specific font-family If they have the same name?

    How can I add image to facebook login button?

    How the licensed web font is getting rendered?

    How to change CSS property in Magnific Popup

    How do I style hyperlinks separately, using CSS?

    how to style this via css in Bootstrap

    How to have a two headings in same line with css?

    How can I remove/cover up a section of a border?

    How can I make height: “100%” work cross browser in CSS?

    CSS how to fill remaining space (1 div with smaller divs)

    How can I make a span stretch the available space between to other spans?

    how can i prevent to take input onkeypress anything other than alphanumeric

    How can I make a div auto-adjust its height between two divs, according to window height using CSS/Javascript?

    How to == Model Method Class in Helper for CSS?

    How to make the underlines the same size in all browsers with css?

    How to CSS: select element based on inner HTML

    How can I make this menu's “clear:both” work in Google Chrome?

    How come the first

    How to delete space in css?

    how to animate “simple jquery filtering” by using css only

    How to enforce input text to take 100% width of its parent

    showing
    inside :before element

    How to override position : absolute in css?

    How do you manage css stylesheet files and inclusions in a large ruby on rails application?

    How to fix element on the center of scrollable page?

    How to make DIVs flow to the left in a x-scrollable pane with CSS?

    How to pause .setInterval() on hover and on .click() of interior content?