CSS - FONTS

Links

Google Fonts
DaFont
1001 Fonts
CSS Tricks
Font Squirrel Can convert your own fonts with Generator to add them in a folder in your project
Flourish Fonts

Types: Serif: Classic/Elegant, Sans Serif: Engagint, Script luxury, Display: Campaigns;

Some Fonts: Montserrat Joost Galindo Londrina Cony HappyMonkey Spirax Righteous Monoton


    // IMPORT FONTS
    font-family: 'Montserrat2', sans-serif;

    /*IN CSS file*/
    @import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap"); 

    /*IN HTML*/
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,300&display=swap" rel="stylesheet">

    /*IMPORT FROM file (added at the beginning in css file) */
    @font-face {
        font-family: 'Montserrat2';
        src: 
        url('fonts/fontawesome-webfont.woff2') format('woff2'),
        url('fonts/fontawesome-webfont.woff');
        font-weight: normal;
        font-style: normal;
    }

    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
        url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
        url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */


    //STYLING  
    font-family: "Permanent Marker", Verdana, sans-serif; /*2nd and 3rd are backups*/
    font-style: normal | italic | oblique;
    font-weight: normal | bold | 300 400 500 600;
    font-variant: small-caps;
    font-size: 18px | 100% | 1.2rem | 1em | 1vw;
    color: white;
    line-height: 
    font (all): font-style, font-variant, font-weight, font-size[line-height], font family;
    font: italic small-caps bold 12px/30px Georgia, serif;

    ::first-letter {font-size: 130%; }
    ..first-line {font-weight: bold; }