Tag: google-fonts

Have 2 types of sized in google icon font

I need to have 2 types of menu one with small icons and one with larger icons I have tried adding small class <!DOCTYPE html> <html> <body> <!doctype html> <html lang=”en”> <head> <link rel=”stylesheet” href=”https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@40,400,0,0&#8243; /> <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&#8221; rel=”stylesheet” integrity=”sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65″ crossorigin=”anonymous”> <style> <style> .material-symbols-outlined { font-variation-settings: “FILL”0,”wght”400,”GRAD”0,”opsz”40 } .material-symbols-outlined-small { font-variation-settings: “FILL”0,”wght”100,”GRAD”0,”opsz”24 } </style> </style>… Read More Have 2 types of sized in google icon font

MRLeave a comment

Why does Google Fonts add "rel=stylesheet" to its fonts?

I was considering adding rel=preload to my <link> tag in order to preload my site’s main font, when I noticed that it already contained rel="stylesheet": <link rel="preconnect" href="https://fonts.googleapis.com"&gt; <link rel="preconnect" href="https://fonts.gstatic.com&quot; crossorigin> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,300&display=swap&quot; rel="stylesheet"> To my understanding, the rel attribute is used for identifying stylesheets, so why does Google use it for fonts? What… Read More Why does Google Fonts add "rel=stylesheet" to its fonts?

MRLeave a comment

Google font color is ignored

I have an OutlineButton where I try to use a google font for the text using the google-fonts dependency. The code looks like that: OutlinedButton( child: const Text(‘Next’), style: ButtonStyle( backgroundColor: MaterialStateProperty.resolveWith((states) { return colorPrimaryButton; }), textStyle: MaterialStateProperty.resolveWith((states) { return GoogleFonts.inter(textStyle: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white)); }) ), onPressed: () { // do… Read More Google font color is ignored

MRLeave a comment

Combine all Google Material icon font requests into one

I was wondering if it possible to combine all requests below into one. Is it possible? If yes, how? <link href="https://fonts.googleapis.com/icon?family=Material+Icons&quot; rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined&quot; rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Round&quot; rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp&quot; rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone&quot; rel="stylesheet" /> >Solution : You can simply stack the family URL parameters. Note that I’ve used the css2… Read More Combine all Google Material icon font requests into one

MRLeave a comment