Curious observation while pruning some CSS using one of my favorite development tools, "Web Developer" by @chrispederick

#WebDevelopment #CSS #directives #import #fontface #webdeveloper #browserextension

Wrapping up a project for a "release" on github, I use Google Material Icons for guess what... icons! Optional methods exist to "import" the font data required for rendering the Google font in one's own creation.

Typically, telling the browser which font to use is achieved via HTML <Style> or <Link> to rel="stylesheet". The at-import points to the resource URL (as contains the desired font data). The "@ font-face" directive also contains a parameter for the same type of font resource URL.

Attached Screenshots:
showing interface where available CSS resources are shown "collapsed/ expanded" to demonstrate that "Web Developer" (the browser extension) identifies the URL pointing to the google resource under the at-import directive, but not the at-font-face which appears in the same, local .css file.

What do we make of this phenomenon?
Note: the CSS Resource locations: "wsldebian" (local dev server), the CDN for Chota, and the Google Fonts URL.

CSS Typography and Web Fonts by Abdelfattah Ragab

Available on https://shop.tredition.com and https://www.amazon.com

#css #css3 #typography #webfonts #fonts #fontfamily #fontsize #fontweight #fontstyle #lineheight #italic #oblique #fontface #textindent #textalign #wordbreak #texttransform #uppercase #lowercase

🟤🔴 How I Solved My Font Rendering Problem
by Michelle Barker @michelle @MicheBarks
#css #webfonts #typography #fontface

https://css-irl.info/how-i-solved-my-font-rendering-problem/

I'm going to give this JetBrains Mono font a try for my code and commanline for a bit. Looks pretty decent. https://www.jetbrains.com/lp/mono/

#Typography #fonts #FontFace #Typeface #font #code #MonoSpace

🟣🟡 The new @ font-face syntax
by Ollie Williams @hypeddev
#fontface #VariableFont #ColorFont #webdev #css

https://fullystacked.net/posts/new-font-face-syntax/

🔴🔵🟡🟢 Self-hosting fonts explained (including Google fonts) font-face tutorial
by Kevin Powell
@KevinJPowell
#fontface #webfont #GoogleFonts

https://youtu.be/zK-yy6C2Nck

„Beware the Font Name“ https://alvaromontoro.com/blog/68008/beware-the-font-name

Nice article about implementing your fonts correctly in CSS.

#css #font #typography #fontface