Web Analytics Made Easy -
StatCounter Styling-by-Cell in a Flexbox - CodingForum

Announcement

Collapse
No announcement yet.

Styling-by-Cell in a Flexbox

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • #16
    ....
    ... if that does not convince you then take a further look here...

    Full Page Vtew
    https://codepen.io/coothead/full/dyeWNpP

    Editor View
    https://codepen.io/coothead/pen/dyeWNpP

    ~ the original bald headed old fart ~

    Comment


    • #17
      If the fonts aren’t being rendered then that isn’t what I wanted. Here are 6 fonts you can check your output against. If your text doesn’t match what I've sampled for you here then your code isn’t what I’m looking for: text rendered in the font itself. Have a lookie . . .

      Code:
      <!DOCTYPE html>
      <HTML LANG="en">
      <HEAD>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <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=Courier+Prime:ital,[email protected],400;0,700;1,400;1,700&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Crete+Round:[email protected];1&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:[email protected];200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,[email protected],400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,[email protected],400;0,700;1,400;1,700&display=swap" rel="stylesheet">
      
      <link href="https://fonts.googleapis.com/css2?family=Trade+Winds&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Gabriela&display=swap" rel="stylesheet">
      
      <TITLE>97 STYLIN&rsquo; TABLE FONTS ᰄ by Coothead</TITLE>
      
      <STYLE>
      
      *{
      box-sizing: border-box;
      }
      body {
      background-color: #f9f9f9;
      font: normal 1em / 1.5em sans-serif;
      }
      
      /* ▬▬▬▬▬▬▬▬▬ SIX FONTS, SAMPLED ▬▬▬▬▬▬▬▬▬ */
      
      .COU {
      margin-top: 1rem;
      line-height: 1.05;
      font-weight: 700;
      font-size: 1rem;
      font-family: 'COURIER PRIME', monospace;
      }
      
      .CRE {
      margin-top: 1rem;
      font-style: ITALIC;
      line-height: 1.1;
      font-weight: 400;
      font-size: 1rem;
      font-family: 'CRETE ROUND', serif;
      }
      
      .GAB {
      margin-top: 1rem;
      line-height: 1.1;
      font-weight: 400;
      font-size: 1rem;
      font-family: 'GABRIELA', display;
      }
      
      .HEN {
      margin-top: 1rem;
      line-height: 1.5;
      font-weight: 400;
      font-size: 1rem;
      font-family: 'HENNY PENNY', display;
      }
      
      .MET {
      margin-top: 1rem;
      line-height: 1;
      font-weight: 400;
      font-size: 1rem;
      font-family: 'METAL MANIA', display;
      }
      
      .TRA {
      margin-top: 1rem;
      line-height: 1;
      font-weight: 400;
      font-size: 1rem;
      font-family: 'TRADE WINDS', display;
      }
      
      </style>
      </head>
      
      <body>
      
      <div class="COU">
      This is a sample of the (bolded) Google Font &ldquo;COURIER PRIME&rdquo; &ndash; a Monospace font developed by Mozilla!</div>
      
      <div class="CRE">
      This is a sample of the Google Font <B>&ldquo;CRETE ROUND&rdquo;</B> &ndash; shown here italicized</div>
      
      <div class="GAB">
      This is a sample of the Google Font <B>&ldquo;GABRIELA&rdquo;</B> &ndash; selected by Coothead</div>
      
      <div class="HEN">
      This is a sample of the Google Font &ldquo;HENNY PENNY&rdquo; &ndash; <B>a playful display font</B> by font developer &ldquo;brownfox&rdquo;</div>
      
      <div class="MET">
      This is a sample of the Google Font &ldquo;METAL MANIA&rdquo; &ndash; a Gothic font rendered in small caps, particularly suited to <B>SHAKESPEARE EXCERPTS</B> I have found.</div>
      
      <div class="TRA">
      This is a sample of the Google Font &ldquo;TRADE WINDS&rdquo; &ndash; another selection by Coothead.</div>
      
      </body>
      </html>
      Click image for larger version  Name:	SAMPLED.png Views:	0 Size:	661.5 KB ID:	2436141
      Last edited by semicodin; Sep 18, 2022, 04:43 PM.

      Comment


      • #18
        If the fonts aren’t being rendered then....


        I have shown you that the six fonts are being displayed in the image here...

        post #15

        ...and in the codepen to be found here...

        post #16

        I have nothing further to add to this thread.
        So I'm out.

        Last edited by coothead; Sep 18, 2022, 04:27 PM.
        ~ the original bald headed old fart ~

        Comment


        • #19
          semicodin, are you using an Apple product? If your fonts aren't rendering the way that coothead showed that is what may be the issue. I have had fonts embedded at the top of a CSS sheet that point to the fonts on the same server as the CSS sheet on at least two sites and they refuse to render that way on an Apple product. So it is not coothead's code but more than likely the device you are using.

          Comment

          Working...
          X