I've got a couple fonts I'd like to use in my RoR application, but their formats are mainly .ttf and .otf, among others. How would I go about embedding these files in my Rails app? Namely, once I put them in my assets folder, what exactly is the syntax for me to embed them in my CSS and/or LESS files?
EDIT:
Here's the code I have for now:
#font-face {
font-family: Vow;
src: url('/assets/Vow.otf');
}
h1 {
font-family: Vow;
text-align: center;
}
It doesn't seem to be working for me. The output in the Rails console is something along the lines of:
ActionController::RoutingError (No route matches [GET] "/assets/Vow.otf")
And examining the page with Firebug says:
downloadable font: download failed (font-family: "Vow" style:normal weight:normal stretch:normal src index:0): status=2147746065
source: http://localhost:3000/assets/Vow.otf
Checkout http://www.css3.info/preview/web-fonts-with-font-face/
Larger example, assuming they're resolved directly under the assets dir
#font-face {
font-family: 'Nokia Pure Headline';
src: url('/assets/nokiapureheadlinerg-webfont.eot');
src: url('/assets/nokiapureheadlinerg-webfont.eot?iefix') format('eot'),
url('/assets/nokiapureheadlinerg-webfont.woff') format('woff'),
url('/assets/nokiapureheadlinerg-webfont.ttf') format('truetype'),
url('/assets/nokiapureheadlinerg-webfont.svg#webfont3AwWkQXK') format('svg');
font-weight: normal;
font-style: normal;
}
Im sorry I dont know LESS
Also for the config of the assets pipeline to have the contents of assets/fonts available under we use:
# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << Rails.root.join('/app/assets/fonts')
Adding a custom font to Rails application
Select font type and download
for example
go to http://www.dafont.com
select font and download font
Generate font files
go to http://www.fontsquirrel.com/
select - web font generator - select font u download(unzip file downloaded from http://www.dafont.com).
Retrieve the font files
This site will 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
Add the font to your rails app
(How to add a custom font to Rails app?)
config/application.rb
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/app/assets/fonts"
Add it to the view:
<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>
add a custom font to Rails application by using google fonts
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 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; }
<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">
Contact <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>
Related
i would like to use two google fonts, but my fear is that adding in this way:
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
could be slower (in performance) than download fonts in collection...
So i download two fonts in collection, but i have doubt how i could to implement in my website...
Maybe i just have to insert the two collections in the css folder and than add in head
<link href='https://path/css/font/ ???????' rel='stylesheet' type='text/css'>
but i don't know what file i have to link in path... For example when i download PT Sans in collection, in this folder i have these files:
I hope you can help me understand more..
Thanks a lot and sorry for my english
Simply call your fonts in css file.
#font-face {
font-family: myFirstFont;
src: url(font1.woff); /* specify the path of your font location*/
}
Repeat this for next fonts.
#font-face {
font-family: myFirstFont;
src: url(font2.woff); /* specify the path of your font location*/
}
You do need even more font files.
If you just open the file from the Google Server...
https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic
... you see how it is done.
You link the font files from the CSS file - not from the link element.
Assuming that you want your fonts loaded locally from in internal folder than an external source:
Add the folliowing to your code in a <style> tag:
#font-face {
font-family: 'PT_Sans';
font-style: Regular;
src: url('../fonts/PT_Sans-Web-Bold.ttf'); /* IE9 Compat Modes */
src: local('PT Sans'), local('PT_Sans'),
url('../fonts/PT_Sans-Web-Regular.ttf') format('truetype')
}
Or you can reference it externally in a CSS file.
enter code hereI am working on a Sitefinity 3.7 site and the template I'm building requires some custom fonts from the 'opensans' font family. I created a folder called "Fonts" inside the theme I made for this template and put the .svg, .eot, .tff, and .woff files in there. In the style sheet, I have tried setting up some of the opensans fonts I will be using but they don't appear to be working--I just see standard Arial/Verdana fonts in the browser.
#font-face {
font-family: 'open_sansregular';
src: url('/App_Themes/ResCare/Fonts/opensans-regular-webfont.eot');
src: url('/App_Themes/ResCare/Fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/App_Themes/ResCare/Fonts/opensans-regular-webfont.woff') format('woff'),
url('/App_Themes/ResCare/Fonts/opensans-regular-webfont.ttf') format('truetype'),
url('/App_Themes/ResCare/Fonts/opensans-regular-webfont.svg#opensansregular') format('svg');
font-weight: normal;
font-style: normal;
}
I figure I must be doing this wrong but I'm not sure what's wrong. I've never tried to add in custom fonts into a Sitefinity site before, and I know this is an old site, but I can't help the latter.
Is there a way to get these opensans fonts to work for my template?
Add this cdn from google fonts in your header and apply the css to any element you wish to have Open Sans as the font.
HTML
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
CSS
font-family: 'Open Sans', sans-serif;
Here is the original link so you can edit the information and view the documentation if you wish: http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
The font was working across my site but then stopped working on all but the homepage (using Chrome). I checked it out in Firefox and the font isn't working at all. I uploaded the font to my root folder using the Font Squirrel web font generator.
Font Face
#font-face {
font-family: 'antonioregular';
src: url('antonio-regular-webfont.eot');
src: url('antonio-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('antonio-regular-webfont.woff') format('woff'),
url('antonio-regular-webfont.ttf') format('truetype'),
url('antonio-regular-webfont.svg#antonioregular') format('svg');
font-weight: normal;
font-style: normal;
}
HTML
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
Heading
h6 {
font-family: 'antonioregular', 'Spinnaker', sans-serif;
font-weight: 400;
line-height: 1.2;
margin: 0 0 16px;
}
The file you are loading your fonts on has to be in the same directory, because you do not have any path associated with the font, just the file. Since you say you uploaded it to root, this would explain why only the homepage is getting it.
Provide a relative or absolute path to the files and it should get picked up everywhere.
Do those URLs actually point to your font? If you are at http://example.com/foo/bar it will be looking for the font in your foo folder. If the font is in the root, this will fail. Perhaps you meant to include path information in the URL, in your case most likely src: url('/antonio-regular-webfont.eot');.
Note: You should be able to use a browser's developer tools to see the requests being made, and the likely 404 returned. This should evoke the "that's not the right location, what is going on?" response.
I am using Google Web Fonts inside my CSS stylesheet like below
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');}
but when my website goes from secured page, I am getting "only secured content is being displayed". I used Google Chrome Resource Inspector and it pointed above was the issue
How can I add a secured link to the Google Web font in my CSS file
Thanks
You don't need #font-face to use a Google Font.
Just add this in your HTML code:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Then add the font name in your CSS. Example:
body{font-family: 'Open Sans', sans-serif;}
Bit old but it came up on a related search so it may be useful to someone.
I personally put the #font-face declaration in my stylesheets rather than requesting it in the head. Just remove the 'http:' like below, should solve the problem.
url(//themes.googleusercontent.com/static/fonts/opensans/...) format('woff');
Why not use #import statement?
At the top of your css file:
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
My website is not showing the appropriate font, PT Sans.ttc. I checked on other browsers and it works fine.
www.farmap-ux.com. Below is CSS code.
#font-face
{
font-family: PT Sans;
font-family: font-family: 'PT Sans', sans-serif;
src: url("http://fonts.googleapis.com/css?family=PT+Sans")
}
So it works on everything like I said (Chrome, Safari, even Opera!) Any ideas? I've tried to find .woff files for the font but I don't think it's in my Font Book.
Maybe it's because your #font-face declaration isn't valid at all. It should be something like:
#font-face
{
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v4/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
However, it's even better to use the CSS file provided by google:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans">
If you want to stick to a CSS import use
#import url(http://fonts.googleapis.com/css?family=PT+Sans);
You should really check your css! The syntaxe is miles away from correct.
Also, http://fonts.googleapis.com/css?family=PT+Sans is already a css file!
what you should do is import is put it directly into the <head> your html using the link tag.
Have a look at this example: http://www.w3schools.com/tags/tag_link.asp, or just add the following to your html file as said before.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans">
Following the directions at Google Webfonts should fix your problem.
First, make sure you're including the Google CSS necessary to reference the font files. You have the option to include a LINK tag in your HTML, a #import directive in your CSS, or some Javascript. I recommend the LINK tag for maximum browser compatibility:
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
When adding this CSS to your site, Google will automatically determine the correct font type to use for your browser. Not all browsers use WOFF files. Older versions of IE use EOT files, some browsers prefer SVG or TTF. Google is able to sniff for the browser type and modify the included CSS as necessary.
After Google's CSS is included, you only have to reference the font family in your CSS where you want the font to appear.
font-family: 'PT Sans', sans-serif;
That's the only CSS necessary. Remove all the other CSS you linked… as mentioned in the other answers your CSS has some errors.
Try:
#font-face {
font-family: 'PT Sans';
font-weight: normal;
src: url("http://fonts.googleapis.com/css?family=PT+Sans");
}