I am developing a landing page for a website at:
https://emotional-wellbeing.com/
The page renders fine in Chrome, but in Firefox the Open Sans Condensed fonts do not show at all. I have tried several changes from this forum, but none have helped.
Google fonts include:
<link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Open+Sans+Condensed:700" as="style" onload="this.rel='stylesheet'"/>
The page is Open Sans font, except for:
<div class="sectionmainheadline"><h1 style="font-family: 'Open Sans Condensed', sans-serif; font-weight:700; font-stretch: condensed;">"Discover How You Can <span style='color: #3a9921;'>Melt Away</span> Away Your Stress & <span style='color: #3a9921;'>Overcome </span>Your Anxiety,<br/><span class='underline'>In As Little As 5 Minutes From Now</span>"</h1></div>
I am using Bootstrap 4.
You can see how it looks on Chrome here:
But on Firefox the red circled area does not look Open Sans Italic, and the blue circled area is god knows what font!:
How can I get these circled areas looking like Chrome versions? I am out of ideas.
Looks like this
<link rel="preload" […] as="style" onload="this.rel='stylesheet'"/>
does not work as intended in FF to begin with. As soon as I change the rel to stylesheet manually in inspector, the mentioned parts show up in the desired font fine.
Since I am not even seeing a request for the stylesheet URL before that, I would assume that it is not the onload part that is going wrong here, but that FF does not want to preload stylesheets this way in general yet(?).
Related
I'm using Heebo Google fonts and commas and apostrophes appearing strangely in my HTML. As far as I know it only appears on desktop and not mobile.
Heebo is imported like this:
<link href="https://fonts.googleapis.com/css?family=Heebo:400,500,700,800|Fira+Sans:600" rel="stylesheet">
https://culturestride.com/
Fixed a few hours ago in the Google Fonts API. No changes need to be made.
I managed to fix this by using the github version. I converted them to the Webfont versions using https://transfonter.org/. I added a font cache (OMGF Wordpress Plugin), disabled Google Fonts (disable google fonts) on my Wordpress, then replaced these fonts (through cpanel). I know this is a temporary fix but it works. Working site: https://littlethiings.com. If someone, else finds a related fix please do update this forum. I created a css format for the font, you can call the included stylesheet and your font should work as intended (remove google font first). Link (scroll to bottom). Thanks!
UPDATE: The rollback has been completed. You can switch back to the google fonts again.
The cheapest solution to the problem
You can include all characters in Heebo font but not the ,
Use this link tag for your font. I have included all characters of keyboard in it but not including those chars who are not working properly. As a result of which , will work in normal way and it does not look ugly.
<link href="https://fonts.googleapis.com/css? family=Heebo:400,500,700,800|Fira+Sans:600&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz?.1234567890[]';.()/\!##$%^&*-=+_{}:|\.ABCDEFGHIJKLMNOPQRSTUVWXYZ*~\>" rel="stylesheet">
I had the same error from today in my website and i guess is a Google Font error.
Basically, what you need to do is to download an old version of the font, for example https://www.fontsquirrel.com/fonts/heebo).
Then call again the font inside your local .css and not anymore through Google Api.
#font-face {
font-family: 'Heebo';
src: url('Heebo-Regular.eot');
src: url('Heebo-Regular.eot?#iefix') format('embedded-opentype'),
url('Heebo-Regular.woff') format('woff'),
url('Heebo-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I’m trying to implement some animated social media icons on my site with pure CSS and no JS. The pen I found that am trying to adapt is called "Yet Another Set of Animated Social Icons".
The problem is, rectangle glyphs are showing instead of the correct social media icons in my web browser locally and remotely. The icons appear properly in the original codepen. But somewhere along the way in my implementation on my web server or in my web browser, I am importing the web fonts incorrectly.
Here is what it looks like locally in my web browser.
So you can see it yourselves, here it is on my web-server: https://angeles4four.info/
The author of the original codepen uses external style sheets and preprocessors. I’ve done my best to include these imported in my HTML and CSS. See below.
In my head tags in my index.html is this:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lora" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
In my css file is this:
#charset "UTF-8";
#font-face {
font-family: 'icomoon';
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.eot?3qkin2");
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.eot?#iefix3qkin2") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.woff?3qkin2") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.ttf?3qkin2") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.svg?3qkin2#icomoon") format("svg");
font-weight: normal;
font-style: normal;
Is this set up correctly? What am I missing? I'm trying to get my social media icons to render properly (as they appear in the original pen) instead of empty rectangle glyphs.
you forgot add
https:
try this
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
To recap how I got this working, I made two changes:
Courtesy of Hossam Elmasrey, I added https: to one of the link elements in index.html.
Turns out I was missing local system fonts. So with Manjaro being my local O/S, I invoked: sudo pacman -Ss ttf-liberation. I’m not sure when, how, or why these fonts were missing, but Liberation fonts are installed now.
Then I restarted my browser. When accessing my remote website through Firefox and Chrome, all the icons load properly. Hooray! But loading index.html from Chrome and Firefox directly from my local file tree doesn’t work - - which Connum explained is because web browsers disable some content from loading externally for security reasons. Going forward I will use a local testing server.
Thank you both for your help.
So I am using the fonts this way
<link href='http://fonts.googleapis.com/css?family=Fira+Sans:700|Open+Sans&text=1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%20' rel='stylesheet' type='text/css' />
<style>h1, h2, h3 {font-family: 'Fira Sans', sans-serif; line-height:1.125em} </style>
This is the result...
I am completely confused as how this can even happen? What am I doing wrong. The issue seems only on the home computer. Rest everywhere I checked its fine.
Home PC: Firefox, Windows 7 (In chrome the fonts are not displaying at all, its blank)
Try using Mozilla's CDN instead of Google's; the latter seems to be buggy with regards to the Fira Sans font.
Replace your googleapis.com link with this one and it should work:
<link href='https://code.cdn.mozilla.net/fonts/fira.css' rel='stylesheet' type='text/css' />
You might have to still use Google's CDN for Open Sans, in addition to Mozilla's for Fira Sans, but Open Sans doesn't seem to have this issue as far as I am aware of.
Do you have any custom settings in your GRAPHICS driver config? E.g. is Anisotropic Filtering, Antialiasing / etc. turned on? Firefox tends to pass some of those optimizations through, with bad results :-/
Try turning all of those settings to "Application-controlled" / auto / default whatever and see if that makes a difference.
I was having this issue. The cause was a misconfiguration of the time and date information in my computer. Once I adjusted that, google fonts started to work fine.
The html+css for Firefox in windows, looks fine, but same looks out of place in Firefox in Ubuntu. Please do let me know, as to how it can corrected, what should i do?
More info 1: The css code for the text in the attached image:
style="font-family:'Museo 300';
font-size:11px;
text-align:left;
color:#636466;
padding-top:3px;"
Although am changing Museo 300 to font to Arial, Helvetica, sans-serif, so it can load in any browser with these default fonts, but still i see the this problem.
image attached
Most likely the font you are using is not installed on the Ubuntu machine. To get around this you must supply the font yourself. Google Fonts is a great way to do just this.
You can search their site for a suitable font, and then link it in your site <head>.
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
And then use it in your CSS
font-family: 'Roboto', sans-serif;
Sadly, Google Fonts does not have the Museo font you are trying to use. However, you can use the #font-face CSS At-Rule to link to a font file which you are hosting on your site. Make sure that you only host the languages and font weight/style that you plan to use, and that your font file is limited to those same parameters. This will allow the file to be loaded much faster.
#font-face {
font-family: 'My Custom Font';
src: url('http://yoursite.com/yourfontfile.ttf') format('truetype');
}
p.customfont {
font-family: 'My Custom Font', Verdana, Tahoma;
}
(See this answer for more information)
Font looks different in different browsers. How to fix?
Font in FireFox,
Font in IE
I don't see any difference. I tried having a separate style sheet
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="css/fontsie.css">
<![endif]-->
.
I also linked <link rel="stylesheet" type="text/css" href="fonts.googleapis.com/css?family=sans-serif">;.
Here is my code http://jsfiddle.net/priyaa2002/FfFwe/5
Well, obviously they're not the same font. Most likely, you're using a font that's available in Firefox but not available in IE. Can you give us any hints, like what the HTML is like?
Also, check what the default font settings are in both browsers. The Firefox one looks like a special font (taller and lighter than, say, Times Roman) and the other font is a barely serifed font (sort of sans serif with some swashes) like Ultima.
Update
Okay, I've got it. Your font-family is
font-family:Verdana, Geneva, sans-serif;
Your IE doesn't have either Verdana or Geneva (I think your firefox is getting Geneva) and so defaulting to sans-serif. If you really want them to all look the same, consider going to link Google fonts so your page will load fonts for you from Google's network.
I just fiddled that to
font-family:Verdana, Geneva, Times, sans-serif;
and it looks better.
Fonts will always render slightly different in different browsers, there isn't any way of getting around that unless you use images or a javascript solution. One popular solution is typeface.js.
I'd recommend reading up on typeface and doing some research into other solutions and try one.
Link to typeface.js:
http://typeface.neocracy.org/
Good luck!
Matti