I have a wordpress theme that within one of its CSS files uses the #import function to bring google fonts I would like to replace it in a more optimal way and that fulfills the same functions ....
I leave some code to see if you can help me.
#import url (https://fonts.googleapis.com/css?family=Lato:300,400,700,900);
#import url (https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
.font_weight300 {font-weight: 300! important}
.font_weight400 {font-weight: 400! important}
I had thought of doing something like that
<link href = "https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel = "stylesheet">
but that code seems to me that it goes more in an html file for example, but this code with #import goes in a .css file so that's where my doubt goes.
how to best code for css file.
this is the right way to add a font to your project import is for importing a css file if you have the font locally you can put the address in src
see more about font-face on Mozilla Developers Network (MDN)
#font-face {
font-family: "CustomFont";
src: url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
}
and also for using important on a css property you should do this
.font_weight400 {font-weight: 400 !important}
Related
While defining a Web Font in CSS - I have noticed a small change in the way my font displays depending on which method of font definition I use:
#font-face {url('https:/https://fonts.googleapis.com/...');}
or
#import url('https:/https://fonts.googleapis.com/...')
with the #import I've got a lighter version of the font and with the #font-face method it is a bit bolder.
Can anyone tell me why this happens, what the differences between the 2 "methods" are, and which is more advisable (advantages vs disadvantages).
Usually, #font-face is used to declare fonts that were downloaded and #import is for adding another stylesheet file. I would say that it could be related to font-weights. Because #font-face is creating the font that is downloaded it may be the problem. Does the google fonts link contain the font-weights?
I'm using the following line in scss:
#import url(https://fonts.googleapis.com/css?family=Montserrat:300,700);
Which gets compiled to css without errors to... exactly the same:
#import url(https://fonts.googleapis.com/css?family=Montserrat:300,700);
But it should get compiled to:
/* vietnamese */
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
etc...
I'm using gulp sass to compile my scss, which is based on libsass. It says here that my syntax is correct. Why isn't this working?
This is in fact expected behaviour. Quoting the Sass docs:
#import takes a filename to import. By default, it looks for a Sass
file to import directly, but there are a few circumstances under which
it will compile to a CSS #import rule:
If the file’s extension is .css.
If the filename begins with http://.
If the filename is a url().
If the #import has any media queries.
In other words: Sass does not integrate the css from google fonts directly into your css file. Instead, at runtime, the css import directive will resolve the link. Google responds differently depending on your browser by the way.
I found this in a css file, but I don't understand how it works?
#import url(/t/1.css?apiType=css&projectid=8f2a6800-87fc-4721-88c2-c4395f5c2529);
#font-face{
font-family:"Gill Sans W01_n3";
src:url("/dv2/2/2cebe80c-b289-4ae0-a3b0-baa82c6c6e10.eot?d44f19a684109620e484157aa090e818164b583323d003aed8738c486c8f2be5451a12b579fdb3b84f52c077b1b063612babe72c6cf13ea84e96a257fd04f94aa22a2e2c342ce62d6867611914a6d8b6aea98add427c897e37055b90046e50504037af165c645dd51b4dc26ecc8321d6196fc3e54c1a35c2ef7a466d10159a3ee117d8214a55b23616&projectId=8f2a6800-87fc-4721-88c2-c4395f5c2529") format("eot");
}
Basically, those CSS statements are creating a #font-face. So, the src:url is just linking to a file that contains the 'eot' of the font. Without the URL, the CSS does not know what the font looks like.
I'm trying to use Google Font on a page. In my html I used:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
And in my CSS:
#import url('http://fonts.googleapis.com/css?family=Open+Sans');
Still whenI use "Open Sans" with the font-family attribute it stays on Arial.
body
{
background-color: #F1F1F2;
font-family: "Open Sans", Arial;
}
Using google font on any webpage is very easy and you can load the fonts asynchronously.
If you don't use the direct code that Google font delivers and you simply load the following url:
http://fonts.googleapis.com/css?family=Open+Sans:400,600
You'd be represented the source code (CSS).
Now, copy and paste the displayed code in the CSS source of your website.
You can then use your selected google font(s) on your webpages using the following:
body
{
background-color: #F1F1F2;
font-family: 'Open Sans', Arial;
}
That's enough and it will work.
I have a hunch that your bootstrap is being loaded after the CSS for your Google font. Find the point that you are importing this CSS:
#import "bootstrap-sprockets";
#import "bootstrap";
Then add your Google code AFTER that to make sure that it is not being overwritten by the bootstrap.
Good Luck!
First of all, you dont need to do it twice! any one kind of FONT ASSOCIATION is enough !!
Warning that overuse of #import may cause a overhead!
Bootstrap(if you have used it) usually overrides the font with -> font-family:"Helvetica Neue",Helvetica,Arial,sans-serif
Working Demo -> Click here
Note : I have added the font as external resources. It seems to be working properly !
just do !important after the font style you want to use
What is right way to make available custom fonts (e.g. google fonts) in my new theme?
It look like this issue:
https://github.com/uikit/uikit/issues/111
I did make what they says, only paste this code in the uikit.less:
/* Custom Fonts */
#font-face {
font-family: 'opensanscondensed';
src: url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
}
But it did not works. And i cant find where i should specify font-family for some elements(nav, top-menu, etc .. )
I would be grateful for any answers.
The url that you are pasting in the src property is an url of a css file (that google generates for you to import the font faces). You can see that it already generates font faces for you:
http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700
What you need to do in your style sheet file is just importing the css from the url. Something like this:
#import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700)
and then you can use it like so:
font-family: 'Open Sans Condensed', sans-serif;
DEMO