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";
Related
I want to use a custom font on my website. I am using the custom font on one CSS sheet and I have already specified it with
#font-face{
}
I'm using the same font on another CSS page. Do I have one again specify the font with the #font-face on the other CSS page? Or is specifying it on just one styling sheet enough?
There is no such thing as "CSS pages". There are HTML pages, which can use CSS stylesheets. You write a stylesheet that includes your #font-face rules as well as normal styling rule, and then include those on your HTML page using
<link rel="stylesheet" href="yourstylesheet.css">
and you add that to every HTML page that needs to load that particular set of CSS instructions. So, say you have two pages, "index.html" and "about.html", both html files need that <link...> code.
(Also note that in HTML5, there is no .../> or ...></link> at the end of that)
Actually we have one global.css style sheet in which we are using #import url("http://fonts.net/sample.css?type=cssandid=123") for fonts.
But it's creating issues in Bundling & minification so I got following solutions:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
and I replace #import with element
<link rel='stylesheet' type='text/css' href='http://fonts.net/sample.css?type=cssandid=123'>
even after this I'm getting CSS errors as I checked in CSS Lint(http://csslint.net/) and not getting real UI effect as with #import.
Do we have any other solutions for this?
Environment: VS2015 , MVC 5.2 , sitecore 8.1
Thanks
Hope you found the solution since you posted this question
What you can do, to avoid the #import url('yourCssUrlHere') is simply copy/paste the URL on your browser and then copy/past the CSS that is displayed.
And then simply replace the #import by the CSS you just copied.
Most of the time if the import is a font, there will be other references to .woff or .woff2 files.
Just download them and store those files somewhere on your project folder and just add their absolute link on all the url() fields.
That way, you use external fonts or stylesheets, but internally, without request them outside of your website.
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.
I've got a custom font setup on my site using #font-face in my stylesheet. It works just fine on my main page, but if I try to read the same stylesheet through another html file in a different directory, all of the styling will work fine except for the font.
The stylesheet (style.css) and font are in a /style/ directory.
The html file is in a sub-directory, and I'm reading the stylesheet using this:
<link href = "../style.css" type = "text/css" rel = "stylesheet"/>
Again, it'll use all of the styling except the custom font. Why's that?
You should always use either absolute URLs (with the full domain name and everything), or URLs relative to the domain root (/path/to/font.ttf) to prevent confusion as to whether the font is being loaded relative to the stylesheet or the document.
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