How do I add octicons as font similar to the way atom did it?
Whilst inspecting the atom codebase I discovered that they are using the octicon icon set as font (font-family: 'Octicons Regular' & content: "\f0a4"). How would I implement the set in such a way to my own project? Is there a public release?
The following picture is a screenshot of the atom src showing the styles. (Ctrl+Shift+I)
There are no available CDNs for Octicons Regular so you have to get your own WebFontkit. Then you have to add the fonts using #font-face parameter.
Follow the below steps to add custom fonts to your HTML:-
1. Download the Octicons font:- The Octicons Regular fonts are available in this link. Download the TrueType Font file format (.ttf).
2. Create a WebFont Kit:- Upload the downloaded (.ttf) file to WebFontkit Generator.. Then download the optimal WebFontkit.
3. Extract and Upload the font files to your hosted site:- Edit the stylesheet.css file to update the url. For instance if you have url like, www.example.com. So your .css file after update woluld look like:-
#font-face {
font-family: "Octicons";
src: url("https://example.com/css/fonts/Octicons.woff") format("woff"),
url("https://example.com/css/fonts/Octicons.woff2") format("woff2")
}
4. Use Octicons font in your CSS declarations:- As you have added css fonts to your site you can use this in your CSS declarations. For e.g,
p {
font-family: Octicons;
font-weight:normal;
font-style:normal;
}
Related
I am able to use all the fonts that are available in google api.
But how to use the fonts like colorpop and aileron which are not in google api.
how to use these fonts while designing in html and css.
The same you use google fonts. The only difference you need to download locally the font.
First you should download the requre font and after you can import that font to your css code
You can download them locally, place them in your project, then
#font-face {
font-family: colorpop;
src: url(colorpop.woff);
}
make sure you get your source path right, thats it, easy huh?
then in your css use that font-family
.myclass {
font-family: colorpop;
}
I am using Nunito Sans for the English version of a website and saw here: https://localfonts.eu/?s=Nunito+Sans&post_type=product
that there is also a Bulgarian version of the font, which is exactly what I need.
I tried downloading and adding it into my project folder.
#font-face {
font-family: NunitoSans;
src: url('fonts/NunitoSans-Light.ttf');
}
body {
font-family: NunitoSans;
}
Unfortunately that did not have any effect.
Replace the existing source URL with the new URL you created by
uploading each file.
By default, the source URL location is set within the downloaded Web
Font Kit. It needs to be replaced by the location on your server.
Ref:
https://www.pagecloud.com/blog/how-to-add-custom-fonts-to-any-website
I'm hosting a pre-made theme on GitHub pages and generated with Jekyll. The theme works properly in localhost, but the fonts do not display correctly on the actual site hosted on GitHub.
Following the suggestion on this post I've changed the #import line in the style.css file to the following:
#import url("//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,800,800italic");
Which, for the user in the aforementioned post, seemed to have solved the problem but for my page the wrong font is still used. Thanks in advance for any help.
HTTPS request or external link could be block from Github
But, you can download fonts from Google Font website (on the right) :
After you should be able to upload fonts to Github and easily call your font from your CSS (same folder)
#font-face {
font-family: "My Font";
font-weight: bold;
src: url('myfont.ttf');
}
(or url(github.com/link/to/myfont.ttf))
This link will show you how to properly import custom font in Github Pages :
Adding custom fonts to GitHub pages
I changed bower.json file to install FontAwesome like below and run npm install.
It installed FontAwesome 4.3.0.
I added the font-awesome.css by using confg/env/all.js. In the browser I can see the font-awesome.css has added to the html. But I can not see fonts on the web page. By inspecting element I could not found any font loaded.
Fonts are already on fonts folder of font-awesome in my source.
Since I can see the fonts exist in your project structure this appears to be an issue with the font path.
As you can see in the first screenshot the font path is pointed to:
#font-face {
src: url ('../fonts/fontawesome-webfont.eot
however if you look at your project structure the fonts actually exist in the following location:
#font-face {
src: url ('../fontawesome/fonts/fontawesome-webfont.eot
You will need to update the font path in your css stylesheet to "../fontawesome/fonts" in order for the font resources to be located and loaded into the browser.
I'm developing an extension for Google Chrome. I want to use custom fonts in my extension. I have declared a #font-face rule in my stylesheet like this:
#font-face {
font-family: "Anonymous Pro";
src: url("../assets/fonts/Anonymous-Pro/Anonymous-Pro-700.ttf");
}
But, this doesn't seem to work. I get an error like this:
GET chrome-extension://klcdnidgljemjhocdlalimcigcfmlbbk/assets/fonts/Anonymous-Pro/Anonymous-Pro-700.ttf net::ERR_FILE_NOT_FOUND
Do I need to set any permissions in my manifest file to use custom fonts?
Please help.
It's likely that the font doesn't exist in the set location. Recheck your URL
Here is a much detailed answer on Packaging a font with a Google Chrome extension.