baz_april/squelettes/scss/base/_typo.scss

/* font */
@include font-face(Fontawesome, fontawesome);

@include font-face(Merriweather, merriweather-regular-webfont, 400, normal);
@include font-face(Merriweather, merriweather-regularitalic-webfont, 400, italic);
@include font-face(Merriweather, merriweather-bold-webfont, 700, normal);
@include font-face(Merriweather, merriweather-bolditalic-webfont, 700, italic);
@include font-face(Merriweather, merriweather-black-webfont, 900, normal);
@include font-face(Merriweather, merriweather-blackitalic-webfont, 900, italic);

@include font-face(Lato, lato-hairline-webfont, 100, normal);
@include font-face(Lato, lato-hairlineitalic-webfont, 100, italic);
@include font-face(Lato, lato-light-webfont, 200, normal);
@include font-face(Lato, lato-lightitalic-webfont, 200, italic);
@include font-face(Lato, lato-regular-webfont, 400, normal);
@include font-face(Lato, lato-regularitalic-webfont, 400, italic);
@include font-face(Lato, lato-bold-webfont, 700, normal);
@include font-face(Lato, lato-bolditalic-webfont, 700, italic);
@include font-face(Lato, lato-black-webfont, 900, normal);
@include font-face(Lato, lato-blackitalic-webfont, 900, italic);



.fas {
	font-family:Fontawesome;
	color:$couleurPrincipale;
}



$typo-Merriweather:     'Merriweather', Helvetica, Arial, sans-serif;
$typo-Lato: 'Lato', Helvetica, Arial, sans-serif;

$typo-texte:      $typo-Lato;
$typo-titres:     $typo-Merriweather;

body {
    $_computed_bfs: strip-unit($body-font-size) / strip-unit($_base-font-size);
    font-size:      $_computed_bfs * (14/strip-unit($body-font-size))*1em;
    @include media($bp-small-up) {
        font-size: $_computed_bfs * (15/strip-unit($body-font-size))*1em;
    }
    @include media($bp-medium-up) {
        font-size: $_computed_bfs * (16/strip-unit($body-font-size))*1em;
    }
    @include media($bp-large-up) {
        font-size: $_computed_bfs*1em;
    }

    font-family:    $typo-texte;
    font-weight:    normal;
    line-height:    $typo-line-height;
    color:          $couleur-texte;
    text-rendering: geometricPrecision;
}

html.rtl * {
    // pas d'italique pour les langues RTL
    font-style: normal !important;
}

a {
    text-decoration: none;
    color:           $couleur-lien;
    &:hover {
        text-decoration: underline;
        color:           $couleur-lien-hover;
        border-color:    $couleur-lien-hover;
        outline:         0;
    }
    &:focus {
        background-color: $couleur-lien !important;
        border-color:     $couleur-lien !important;
        color:            white !important;
        text-shadow:      none !important;
        transition:       all 0s !important;
        svg * {
            //fill: white !important;
        }
    }
}

.nav.principale {
	font-family:$typo-Merriweather;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family:    $typo-titres;
    line-height:    1.1;
    font-style:     normal;
    color:          $couleur-titres;
    margin:         0 0 0.8em 0;
    letter-spacing: 0.02em;
    a:link, a:visited {
        color: $couleur-titres;
    }
    a:hover {
        color: $couleur-lien-hover;
    }
}

h1, .h1 {
    font-size: em(26px);
    @include media($bp-medium-up) {
        font-size: em(30px);
    }
}

h2, .h2 {
    font-size: em(22px);
    @include media($bp-medium-up) {
        font-size: em(26px);
    }
}

h3, .h3 {
    font-size: em(20px);
    @include media($bp-medium-up) {
        font-size: em(23px);
    }
}

h4, .h4 {
    font-size: em(18px);
    @include media($bp-medium-up) {
        font-size: em(20px);
    }
}

h5, .h5,
h6, .h6 {
    @include media($bp-medium-up) {
        font-size: em(18px);
    }
}

::selection {
    color:       white !important;
    background:  darken($couleur-lien, 10%) !important;
    text-shadow: none !important;
    transition:  all 0s !important;
}

.periode { 
	a, span {
		&:not(.mois_archives):after { content:$fa-var-chevron-right; font-size:0.7em; font-family: 'FontAwesome'; }
	}
}