I'm using the import thing in my CSS, like this
#import url(http://fonts.googleapis.com/css?family=Kite+One);
But the font doesn't load all the time. I'm still working on the CSS and refreshing periodically. Is it because of that? Is there any way to fix this?
Instead of #import, you should add a link to your page by..
<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'>
Then, add the font under the body element in your stylesheet using font-family.
For Instance,
body{font-family: 'Kite One', sans-serif;}
For further doubts, refer here.
It should work now.
If you are having issues with Web fonts, you need to take a look at this
Web Font Loader
The Web Font Loader is a JavaScript library that gives you more control over font loading than the Google Fonts API provides. The Web Font Loader also lets you use multiple web font providers. It was co-developed by Google and Typekit.
Related
I have issue to get a #font-face css custom URL working for my wordpress theme. This is my setting:
Did I do correct if yes why the font doesn't work?
If your site runs on HTTPS you must make sure the font does too. Otherwise it will be considered a security risk and then blocked (see the developer console (press F12) in your browser for such a message).
Add to the head section of web page
<link href="http://db.onlinewebfonts.com/c/73e731edac53f3db38b78336dff84fb2?family=Graphik+Web+Extralight" rel="stylesheet" type="text/css"/>
or, Using #import CSS directive, put the following line in add to your css file
#import url(http://db.onlinewebfonts.com/c/73e731edac53f3db38b78336dff84fb2?family=Graphik+Web+Extralight);
and write this font wherever you need it.
font-family: "Graphik Web Extralight";
I have to use font awesome in my Web, and I found that I have 2 ways to implements Font Awesome.
I want to work with 5.0.1 version, I realized that using ALL.CSS allows me to use Font-awesome in classes with: AFTER in CSS, but beyond that I do not know what the difference is, and what each one is used for, and another question, when I should use both.
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>
I hope to use the lightest font-awesome to implement
all.css is the font version of FontAwesome.
When you need the SVG font, you have to use js.css version.
More detail can be found on their website
Choose the javaScript (.js) OR the css (.css) version, not both.
.js : Retrieves the <i> tags with class name fa and replaces them with the code from an svg image. This is a good option if you don't have a lot of Font Awesome icons on your web page.
.css : Loads the Font Awesome font family (for example v5.0.1 = 37.78 kB). This is a good option when you have a large number of icons on your web page.
If I download and use this font on my web page, will it be able to render correctly on all browsers? I have checked on Google Chrome and it is not on the list of default fonts installed.
If not, is there an alternative that can be used so my web page will be able to render properly on all the browsers and operating systems?
You need to include a web-font in order to ensure your page renders the same on all browsers. A good repository of web-fonts can be found here:
http://www.google.com/fonts/
https://edgewebfonts.adobe.com/
If you own a licence which permits you to use the font on a website, you can use the following converter to change your font into a web format
http://www.fontsquirrel.com/tools/webfont-generator
An example of including and using a web-font :
HTML
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
CSS
body {
font-family: 'Open Sans', sans-serif;
}
I'm using josefin sans font from Google fonts. It looks crisp and sharp on their website and consistently so for all browsers. But when I import the fonts to my site via linking to provided css file , they look thin and blurry. I know about some fixes you can do, but they don't work consistently. why does this happen? Does putting these fonts locally help ?
Each font (or almost each) hash a few "sub-fonts" if you will which are slight variations of the original font. Make sure you select the one you really want. Look at the variations:
Josefin Sans
Did you make sure to include all of the needed font files?
Your CSS link should look something like this:
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600' rel='stylesheet' type='text/css'>
I noticed that when my web page was loading, all of the CSS files loaded first, then the fonts after all of those were done. Is there a way to make the fonts start loading at the same time as the stylesheets?
I'm using #font-face with a url. Would encoding the font in the stylesheet solve this problem?
i haven't experienced this kind of scenario of yours..i'am fond of using embedded fonts on my webpages..i would like to share what i did as what i see to make them synch on web page load..i have a font.css where i embed all the fonts i needed like this:
#charset "utf-8";
/* CSS Document for Fonts :)*/
#font-face{
font-family: trajan;
src:url(../fonts/TrajanPro-Regular.otf);
}
and the url resides on the directory inside the web app..i just link this to the web page then use the defined font on other css directly..hope i got your point and explained the right thing..thank you