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;
}
Related
Having a difficult time trying to get the proper .ttf file from the font family and set-up into my website.
https://freefontsdownload.net/free-futura_bk_bt-font-73014.htm
body {
font-family: Algerian ;
}
can i know what is the font-family for the link i provided ? ( does not wanted to download and save it into my server )
You can directly import fonts that can be found on Google Fonts
with tags without needed to download and serves the font files locally. However, there are also fonts that are not available on Google Fonts. For those fonts, you can only download and serve it locally on server there's no way to escape. Or you may try to search and see is there anyone who have the font files on their server and then directly use theirs', but I can say most probably you wont be able to use as you will be blocked by CORS (Cross-Origin Resource Sharing).
It's actually quite simple to setup fonts. After you downloaded the font files, normally there will be font files (eot, ttf, svg, woff...) and a CSS file, just put the font files somewhere on your server (prefer on root folder named "fonts"). Then open the CSS and edit the source to the directory that you store your font files ealier. url("../fonts/your-font.ttf")
simply go onsite of google font choose font then copy meta tag then use font family.
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
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;
}
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.
Hey I have my site set up on a server but I can't get certain fonts to show up. It will just all be 'times new roman' even though I transferred the .ttf files. Is there any way to fix this. The two fonts are 'abeatbyKai' and 'OptimusPrincepsSemiBold'
Fonts are usually on your client, not the server. You are trying to do embedded fonts.
You can also send them to the client using the #font-face declarations on your css files.