I'm facing some problems with the google fonts, using TideSDK.
I took a code snippet, 100% working, from a previous web project I did.
CSS3 code:
body {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
HTML5 code:
<!-- Google Fonts link -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open%20Sans">
I've seen that this question has been asked already here on stackoverflow, but since that the answers I've found are a bit outdated and closed, I tought that it was a good idea to open a new one regarding this topic.
The question is: how can I implement google fonts into the TideSDK app? Because the same snipppet that I've taken from a previous tested web app here doesn't work.
Thanks in advance.
Related
Hi sorry for the bad english
I have a question so someone ask me to check a website using google insight and it gave me this
so the google insight have a solution to put "font-display: swap" but the website has a lot of plugins and i cant find where to put the solution
You can apply this as a CSS property or add to the of the URL when importing your google fonts, see below for examples:
In CSS:
#font-face {
font-family: "Roboto";
font-display: swap;
}
Or when importing:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap" rel="stylesheet">
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'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!
I have recently struggled with achieving smooth Google Web Fonts, primarily on Windows Google Chrome.
I had previously been using the direct stylesheet code, ripped from the URL that Google Web Fonts supplies, eg., Google supplies:
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:200' rel='stylesheet' type='text/css'>
So I go to the URL and use the following code
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 200;
src: local('Titillium WebThin'), local('TitilliumWeb-Thin'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr-K9kSItTeDn2USN0q77Oh4.woff) format('woff');
}
I figured this was a cheeky way to save a little more speed rather than making a request to Google, which then appears to make another request to source the font.
I recently discovered that this was the cause of the rendering issues (see the following example for how the Windows Chrome browser renders on the Web Font page, compared to a test page I created using the process: http://imgur.com/OV2U1,ema2B)
My question is, why does the <link /> version make the font smooth, when it is sourcing the same font with my shorthand method? And also, is there any reason why I should be using this approach, which I figured would cut request times?
There are a few issues that may answer your question. The main one is that the linked URL actually displays different CSS for different browsers. So if you open it in Chrome and copy that CSS then it may not work in Internet Explorer (particularly pre version 9).
Also, you are using a font weight of 200, which is a "light" weight. The default of regular text is 400. So there is a small chance that certain browsers simply don't show the font unless you specify a font weight of 200. Something like this should help:
body {
font-family: "Titillium Web", sans-serif;
font-weight: 200;
}
Add this to your CSS-file:
#import url('http://fonts.googleapis.com/css?family=Titillium+Web:200');