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">
Related
Let's say you want all the text on your web site to be in the Open Sans font. Is it enough to write,
html, body { font-family: "Open Sans"; font-size: 16px }
Or do I have to (in addition to the above) import Open Sans from google fonts?
In other words, do I really need to add a stylesheet from google fonts, e.g.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" type="text/css">
Summary
What I'm really asking is, do I need to include the google fonts Open Sans stylesheet to format text in Open Sans? Or does Open Sans already come with most web browsers?
I would think that Open Sans comes with most web browsers. I would think that most web browsers have all the font files for standard fonts like Open Sans.
Open Sans is no web-safe-font so you should not assume the user has it installed.
You find more info about web-safe-fonts here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#web_safe_fonts
I would prefer to load the font from my own server for privacy reasons. The is a good source for downloading google webfonts:
https://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=latin
The page seems to be down right now but just check later..
I'm using ruby on rails version 5.0.0, and I'm using c9.io. I'm not that sure how to use Google fonts and where I would put the embed font code:
<link href="https://fonts.googleapis.com/css?family=Delius" rel="stylesheet">
I know that I have to put font-family: 'Delius', cursive; in the css file, but if I do that without doing the previous, the only font it uses is Comic Sans.
I learned the answer but I'd still like to know which folder would you put it in?
You can import it wih CSS - Place this at the top of your css file:
#import url('https://fonts.googleapis.com/css?family=Delius');
I figured it out. You put <link href="https://fonts.googleapis.com/css?family=Delius" rel="stylesheet"> in the application.html.erb file.
If I download and use this font on my web page, will it be able to render correctly on all browsers? I have checked on Google Chrome and it is not on the list of default fonts installed.
If not, is there an alternative that can be used so my web page will be able to render properly on all the browsers and operating systems?
You need to include a web-font in order to ensure your page renders the same on all browsers. A good repository of web-fonts can be found here:
http://www.google.com/fonts/
https://edgewebfonts.adobe.com/
If you own a licence which permits you to use the font on a website, you can use the following converter to change your font into a web format
http://www.fontsquirrel.com/tools/webfont-generator
An example of including and using a web-font :
HTML
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
CSS
body {
font-family: 'Open Sans', sans-serif;
}
I am already using a font from google, and it works as expected :
#font-face {
font-family: 'Chivo';
font-style: normal;
font-weight: 900;
src: local('Chivo Black'), url(http://themes.googleusercontent.com/static/fonts/chivo/v4/uOXSiKkEygwkvR4cgUzOz_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
Now I need another font from google and I don't know where to pick that url. The only url I can see on google fonts is (e.g for this font) is:
<link href='http://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
But the googleapis url does not work, if I replace the src with that url no font is loaded.
To locate all of the Google fonts you can go here:
http://www.google.com/fonts
Using # font-face with google fonts is not recommended...
They will (and should) host all of the "google" fonts for you. Having you host them in a new location is simply bad form... If another user visited a site with the same font, but served up form google, they would have to do a new server call to YOUR location...rather than use the cashed version google has.
To use multiple fonts, place a pipe character (Shift + Backslash = | ) in between the names in the link tag:
<link href='http://fonts.googleapis.com/css?family=Audiowide|Exo+2|Rambla|Scada' rel='stylesheet' type='text/css'>
And then to your font family tags can call the appropriate fonts as needed:
font-family: 'Audiowide', cursive;
font-family: 'Exo 2', sans-serif;
font-family: 'Rambla', sans-serif;
font-family: 'Scada', sans-serif;
You code only works for browsers that support WOFF for downloadable fonts. This is a direct consequence of just ripping off some code sent by the Google server to some browser. The Google server sends different CSS code to different browsers, and your code breaks this. Moreover, there is no guarantee that the URLs will keep working. URLs like
http://themes.googleusercontent.com/static/fonts/chivo/v4/uOXSiKkEygwkvR4cgUzOz_esZW2xOQ-xsNqO47m55DA.woff should not be expected to be stable, and Google has made no statement about supporting the use of such URLs.
You can proceed with the rip-off strategy, with its drawbacks, by simply viewing, in your browser, the CSS code of a page. For example, on Firefox, you could use the Web Developer Extension, which has a command for viewing all CSS files for a page. Then you would copy the content of the relevant CSS file.
A better approach—assuming you don’t want to use fonts as hosted by Google—is to download the font files from Google (the Google Web Fonts pages have an interface for that, too, though they keep telling you don’t need to use it) and then generate the various font formats and a CSS file e.g. with FontSquirrel WebFont Generator. The results may differ from those you get by using Google-hosted fonts; Google does not disclose exactly how their font files have been generated.
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!