Snippets Collections
$font-sizes: 12px 14px 16px 18px;

@for $i from 1 through length($font-sizes) {
  .text-#{$i} {
    font-size: nth($font-sizes, $i);  // Retrieves the corresponding font size from the list
  }
}


//generates
.text-1 {
  font-size: 12px;
}

.text-2 {
  font-size: 14px;
}

.text-3 {
  font-size: 16px;
}

.text-4 {
  font-size: 18px;
}
//index.html

/// this is for open sans
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet" />


//css stylesheet
 
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

$font-family-base: 'Open Sans', sans-serif;
h1 {
	font-size: 48px;
	font-weight: 400;
	line-height: 1.2em;
	color: #000000;
}

h2 {
	font-size: 40px;
	font-weight: 400;
	line-height: 1.2em;
	color: #000000;
}

h3 {
	font-size: 36px;
	font-weight: 400;
	line-height: 1.2em;
	color: #000000;
}

h4 {
	font-size: 32px;
	font-weight: 400;
	line-height: 1.2em;
	color: #000000;
}

h5 {
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2em;
	color: #000000;
}

h6 {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2em;
	color: #000000;
}
// Easy Vertical Text //

@media only screen and (min-width: 640px) { em {
  width: auto !important;
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
  font-style: normal !important;
  transform: rotate(180deg);
}
}

em {
  font-style: normal !important;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Bangers&family=Comfortaa&family=Emblema+One&family=Luckiest+Guy&family=Nova+Flat&family=Permanent+Marker&family=Sigmar+One&family=Vujahday+Script&display=swap" rel="stylesheet">
/* Text change detail */
h1 strong {
  font-family: aktiv-grotesk-extended !important;
  font-size: 3.1rem;
}
//SIMPLE SANS SERIF FONT
body {
 font-family: 'Lato', sans-serif;
 font-weight: 300;
}
//https://fonts.google.com/specimen/Lato?query=lato
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Prata&display=swap" rel="stylesheet"> 

// CLASSIC SERIF VERY DIGNIFIED
h1, h2, h3, h4, h5, h6 {
 font-family: 'Prata', serif;
}
//https://fonts.google.com/specimen/Prata
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Prata&display=swap" rel="stylesheet"> 
<!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 Sep 11 2024 00:18:40 GMT+0000 (Coordinated Universal Time)

#scss #loop #list #fonts
star

Wed Aug 21 2024 22:37:30 GMT+0000 (Coordinated Universal Time)

#preconnect #fonts #google
star

Wed Jul 10 2024 14:06:22 GMT+0000 (Coordinated Universal Time) https://www.markhendriksen.com/ultimate-guide-for-divi-fonts/

#fonts
star

Fri Feb 25 2022 06:13:17 GMT+0000 (Coordinated Universal Time) https://www.ghostplugins.com/steps/super-easy-vertical-text-version-2?fbclid=IwAR0yYDYS06kLYLdWZuLzI_QVREVnLMx4lkrqa4YEZtP7uS1aKN5ur7S7Rzg

#text #fonts
star

Sat Feb 19 2022 14:58:46 GMT+0000 (Coordinated Universal Time) https://fonts.google.com/

#html #fonts
star

Thu Feb 17 2022 18:40:49 GMT+0000 (Coordinated Universal Time) https://www.golivehq.co/blog/our-5-favorite-css-code-tricks-for-squarespace-71

#text #fonts
star

Wed Jun 23 2021 04:31:38 GMT+0000 (Coordinated Universal Time)

#css #styling #fonts
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