#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url('cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url('DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff') format('woff');
}
I downloaded the fonts from the url the google css provided so I could use it without being online. The code works when clicking the .html file and opening it in a browser. However, when I place all my files on a local webserver it does not work.
Any ideas? Keep in mind, I will not be connected to the internet.
Adam there might be various reasons for this behavior as #Kyle suggested
First i would check the url to the font-file resolves correctly. From your CSS declaration above it seems that browser will expect the file to be present in same directory where CSS exists
Second and yes google might have blocked leeching/downloading the files. Only way to check this is first use the font to be loaded from google service 'Note the size of the file' then download and check the size. If they are same they do allow download
Third webfonts need to be browser specific here is the explanation from themselves
When a browser sends a request for a Font API stylesheet (as specified
in a tag in your web page), the Font API serves a stylesheet
generated for the specific user agent making the request.
so each time your browser requests the font you are actually downloading a small CSS snippet and then the Font family from the directory
Its strange if the font works fine on computer by opening html file, but not with the localhost. Are you sure you are copying all font files and placing in the same directory? Since the file name is so complicated and long, may be you are doing some mistake with the names? Are you using same browser?
And no, There is nothing like Google does not let downloading the files. Just to make sure, I have downloaded a font (GloriaHallelujah) from google fonts and tested with following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Google font test</title>
<style type="text/css" media="screen">
#font-face {
font-family: GloriaHallelujah;
src: url('GloriaHallelujah.ttf');
}
h1 { font-family: GloriaHallelujah, helvetica, arial; }
</style>
</head>
<body>
<h1> Hello World </h1>
</body>
</html>
This work fine on desktop, as well as local host. May be you can download same font from here, place in the same directory and then test on your localhost and see.
On my Windows 7 IIS server I had to add woff in the mime types to get them to work.
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.
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.
In my webpage css file, I used a "Bangla" (Bangladeshi) unicode font - "SolaimanLipi" as font-face;
I am sure the location is correct and font name is renamed as "sol.ttf". I linked the font like this and used many place in my page as font-family:bodyf.
#font-face {
font-family:bodyf;
src: url("../font/sol.ttf");
format("opentype");
}
It's working well in my local server. But It's not working after hosting at hosting server.
What's wrong in my code or what did I miss?
Thank you.
Maybe, specifying the charset on the page with the metatag charset solve the problem.
So, try to write in your <head> tag (i think utf-8 might work for you):
<meta charset='YOUR_SET'>
Or, if you are in page before html5, you can use the long version:
<meta http-equiv='Content-Type' content='text/html; charset=YOUR_SET'>
More info on charset metatag here.
Another possibility is a problem with the hosting relative paths. Try to enter the absolute path to the font file. Write so in your CSS:
#font-face {
font-family:bodyf;
src: url("http://www.shebamcsl.com/.../font/sol.ttf") format("opentype");
}
Other possibility concerns the compatibility. Read this article to learn more about the specifics about each browser. A skeleton of a complete #font-face is the following:
#font-face {
font-family: 'bodyf';
src: url('../font/sol.eot');
src: local('body f'),
url('../font/sol.ttf') format('truetype'),
url('../font/sol.svg#font') format('svg');
}
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>
I'm using the Ubuntu font from Google Fonts:
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,300italic,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css' />
My stylesheet:
body {
font-family: 'ubuntu',arial;
}
It works, but if install a font with the same name (Ubuntu), it overrides the one from Google Fonts.
Is it possible to force the browser to use the one from Google Fonts?
The answer lies not in your code, but in Google's.
Here's part of the CSS you are requesting:
#font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: bold;
src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/0ihfXUL2emPh0ROJezvraLO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
}
Key line here is local('Ubuntu Bold'), which asks to load local file if possible.
The simplest solution is to copy all the Google's CSS, paste it in your own CSS, and modify this local name to be, for example, local('Ubuntu Bold NonExisting Name or Something Else'). Such font does not exist and will not replace font loaded by CSS.
P.S. I have not tested this myself. If 0ihfXUL2emPh0ROJezvraLO3LdcAZYWl9Si6vvxL-qU.woff URL is expiring, then you are in a tough spot. Try to see font's licence and consider hosting the font yourself, if preventing local override is a priority.