Using canvas to generate text for some Trading Cards (Its a community project)
And I needed the Andy Font. However there are no stable web serving locations.
So I went with github. I placed all my font formats inside this repository folder:
https://github.com/FunctFlow/TerrariaTradingCards/tree/master/andy%20font%20family
Then I used this font-font inside of my project:
#font-face {
font-family: "Andy";
src: url("https://github.com/FunctFlow/TerrariaTradingCards/raw/master/andy%20font%20family/Andy-Bold.eot");
src: url("https://github.com/FunctFlow/TerrariaTradingCards/raw/master/andy%20font%20family/Andy-Bold.eot?#iefix")
format("embedded-opentype"),
url("https://github.com/FunctFlow/TerrariaTradingCards/raw/master/andy%20font%20family/Andy-Bold.woff2")
format("woff2"),
url("https://github.com/FunctFlow/TerrariaTradingCards/raw/master/andy%20font%20family/Andy-Bold.woff")
format("woff"),
url("https://github.com/FunctFlow/TerrariaTradingCards/raw/master/andy%20font%20family/Andy-Bold.ttf")
format("truetype");
font-weight: bold;
font-style: normal;
}
However, my project does NOT render the andy font, as you can see in this codepen: https://codepen.io/SkylerSpark/pen/bGVBpmj
I love how solutions always appear minutes after Ive given up and come here.
Basically, Github serves the wrong filetype headers, and the website cant recognize the font-formats.
So you cannot use Github for font formats, similarly to how you cant use it to host Javascript or CSS or whatever else you need to reference through http.
The best solution I can think of is to use a tool like jsDelivr to reference the fonts. As seen here: JsDelivr Github
And using a link like this:
https://cdn.jsdelivr.net/gh/FunctFlow/TerrariaTradingCards#master/andy%20font%20family/Andy-Bold.ttf
My fonts now render successfully
I am working on a website on which I want to apply the following fonts:
1. Fonte_Nexa-TTF
2. Fonte_Nexa
I have placed the above fonts in the css/fonts folder as shown below in an image:
Inside Fonte_Nexa-TTF directory, I have the following fonts:
In the CSS, I have placed the following codes on the top but it doesn't seem to work.
#font-face {
font-family:"Fonte Nexea";
src:
url("fonts/Fonte_Nexa-TTF") format("truetype"),
url("fonts/Fonte_Nexa") format("opentype");
}
Problem Statement:
I am wondering what changes I need to make in the CSS codes above so that it start working. Also, at console I am getting the following error:
It looks like your references are for directories instead of the fonts themselves. Try adding the file names for the specific font file within the directory and see if that makes a difference.
#font-face {
font-family:"Fonte Nexea";
src:
url("fonts/Fonte_Nexa-TTF/fontname.ttf") format("truetype"),
url("fonts/Fonte_Nexa/fontname.otf") format("opentype");
}
I'm very confused about LESS and in particular, the Font Awesome local files in a template I'm using.
I apparently have Font Awesome 4.3 and I've just downloaded 4.7. Of the files common to my project and the downloaded zip file, I'v overwritten the fonts and the less folders. Shouldn't that be enough to have my project use the latest icon set? - It's not as the old icons are working, but the new ones are not.
If I'm not recompiling less (do I even have to???), what else would I need to look for to get the new icons working?
EDIT:
In the main css file for the template, I've found some code related to Font Awesome:
#font-face {
font-family: 'FontAwesome';
src: url('dev-plugins/fonts/fontawesome-webfont.eot?v=4.3.0');
src: url('dev-plugins/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('dev-plugins/fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('dev-plugins/fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('dev-plugins/fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('dev-plugins/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
In that same file is reference to the FA icons - example:
.fa-times-circle-o:before {
content: "\f05c";
}
.fa-check-circle-o:before {
content: "\f05d";
}
So am now assuming my whole template needs recompiling?
I've worked it out by doing the following:
access the source files for the template
replace the Font Awesome LESS files with the latest version from their zip download
replace the Font Awesome font files with the latest
with the new files in place, re compile the main CSS LESS file
overwrite the outputted CSS with the one in my project
I'm using using Windows so I used WinLess to compile the LESS file.
So the answer to my question is: yes - I did need to recompile some LESS because the Font Awesome details are embedded (for reasons beyond me) in the main CSS file.
In my Node.js app I use bootstrap-sass and Compass. Not gulp-compass and tasks, but exactly Compass, I have Compass' config.rb file in app's root dir. I compile my assets with these commands:
$ compass watch
$ compass compile
And I don't understand how to include bootstrap's fonts on the page to enable glyphicons. Fonts are stored in bower_components\bootstrap-sass\assets\fonts\bootstrap. Bootstrap-sass variables for fonts are as follows:
$bootstrap-sass-asset-helper: false !default;
//== Iconography
//
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
//** Load fonts from this directory.
// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
// $icon-font-path: 'fonts/';
//** File name for all font files.
$icon-font-name: "glyphicons-halflings-regular" !default;
//** Element ID within SVG icon file.
$icon-font-svg-id: "glyphicons_halflingsregular" !default;
And Compass compiles it into this css:
#font-face {
font-family: 'Glyphicons Halflings';
src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot");
src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"), url("../fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}
And I don't have Glyphicons on the page because fonts are now found in ../fonts/bootstrap/glyphicons-halflings-regular.eot.
How to deal with fonts? Do I have to manually move fonts from
bower_components\bootstrap-sass\assets\fonts\bootstrap
to my
public/css/fonts
this is where my compiled assets live and where a server fetches them from. And this is what I do now - I manually moved fronts to public/css/fonts and had to manually type different #font-face:
#font-face {
font-family: 'Glyphicons Halflings';
src: url("fonts/glyphicons-halflings-regular.eot");
src: url("fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("fonts/glyphicons-halflings-regular.woff") format("woff"), url("fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}
But is it the right way? Then why Compass is needed if I have to manually deal with fonts and paths?
There are several Compass options for fonts in config.rb. How to use them to make Compass care about fonts and paths? I tried these options but it seems they do not work, I didn't noticed any changes in scss => css compilation, whatever I set them. And documentation is quite miserable.
fonts_dir =
fonts_path =
http_fonts_path =
http_fonts_dir =
I think you may well find your answer here Bootstrap - Sass: relative glyphicons icon path
The TLDR version is that you should try uncommenting the relative_assets line from your config.rb
I have a template and it has a reference to a Google font like this:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>
How can I download it and set it up to use in my pages which are running offline all the time?
Check out google webfonts helper
It lets you download every web font of Google and suggests css code for the implementation.
This tool also allows you to simply download all formats at once without the hassle.
Ever wanted to know where Google hosts their webfonts? This service might be handy if you want to download all .eot, .woff, .woff2, .svg, .ttf files of a font variant directly from google (normally your User-Agent would determine the best format).
Also take a look at their Github page.
Just go to Google Fonts - http://www.google.com/fonts/ , add the font you like to your collection, and press the download button. And then just use the #fontface to connect this font to your web page.
Btw, if you open the link you are using, you'll see an example of using #fontface
http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300
For an example
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
Just change the url address to the local link on the font file, you've downloaded.
You can do it even easier.
Just download the file, you've linked:
http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300
Name it opensans.css or so.
Then just change the links in url() to your path to font files.
And then replace your example string with:
<link href='opensans.css' rel='stylesheet' type='text/css'>
Found a step-by-step way to achieve this (for 1 font):
(as of Sep-9 2013)
Choose your font at http://www.google.com/fonts
Add the desired one to your collection using "Add to collection" blue button
Click the "See all styles" button near "Remove from collection" button and make sure that you have selected other styles you may also need such as 'bold'...
Click the 'Use' tab button on bottom right of the page
Click the download button on top with a down arrow image
Click on "zip file" on the the popup message that appears
Click "Close" button on the popup
Slowly scroll the page until you see the 3 tabs "Standrd|#import|Javascript"
Click "#import" tab
Select and copy the url between 'url(' and ')'
Copy it on address bar in a new tab and go there
Do "File > Save page as..." and name it "desiredfontname.css" (replace accordingly)
Decompress the fonts .zip file you downloaded (.ttf should be extracted)
Go to "http://ttf2woff.com/" and convert any .ttf extracted from zip to .woff
Edit desiredfontname.css and replace any url within it [between 'url(' and ')'] with the corresponding converted .woff file you got on ttf2woff.com; path you write should be according to your server doc_root
Save the file and move it at its final place and write the corresponding <link/> CSS tag to import these in your HTML page
From now, refer to this font by its font-family name in your styles
That's it. Cause I had the same problem and the solution on top did not work for me.
The other answers are not wrong, but I found this to be the fastest way.
Download the zip file from Google fonts and unzip it.
Upload the font files 3 at a time to http://www.fontsquirrel.com/tools/webfont-generator
Download the results.
Results contain all font formats: woff, svg, ttf, eot.
AND as an added bonus they generate the css file for you too!
If you'd like to explicitly declare your package dependencies or automate the download, you can add a npm package to pull in google fonts and serve locally.
Fontsource
Fontsource allows you to:
Self-host Open Source fonts in neatly bundled NPM packages.
You can search npm for scope:fontsource <typefacename> to browse the available fonts like #fontsource/roboto or #fontsource/open-sans and install like this:
$ npm install #fontsource/roboto --save
$ npm install #fontsource/open-sans --save
Font Downloaders
For a more generic use case, there are several npm packages that will deliver fonts in two steps, first by installing the library, and then by pointing it to the font name and options you'd like to include.
Google Fonts Webpack Plugin
Google Fonts Offline
Google Fonts
Get Google Fonts
Further Reading:
How to host material icons offline?
Using offline Material icons and Roboto font in Electron app
Archived: Typefaces
3 steps:
Download your custom font on Goole Fonts and down load .css file
ex: Download http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300
and save as example.css
Open file you download (example.css). Now you must download all font-face file and save them on fonts directory.
Edit example.css: replace all font-face file to your .css download
Ex:
#font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
Look at src: -> url. Download http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 and save to fonts directory. After that change url to all your downloaded file. Now it will be look like
#font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
** Download all fonts contain .css file
Hope it will help u
When using Google Fonts, your workflow is divided in 3 steps : "Select", "Customize", "Embed". If you look closely, at the right end of the "Use" page, there is a little arrow which allows you to download the font currently in your collection.
After that, and once the font is installed on your system, you just have to use it like any other regular font using the font-family CSS directive.
Essentially you are including the font into your project.
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');
1)Go at google fonts
2)select your font and it's a style
3)then you will get a link tag, side of link click on import
copy its link present inside the URL(' here ') and paste it on the browser search bar.
And then you will get something like this
and then download it and save it where your project files are there!
7)and then include it in your HTML link tag or import it in your CSS file
(https://i.stack.imgur.com/NvJ60.jpg)
(https://i.stack.imgur.com/XwK0l.jpg)
8)and then use ton family mentioned in google fonts
I followed duydb's answer to produce the python code below that automates this process.
import requests
with open("example.css", "r") as f:
text = f.read()
urls = re.findall(r'(https?://[^\)]+)', text)
for url in urls:
filename = url.split("/")[-1]
r = requests.get(url)
with open("./fonts/" + filename, "wb") as f:
f.write(r.content)
text = text.replace(url, "/fonts/" + filename)
with open("example.css", "w") as f:
f.write(text)
Hope this helps with some of the copy-paste death.
You need to download the font and reference it locally.
Download the CSS from the link you posted, then download all of the WOFF files and (if needed) convert them to TTF.
Then change the CSS from the link you posted to include the fonts locally.
From
url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)
To
url(/path/to/font/font.woff)
Voila! There might be some more you need to do but the above is the basics. This article explains a little better.
just download the font and extract it in a folder. then link that font.
the below code worked for me properly.
body {
color: #000;
font-family:'Open Sans';
src:url(../../font/Open_Sans/OpenSans-Light.ttf);
}