less if else
Используя переменные, определяем какой шрифт использовать, первый — локальный, второй с google fonts.
@font_gotham:true; @font_opensans:false; .set_fonts() when (@font_gotham=true){ @import '../css/GothamPro.css'; @font_base:GothamProRegular; @font_base_it:GothamProItalic; @font_300:GothamProLight; @font_300_it:GothamProLightItalic; @font_500:GothamProMedium; @font_500_it:GothamProMediumItalic; @font_700:GothamProBold; @font_700_it:GothamProBoldItalic; @font_900:GothamProBlack; @font_900_it:GothamProBlackItalic; .font_it{ font-family:@font_base_it; } .font_300{ font-family:@font_300; } .font_300_it{ font-family:@font_300_it; } .font_500{ font-family:@font_500; } .font_500_it{ font-family:@font_500_it; } .font_700{ font-family:@font_700; } .font_700_it{ font-family:@font_700_it; } .font_900{ font-family:@font_700; } .font_900_it{ font-family:@font_900_it; } }; .set_fonts() when (@font_opensans=true){ @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese'); @font_base:'Open Sans',sans-serif; .font_it{ font-style:italic; } .font_300{ font-weight:300; } .font_300_it{ font-weight:300; font-style:italic; } .font_500{ font-weight:600; } .font_500_it{ font-weight:600; font-style:italic; } .font_700{ font-weight:700; } .font_700_it{ font-weight:700; font-style:italic; } .font_900{ font-weight:800; } .font_900_it{ font-weight:800; font-style:italic; } }; .set_fonts();
Использование:
body{ font-family:@font_base; } .ex{ .font_500(); font-size:12px; & when (@font_opensans=true){ font-size:14px; } }