I am trying to use Roboto for a text-based logo and have the necessary code to load the font in <head>. While the site is loading, you can briefly see the logo in an ugly default font before becoming properly formatted in the web font. The logo literally grows bigger and then smaller. Is this type of problem indicative of poor code implementation or is something else the problem?
I am happy to upload the relevant code portion if the question cannot be answered generally.
One option would be to tell the browser to preload your fonts.
Here is an example:
<link rel="preload" as="font" href="/fonts/custom-font.woff2" type="font/woff2" crossorigin="anonymous">
If you’re using a CDN like Google Fonts (Roboto), be sure that the font files you’re preloading match the ones in the CSS, or you could end up downloading two versions of the same font.
Hope this helps!
Related
I have a generic css file with all fonts the website is using (local).
Inside i have for example :
#font-face {
font-family: "LemonMilk";
src: url("../fonts/LemonMilk.otf");
}
.....
.LemonMilk{
font-family: "LemonMilk" ;
font-size: 4vh;
}
I have many many of them, but some pages need only few of them, but still i load the whole file for every page :
<head>
....
<link rel="stylesheet" href="../css/style.css"/>
Problem:
Most of my pages will delay loading them and show system fonts for a second or 2.
Tried:
<link rel="preload" as="font" href="/style/some.otf" type="font/otf" crossorigin="anonymous">
which provide a warning message that they where loaded but never used within a few seconds of page loading. But i do use them right away.
Questions:
How to reduce delay?
If i include a css with all fonts, will he load also the ones i dont use?
why preload didn't work ?
when using #font-face in CSS, it is down to browser, how it behaves.
It's good to use external CSS sheet for declaring fonts.
If this doesn't help, you could try making different CSS files with fonts for different subpages. As you mentioned, you don't use all fonts on all subpages, so it may reduce the filesize and consequently load faster.
Once I was working on a project with a lot of fonts and I had similar problem. The best solution then was to base64 encode all of the fonts I used. So by that approach, all of the fonts had to be loaded before HTML was parsed and displayed. Font squirrel's webfont generator found here: https://www.fontsquirrel.com/tools/webfont-generator can be really helpful tool. If you will use it you should click "Expert" and "base64 encode".
Also, for testing and seeing how your load times improve, you can check out Fontloader here: https://github.com/smnh/FontLoader . It detects when fonts of the specified font-families loaded and rendered by the browser so you can see which step is taking the most time.
So I am developing a site at http://www.johnkimwell.com/Vetel/ and one problem I have is that the font awesome icon is not loading and is only showing a square. I checked everything including the css and I dont see any possible conflict.
I hope you guys can help me out.
Thank you
Strange, indeed. I checked out your website and I found out that you are using FA v. 4.2.0, most of my websites use 4.7.0 so before doing anything else, replace your link element for font-awesome.css for this :
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Perhaps you are using a too old version. Other than that, I checked your headers, console log, everything seems fine.
Hope it helps!
The .fa::before class from Font Awesome appears to be overridden by simple-line-icons. I unchecked the first property in the image below, causing the search icon to be displayed. If you are not using simple-line-icons, the easiest fix would be to get rid of
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
Image of how I fixed the issue
Has anyone tried successfully to reduce loading times of Typekit by using preload or prefetch? i.e.
<link rel='preload' href='...' as='font'>
<!-- and/or -->
<link rel='prefetch' href='...'>
Is it a practical or possible in the current Typekit loading setup?
You could try preloading Typekit's script:
<link rel="preload" href="https://use.typekit.net/[YOUR_KIT_ID].js" as="script">
I've tested this and it does seem to work. The 'loading order' of waterfall changes — the Typekit script moved up to tie second with my main (deferred) javascript file. As for performance, I'm not seeing much improvement — if any at all.
As of today, link rel='preload' is not implemented by any browser.
I have tried using link rel='prefetch', and Chrome did prefetch that font, however, it ignored the prefetched font and downloaded it again when it needed it.
one of my client website uses font called Roboto. When I look on their pages all looks fine and font is working properly on all of them.
However they say that their products pages http://lichtblick-led.de/index.php/produkte.html showing other font instead of Roboto. Again, they say its only on that page and not on other pages.
Can any of you replicate the same problem?
P.S. They said they tested it from all browsers, few different computers, and even cleared the cache.
Cheers!
after an inspection of the page I noticed that it's not using the Roboto font
<link href="//fonts.googleapis.com/css?family=Lora:400,700&subset=latin,cyrillic" rel="stylesheet" type="text/css">
that is font Lora.
this needs to be changed
under HTML:
<link href='http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
OR
under CSS:
#import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);
You can further modify your selection over here on GoogleFonts
PS: I have included the latin & cyrillic subsets.
The link to load the Roboto font from the Goolge CDN isn't present on the products page:
<link href="//fonts.googleapis.com/css?family=Roboto:300,400,300italic&subset=latin-ext" rel="stylesheet" type="text/css">
Also you should load the fonts before the JavaScript to prevent FOUC.
I don't want favicon for my website. Unfortunately my web hosting service imposes one. All my pages shows a favicon with the name of my hosting service.
How can I get rid of the (commmercial) favicon?
I could set a customised favicon but it is a personal website and I don't know what (very little) image could reflect me... And even if I found an idea, I don't have the time or skills to create a beautiful image.
I thought putting the html code without actually sending a image : (favicon.png does not exist)
<link rel="icon" type="image/png" href="img/favicon.png" />
But it's not working (it doesn't block the default favicon).
I could put a white image to override the commercial favicon but the rendering isn't beautiful (white empty favicon on gray browser...)
Here! I made you a favicon :) Use it to your heart's content (if you like it).