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.
Related
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!
I noticed today on my website that font awesome was not loading on Chrome. It should have a double down arrow in the gradient circle, however it is not showing on Chrome on my laptop. It did show up on Chrome on my Google Pixel, however I am assuming they may be different versions of the browser since one is for mobile. It worked fine earlier when I tested it and nothing had changed in my code since it worked fine. I am beyond confused.
In the head is this:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Here is the code for the font-awesome library I am using:
<div class="arrowContainer">
<div class="arrow"><i class="fa fa-angle-double-down" aria-hidden="true"
style="font-size:36px; color: white"></i></div>
</div>
Your Site is not being delivered with https, either change that or simply change your head link to:
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Only using // will choose the appropriate protocol based on your sites protocol
I'm trying to use a Google font on my website in different weights. Here's the code I'm using:
<link href="//fonts.googleapis.com/css?family=Roboto:100,300,500" rel="stylesheet">
Everything works fine in Chrome and Safari. But in IE, everything looks bold, no matter what font-weight I set an element to have.
I have found one work around. If I load each font-weight individually (with the code below), everything works in IE.
<link href="//fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
That works, but it's inefficient. Anyone have a better solution?
Thanks!
Try putting the proper google fonts suggested line:
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,500' rel='stylesheet' type='text/css'>
Or put the fonts into your css file:
#import url(https://fonts.googleapis.com/css?family=Roboto:100,300,500);
Don't know what else could help, sorry.
It turns out the issue was that IE was set to load intranet sites in compatibility mode. Since the dev environment is on the local network (and thus an intranet site), IE was switching into compatibility mode without my knowledge. Turning that setting off fixed the issue
I am trying to use Google fonts in this website. The link is in the head, if you click it the result is the correct. In the CSS, the font-family is the correct, but the font I am seen in my screen is not the correct.
This is the link:
<link rel="stylesheet" id="options-google-fonts" title="google-fonts" href="//fonts.googleapis.com/css?family=Open+Sans:300%7CMontserrat&subset=latin&v=1399056353" type="text/css" media="all" />
And the CSS:
.caption-wrap .line-2, .caption-wrap .line-3, .caption-wrap .line-5 a, .navbar-nav>li>a, .service-wrap .service-btm a {
font-family: Montserrat;
}
Nobody can tell me if is there a problem with this?
Use this snippet to link the CSS, it's done the way Google recommends to link their fonts:
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
You put the stylesheet <link> element inside the <body>. It should be in the <head>.
As far as Chrome is concerned, a page served as HTTPS should not be calling a resource served as HTTP. Chrome isn't picky about when things are the other way around, so it will happily retrieve an HTTPS resource via a page served as HTTP.
Solutions
Match the protocols
Make sure you always call the https version of your Google Webfont URL. For example:
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300%7CMontserrat&subset=latin&v=1399056353'
rel='stylesheet' type='text/css' media="all">
This link was generated by Redux Options Framework. The problem seems to occurs only on Chrome in Windows 8.
The problem fixes deleting the title attribute.
I'm using this to link to some Google Fonts:
<link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC|Snippet|Sarina|Crushed|Caesar+Dressing|Montez|Bad+Script|Sofia|Fontdiner+Swanky|Just+Me+Again+Down+Here|Voltaire|Geo|Coming+Soon|Wellfleet|Passion+One|Rock+Salt|Homemade+Apple|Meddon|Rosario' rel='stylesheet' type='text/css'>
I'm using this code, which works in some browsers:
<span style="font-size: 110px;font-family:montez;"><b>Abcdefg</b></span>
Why doesn't the font doesn't appear in IE8? http://jsfiddle.net/3NbE5/
It seems that IE doesn't support multiple fonts in the href:
http://jsfiddle.net/3NbE5/3/
You had this href:
<link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC|Snippet|Sarina|Crushed|Caesar+Dressing|Montez|Bad+Script|Sofia|Fontdiner+Swanky|Just+Me+Again+Down+Here|Voltaire|Geo|Coming+Soon|Wellfleet|Passion+One|Rock+Salt|Homemade+Apple|Meddon|Rosario' rel='stylesheet' type='text/css'>
After removing the other fonts it worked:
<link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC|Montez' rel='stylesheet' type='text/css'>
Just in case the solution above don't cut it for you.
I got multiple fonts working on ie8 without any problems. My actual problem was using ie11 in compatibility mode for ie8, where google web fonts don't seem to work in any possible way.
I guess the lesson is, use a vm with the actual ie8. You can grab one here or here.