I've read similiar threads but this problem is a bit different: I have:
<head>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic' rel='stylesheet' type='text/css'>
//rest of the code...
And in the css style file I have:
body{
font-family: 'Source Sans Pro', sans-serif;
//rest of the code...
It works perfectly in the browser, but when I enter with my mobile, the words just dissapear, and the page is loding forever with only the structure. I'm still developing the webpage, so I was trying it with the mobile to check everything works.
1.- I've tried #import url(http://fonts.googleapis.com/.... and nothing.
2.- I've changed the font to Arial in the css file and it works.
3.- My mobile is Nexus 4 with chrome.
4.- I've tried with another font of Google Api and nothing.
5.- It works perfect in the desktop browser. Even in IE.
Anyone knows what could be the problem? Thank you!
Related
I've been using fontawesome for one of my web projects and it works fine when I use the CDN link as its stylesheet but when I want to have everything locally and download FontAwesome(zip file) from the website, it becomes messy and shows multiple icons as some kind of bad zoom problem over its png file of icons.
the only change is
this
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
into this
<link src="assets/css/font-awesome/css/font-awesome.css" rel="stylesheet">
Again, the problem isnt that its not working, its how it shows multiple icons.
Assure you have downloaded the full package with correct version from the FontAwesome website and use a correct link, such as:
<link href="assets/css/font-awesome/css/font-awesome.css" rel="stylesheet" >
Reset your browsers cache.
Assure that the or element you use, uses the FontAwesome font family. For example:
<i class="fa-pencil" title="Edit"></i>
but
<i class="fa fa-pencil" title="Edit"></i>
It won't work if you have something as the following in your CSS:
* {
font-family: 'Josefin Sans', sans-serif !important;
}
If you are using IE, just dont...
If this doesn't work, just give it one hour or two(trust me sometimes browser plays jokes on itself), if problem was persistant, check https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting
On page load in IE, the page is displayed for a fraction of second with no custom font, then it renders fine. But this behavior is not in Chrome. Any suggestion how to prevent it.
Thanks
Use always google fonts for websites in this way.
Add in Html
<head>
<title>Website Name</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
Add in CSS
body{
font-family: 'Open Sans', sans-serif;
}
font loading speed depend on the size of the font, your browser cache, and the bandwidth of your network.
that aside, why there is no problem in chrome? it might be because of the way the browser was designed. IE is old, and I bet that your chrome is brand new. so it might be that chrome has a better thread management than IE.
what to do to minimize the effect? you can try to reduce the size of your font. for example, if you use the font for icons, then you can remove the icons that you are not using.
another way is to use windows build in fonts for display in IE, that way, the browser does not need to download fonts. for example, you can use century gothic, impact, or calibri
I have installed google font roboto on my machine, I am also including
<link href='http://fonts.googleapis.com/css?family=Roboto:regular,medium,bold,thin' rel='stylesheet' type='text/css'>
in tag of my welcome.html file .
and in css file I am using css like
.mycss{
font-family: "robotoregular","sans-serif","arial";
font-size: 13px;
}
Its working fine in development mode, but when I deploy it on tomcat font size is 2-3px large than development mode. I don't know why its coming. can somebody help me to get out of this? Also how to import Google font in gwt.
Thanks,
First of all, it should be:
font-family: "Roboto", sans-serif;
You can include Google font in your GWT html file the same way as you did for your welcome.html. This is the link that Google recommends (you can choose your own font weights, of course):
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
Can someone please help me get a grasp of what's going on with this site in Internet Explorer? I tested the site in every other browser (Safari, Opera, Chrome, Firefox), but I don't have any means of testing in IE.
I put the site on a live testserver for the client to check out, and they're sending me screenshots of broken layouts and missing text sections.
It seems the issue is related to the Google font I'm using. Exchanging the font with Helvetica renders expected results, but whenever the font is active only parts of the websites text renders.
All I've done to use this font is copy paste the Google font:
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,600,400italic,700' rel='stylesheet' type='text/css'>
And I'm using this as my css rule:
font-family: "Titillium Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
EDIT
I managed to finally fix the issue by downloading the "Titillium Web" from Google and converting it to a webfont with fontsquirrel.
IE is still having some issues rendering characters like æøå.
I am having a strange problem in my wordpress website. I have installed magnium theme, and on my front page, i have a caroussel of pictures. So far so good. There is some text displayed on the pictures, and it has the font-family : "Open-sans"; property.
When i am logged in as an admin, no problem, the CSS is properly executed. But the problem comes when I am logged out: the same page renders with default browser fonts on chrome and firefox on my computer. However this does not happen on my android chrome. I checked with the chrome dev tools, the ONLY difference i can find in CSS is the last line of compiled CSS:
OST derived font - 17 glyphs (in admin logged in session)
Liberation Serif - 14 glyphs (in incognito mode or logged out)
I just don't understand, any basic clues for debugging ? Is there any CSS debugger that could give me more details than the - already detailed - chrome dev tools ?
Unfortunately I cannot give the url as the website is not public yet and my client had it protected.
Try This
font-family: 'Open Sans', sans-serif;
this is google font you can add a link in your header.php
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
Or Import style with in your Style.css
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600);
and call the Font family to your Selector ex:
body {
font-family: 'Open Sans', sans-serif;
}