for example i am using Freckle Face
http://www.google.com/fonts#QuickUsePlace:quickUse/Family:
Quick Use: Freckle Face
1. Choose the styles you want:
Impact on page load time
Tip: Using many font styles can slow down your webpage, so only select the font styles that you actually need on your webpage.
2. Choose the character sets you want:
Tip: If you choose only the languages that you need, you'll help prevent slowness on your webpage.
Latin (latin)
Latin Extended (latin-ext)
3. Add this code to your website:
Instructions: To embed your Collection into your web page, copy the code as the first element in the <head> of your HTML document.
<link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>
4. Integrate the fonts into your CSS:
The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:
font-family: 'Freckle Face', cursive;
Instructions: Add the font name to your CSS styles just as you'd do normally with any other font.
Example:
h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }
example :
<head>
<meta charset='UTF-8' />
<link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="nav">
<a href="#contact">Contact</a> <span style="word-spacing:normal; color:white; font-family: 'Freckle Face', cursive;, arial, serif; font-size:20px;"><--Click a link to see this page in action!</span>
</div>
</div>
</body>
Saturday 11 January 2014
How to add a custom font to Rails application by using google fonts
Thursday 9 January 2014
Introspected tunnels to localhost for rails application
About ngrok
ngrok creates a tunnel from the public internet (http://subdomain.ngrok.com) to a port on your local machine. You can give this URL to anyone to allow them to try out a web site you're developing without doing any deployment.
step 1
Download and Installation
For linux download if from below link and place it in required place
https://dl.ngrok.com/linux_386/ngrok.zip(https://ngrok.com/)
step 2
On Linux Unzip it
$ unzip /path/to/ngrok.zip
step 3
Run it!
$ ./ngrok -help
$ ./ngrok 3000
for example, if you are using port number as 3000
In your terminal you will see some thing like this
Tunnel Status online
Version ********
Forwarding http://*********.ngrok.com -> 127.0.0.1:3000
Forwarding https://********.ngrok.com -> 127.0.0.1:3000
Web Interface **************
# Conn **
Avg Conn Time 7285.98ms
HTTP Requests
-------------
*******************************
*******************************
step 4
By using this link you can give this URL to anyone to allow them to try out a web site you're developing without doing any deployment.
https://********.ngrok.com -> 127.0.0.1:3000
done.......
Wednesday 8 January 2014
How to add a custom font to Rails application
Hi all,
I came accross this way of adding custom font to rails application. If u have another way of adding plz comment down.
step 1
select font type and download
for example
go to http://www.dafont.com
select font and download font
step 2
go to http://www.fontsquirrel.com/
select - web font generator - select font u download(unzip file downloaded from http://www.dafont.com).
step 3
This site wil generate another zip which contain all required for that font style.
From that zip, unzip and open css, copy css into your html or css file of that html.
step 4
(http://stackoverflow.com/questions/12329137/how-to-add-a-custom-font-to-rails-app)
config/application.rb
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/app/assets/fonts"
step 5
example
<html lang="en">
<head>
<style>
@font-face {
font-family: 'a_sensible_armadilloregular';
src: url('/assets/para/a_sensible_armadillo-webfont.eot');
src: url('/assets/para/a_sensible_armadillo-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/para/a_sensible_armadillo-webfont.woff') format('woff'),
url('/assets/para/a_sensible_armadillo-webfont.ttf') format('truetype'),
url('/assets/para/a_sensible_armadillo-webfont.svg#a_sensible_armadilloregular') format('svg');
font-weight: normal;
font-style: normal;
}
.content p {
font-family: 'a_sensible_armadilloregular';
font-size: 42px;
}
</style>
</head>
<body>
<div class="content">
<p>sample text</p>
</div>
</body>
</html>
Subscribe to:
Posts (Atom)