what's the easiest and most effective method for uploading fonts to a wordpress site? I have fonts on my computer I'd like to reference instead of google fonts already embedded in. wasn't sure if ftp (and in what location) or an app works best. danke.
There are several things you need to know before embedding a font in your site. I can walk you through the process here:
Make sure the font you want to upload is allowed to be on the web. Some foundries don't want their fonts embedded because people can steal them from the embedding website. Check who makes your font and what you need to do to satisfy their licensing. All Google fonts are open licenses, so you don't have to worry there.
Find the font file on your system. This is usually a .ttf or .otf file. If it is not one of those, it will be difficult to embed them correctly.
Once you have your font, you need to convert it and package it. This is easy with services like FontSquirrel. They will do all of the converting and packaging for you as well as writing the CSS to embed the fonts.
The method you are using to embed the fonts is known as #font-face. This code should be in your stylesheet. Here is a tutorial on using #font-face. Make sure when you put the code in your CSS file that the fonts are in the right directory that you are targeting in the URLs for the fonts in the stylesheet. FYI the normal stylesheet location for Wordpress themes is in your theme folder under styles.css. I believe that FontSquirrel's generated CSS puts the fonts in the same directory as the stylesheet, so they may need to be in the theme's root to work properly. Though, I would suggest putting them in a fonts folder and updating the URLs in the stylesheet.
That's it! It's a little more difficult than just adding a file, but it should work. If you have issues with spacing or lining things up, I have another answer I wrote that might help you out, there as well.
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'm using Adobe Brackets editor and I want to know how I can install common fonts such as Arial and Helvetica. I want to directly install them into my system and not just link them into my projects every time. How can I get this done?
I think you might be looking for Google Fonts. Google hosts hundreds of high-quality, free, fonts that you can use in your web project. GoogleFonts acts as a CDN, allowing your project to download the required fonts as the page is being rendered, similar to how jQuery etc operate when referenced from a CDN.
HOWEVER, you can also download and install Google's FREE, OPEN-SOURCE fonts on your local system and use them locally in your apps, including Brackets. Here is a tutorial for doing that.
How To Install Google Fonts on your Own Computer
To be complete, here are a couple of decent resources for learning how to use Google Fonts CDN-Style (not what you requested, but for future purposes):
CSS Reset - How To Use Google Fonts
W3 Schools - Use the Try It beside the font you desire
CodeCourse 3-Min Video Tutorial (if you prefer video demo)
The second reference is probably most helpful as it shows you (in their typeface) the fonts that are available, and the Try It button shows you a code example for using that font. Straight-forward and simple.
I am working on a site using the one of the twitter bootstrap templates and my JavaScript console is complaining that it is missing:
favicon.ico
ie-emulation-modes-warning.js
I downloaded all of the Bootstrap files from the Bootstrap website. What are these files and do I need them?
If so, where can I get them?
Edit: Thanks guys! Looked into Favicons and didn't realize that is what they are! So simple! lol
By default, browsers look for favicons in your site's root directory. You can use favicon generators online, which (by standard) create 16x16 pixel png-like objects that are used as your site's icon on a browser tab, etc. Just make one of those and drop it in your root directory.
If that doesn't work, you may want to use your inspector (assuming you're using chrome), right click > inspect element > console (or network), and look there to see where your template is looking for the favicon. Just drop the generated .ico file in that folder.
For the JS file, you may be able to find it online, download it, use the inspector again, and drop it wherever your browser is looking for it. This is good for performance—missing files slow roundtrip requests down.
It's something browsers look for by default. Nothing to do with Bootstrap
http://en.wikipedia.org/wiki/Favicon
I downloaded a font from dafont.com and then added it to the stylesheet for a html file that's currently just on my computer. I changed most of the buttons to use that font, but now it seems to load way slower (it used to render almost instantly in my browser) because of the custom font. Is there a way I can fix this for the files local to my computer, and will it also cause the pages to render slowly once it's actually uploaded to a website?
You can try different approaches to improve performance:
Use a local reference before checking for an online version: this will work on your computer, but you never know if a user may have installed a different font with the same name (it's improbable, but that could break your expected look-and-feel).
Use lazy load to download the font after the page has been rendered: this may not be really useful is the font that you are using is the main font on your page.
Don't include #font-face for fonts that you are not going to use: some browsers will download the fonts whether they are used or not.
If possible, use fonts hosted externally (e.g.: in Google Fonts): this would make your page faster if the font is cached from previous visits, and it takes one connection away from your host.
This may sound a bit off but: choose the fonts wisely. If you pick a beautiful font but the files are 10MB, there will be a performance impact like it or not. And related to the file size,
If possible, gzip your font files: they will weigh less, they will take less time to download.
Read more about this topic on the links:
Preventing the performance hit from custom fonts.
#font-face and performance
I downloaded the Franchise Bold Font. I know how to use it in my code, but where do I put the font files in my webserver root so that they get found and used?
the URL is: http://www.derekweathersbee.com/franchise/
To use a font on a web page it needs to be a WebFont - you can't just put a TTF file onto a webserver.
Font Squirrel offer a service to create/convert WebFonts - there's a fair bit of info on how it works there and a Google for webfonts will bring up a tonne more.
Obviously you need to rights to do convert and use the font - the font you're using appears to be free but if I were you I'd credit the creator/throw them a link somewhere!!