We are building a web application where different users see different colors, fonts, border widths, etc depending on the Material UI JSON theme that is pulled from the database when the application loads.
The problem comes with dynamic fonts. What methods have people tried to dynamically load the font(s) that are needed for the theme? To be clear, a font that is seen by one user may be different from a font seen by another user.
For example, user one may have the following theme definition:
"fontFamily": "'Galaxie', sans-serif"
While user two might have the following theme definition: "fontFamily": "'Roboto', Arial, sans-serif"
Typically you would define a CSS file or add a line to the HTML that would load these fonts from the server. However, we would prefer that user one only had to download the Galaxie font, while user two only has to download the Roboto font.
Current solutions we are thinking of:
Just make all users load all fonts (not going to work at scale)
Create a CSS file, to define fonts, that is dynamically populated depending on which user requests it from the server
You can import custom fonts from here.
https://material-ui.com/guides/interoperability/#raw-css
Related
I am using React & Sanity to build a portfolio website where visitors can select from a few options to change the font of the website.
The client would like to be able to define and update these fonts themselves through the Sanity CMS, so I've set up fields to store the font name and font file/URL which are then queried through GraphQL.
How can I use this data to write #font-face declarations in my JS file (either JSS or inline style objects)?
I'm trying to find out which one loads faster. Upon checking the audit tab in Chrome both approach result in a slow First meaningful paint. I'm using googleapi font to render fonts in my site. Below are the codes I'm comparing
<link href='https://fonts.googleapis.com/css?family=Montserrat&subset=latin' rel='stylesheet'>
vs
#font-face {
font-family: 'Montserrat';
src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
}
Now it seems that hosting the font on my local directory loads slower. I'm not sure if what I'm doing is correct. Any idea which one is faster and what is the best way to implement this?
I'm just trying to cut down the First meaningful paint down to half. I used the link in to reference the googleapi but upon checking the audit its taking 1,500ms just to load this from googleapi site.
Everything you put inside the <head> tag will be loaded before everything else.
So the <head> first loads the css file, after that it loads the #font-face.
If load the font inside the <head> using <link>, the browser will first load the font, then the css file.
So <link> will be faster in terms of performance. Not that it will be a huge / notable difference.
Also:
In your example there is also a difference with loading it with from google's cdn or serve it from your local server.
Cdn's are meant to serve files really fast. Depending what server you have, Im pretty sure google's servers are way, way fasterf. So google's option loading it with the <link> tag is the recommended way to go.
See also this SO question, its about #import. But its just the same as #font-face { src: ... ; }
Including Google Web Fonts link or import?
Very misleading answer above.
The <link> loads a CSS with #font-face inside. It is verifiably slower.
We should design code so that web pages load fast; however, a user's device can affect slow down the loading of web pages. For this reason, I take into account how slow a web page could load for some users when designing and coding my web pages. Linking to the font in the HTML will quicken the font face being displayed before other styles. However, I would rather styles for images and the like to be displayed as soon as possible. Changes in such elements can be rather jarring, so I use #font-face in my main CSS file instead of linking to font files in the HTML.
Ok, so suppose I have downloaded a whole font family with additional CSS file where all styles of a given font are loaded. Like Bold, Thin, etc. But I only use some of those in my CSS, not all.
Is there an easy way to check which ones are not used so that I delete corresponding #font-face declarations and the user won't have to download them?
If you think you can do it automatically I think it can't. But you can search manually in your CSS name of the fonts, if you not see the result (show nothing) in your code you can remove it.
In Developer tools -> Application, on left sidebar you can check which fonts was defined in your project. But same like said Habib, you have to check it manually on your own.
I have just installed a custom WordPress theme (this is my first time working with WordPress, so I'm still learning a lot) and I need to make the font of the blog match the font for the rest of the web site, which is a Google Web Font.
I went to the custom theme's stylesheet editor in the WordPress Dashboard and added the font via #import. So it currently looks like this:
/* Make all custom CSS changes BELOW this line
-----------------------------------------------------------*/
#import url("http://fonts.googleapis.com/css?family=Questrial:700,400");
body { font-family: Questrial, sans-serif; }
But that didn't change the font in the blog. Am I not implementing the web font correctly? Is there some better/other way to do what I'm trying to accomplish?
Thanks for anyone's help!
Well, it looks like you are implementing the font correctly.
Try using a tool like Firebug for Firefox or Google Chrome's built in developer tools to see if the HTTP Request is coming back OK from the Google Fonts server.
If it's properly loading the CSS file, your problem may lie within CSS inheritance. Because of the 'Cascading' part of the Cascading Style Sheets, there may be a rule that is higher on the list of importance. You'll just have to hunt through and find it. Again you can use Firebug or Chrome developer tools for this as well.
The most simple solution may be simply adding an font-family: Questrial, sans-serif !important;
There are a few pretty impressive font apps out there. My favourite is Font your Face (http://drupal.org/project/fontyourface). Only problem is it only allows for you to use existing sources. i.e.
Typekit.com
Google Font API
KERNEST
Font Squirrel
Common fonts -- fonts already available in most browsers
Is there any way to add a "source" that is effectively grabbing files off the server? I want to be able to upload my own fonts.
We've had good luck with webfonts, though we're not using any Drupal modules, just adding them to the theme using CSS.
The #font-your-face module now includes a local fonts module that does exactly what you've described here.