Snippets Collections
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link rel='preload' as='style' href='https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap'>
/*                  Font                  */
@font-face {
  font-family: "Myriad Set Pro";
  src: url("fonts/myriad-set-pro_bold.ttf") format("truetype");
  font-weight: 700;
}
@font-face {
  font-family: "Myriad Set Pro";
  src: url("fonts/myriad-set-pro_semibold.ttf") format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: "Myriad Set Pro";
  src: url("fonts/myriad-set-pro_medium.ttf") format("truetype");
  font-weight: 500;
}
@font-face {
  font-family: "Myriad Set Pro";
  src: url("fonts/myriad-set-pro_text.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Myriad Set Pro";
  src: url("fonts/myriad-set-pro_thin.ttf") format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: "Myriad Set Pro";
  src: url("fonts/myriad-set-pro_ultralight.ttf") format("truetype");
  font-weight: 100;
}


/* use the custom font like any other font */
body {
  font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
}
from matplotlib import font_manager

font_dirs = ['path/to/font/']
font_files = font_manager.findSystemFonts(fontpaths=font_dirs)

for font_file in font_files:
    font_manager.fontManager.addfont(font_file)

# set font
plt.rcParams['font.family'] = 'Comic Sans'
@font-face {
  font-family: Hetilica;
  src: url(Hetilica.woff) format("woff");
  font-weight: normal;
  font-style: normal;
  ascent-override: 75%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
    font-family: Asap;
    src: url('/fonts/Asap-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: Asap;
    src: url('/fonts/Asap-Bold.woff2') format('woff2');
    font-weight: bold;
    font-display: swap;
    font-style: normal;
}

@supports (font-variation-settings: normal) {
    @font-face {
        font-family: Asap;
        src: url('/fonts/Asap-VariableFont_wght.woff2') format('woff2 supports variations'),
            url('/fonts/Asap-VariableFont_wght.woff2') format('woff2-variations');
        font-weight: 400 700;
        font-display: swap;
        font-style: normal;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fonts in CSS</title>

  <style>
    body{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 20px;
      line-height: 1.6em;
    }
    #welcome p span{
      font-weight: bold;
    }
    #about p span{
      font-style: italic;
    }
    
  </style>
</head>
<body>
  
  <div id="welcome">
    <h2 class="primary-heading">Welcome</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. <span> Eius praesentium laboriosam ratione molestiae nobis, nisi quod laudantium aliquid accusamus</span> expedita!</p>
  </div>
  <div id="about">
    <h2>About</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <span> Cumque enim natus ad? Mollitia alias repudiandae </span>iusto molestias voluptatum, dolores eius.</p>
  </div>
  
</body>
</html>
star

Wed Feb 07 2024 23:26:35 GMT+0000 (Coordinated Universal Time)

#css #google #font #preload
star

Sun Jan 30 2022 22:41:52 GMT+0000 (Coordinated Universal Time) https://altcademy.github.io/apple_clone/

#font
star

Tue Dec 07 2021 09:01:02 GMT+0000 (Coordinated Universal Time)

#matplotlib #font
star

Fri Apr 16 2021 20:15:33 GMT+0000 (Coordinated Universal Time) https://tobireif.com/posts/ensuring_the_correct_vertical_position_of_large_text/

#css #font #@font-face
star

Fri Apr 16 2021 12:53:31 GMT+0000 (Coordinated Universal Time) https://bnijenhuis.nl/notes/2021-04-13-how-to-add-self-hosted-variable-fonts-to-your-website/?utm_source=markboulton&utm_medium=email

#variable #font #asap #self-hosting
star

Sun Mar 21 2021 17:02:45 GMT+0000 (Coordinated Universal Time)

#css #font #fonts

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension