I'm using PHPStorm 8.0.3 and in my CSS file I get warning for font-family rule.
This inspection verifies that the CSS font-family property contains a
generic font name as a fallback alternative.
I added the font as follows:
.my_text {
font-family: 'DINPro-Medium';
}
#font-face {
font-family: 'DINPro-Medium';
src: url(font/DINPro-Medium.eot);
src: url(font/DINPro-Medium.eot?#iefix) format('embedded-opentype'),
url(font/DINPro-Medium.ttf) format('truetype'),
url(font/DINPro-Medium.woff) format('woff'),
url(font/DINPro-Medium.svg#DINPro-Medium) format('svg');
font-weight: normal;
font-style: normal;
}
I can not understand what the problem is.
It is recommended to add generic font families as a fallback while using a custom font.
Eg. font-family: 'DINPro-Medium', serif;
If the browser fails to load files for your custom font, it will use generic serif font.
Uncheck this checkbox which will disable the check:
Settings → Editor → Inspections → CSS → Probable bugs → Missing generic font name
Just add a comment before a code block:
// noinspection CssNoGenericFontName
.my_text {
font-family: 'DINPro-Medium';
}
You can read about it:
https://www.jetbrains.com/help/webstorm/disabling-and-enabling-inspections.html#suppress-inspection-results
Related
I am using Duster as my theme. I want to change the default font. Is there any way to do that?
You can use Easy Google Fonts Plugin
Step 1 install plugin and then go to => setting => google fonts . Add a css selector like if you want to change the whole website font family change , then add a body css selector .
step 2 Go to => Apperance => customize => Typography => Theme Typography => add a font family you want to use .
...or, if you don't like plugins, simply do this and add stylesheet with it after all the other stylesheets in header:
body {
font-family:Whatever, "Whatever In Space", sans-serif; /* Actual fonts of course chosen by you */
}
If this doesn't work and is overriden change to font-family:Whatever, "Whatever In Space", sans-serif !important;, but using !important is generally considered a last resort.
If you want to change the font without using any plugin, you can follow the steps below:
For example if you want to change fonts to BYekan or any other fonts, you have to create a font folder in wp-content->themes->my theme->font.
Upload the fonts to this folder.
In beginning of the CSS file, add these lines:
#font-face {
font-family: 'BYekan';
src: url('font/WebYekan.eot');
src: url('font/WebYekan.eot?#iefix') format('embedded-opentype'),
url('font/WebYekan.woff') format('woff'),
url('font/WebYekan.ttf') format('truetype'),
url('font/WebYekan.svg#WebYekan') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'BKoodakBold';
src: url('font/BKoodakBold.eot');
src: url('font/BKoodakBold.eot?#iefix') format('embedded-opentype'),
url('font/BKoodakBold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
-moz-font-feature-settings: "calt=0,liga=0";
}
Change font-family to:
font-family:"BKoodakBold",BKoodak,byekan,Arial,Helvetica Neue,sans-serif;
everywhere you want to change the font.
I need to be able to use specific Telugu fonts on my website. I have the ttf file and I generated the .eot, .woff, .woff2 and .svg files required. I followed the instructions on the site below and created my stylesheet as shown below
#font-face {
font-family: 'sree_krushnadevarayaregular';
src: url('Sree Krushnadevaraya-webfont.eot');
src: url('Sree Krushnadevaraya-webfont.eot?#iefix') format('embedded-opentype'),
url('Sree Krushnadevaraya-webfont.woff2') format('woff2'),
url('Sree Krushnadevaraya-webfont.woff') format('woff'),
url('Sree Krushnadevaraya-webfont.ttf') format('truetype'),
url('Sree Krushnadevaraya-webfont.svg#sree_krushnadevarayaregular') format('svg');
font-weight: normal;
font-style: normal;
}
.badifont {
position: relative;
top: 1px;
display: inline-block;
font-family: 'sree_krushnadevarayaregular';
font-style: normal;
font-weight: normal;
line-height: 1;
}
https://css-tricks.com/snippets/css/using-font-face/
However, when I use the new class that I created, the text does not show up in the font that I am expecting. It is using the default Telugu Font that is available on my machine.
What am I missing?
I looked it up a little more and found this solution.
Go to Google Fonts and type in the name of your font. Most fonts I needed were already taken care of by Google. You can then copy the markup google provides and put it in your code.
So I had to do this
<link href='http://fonts.googleapis.com/css?family=Tenali+Ramakrishna|Sree+Krushnadevaraya&subset=telugu&effect=outline|3d-float' rel='stylesheet' type='text/css'>
Then I setup my stylesheet with the name of the font in the font-family as 'Sree Krushnadevaraya' and it worked.
3 things to check: in all your font files, remove the space, or put an underscore instead of space for instance:
Sree_Krushnadevaraya-webfont.eot
Then adjust those file names in your code for #fontface.
Then open your svg file in a text editor. check what is on the id of your font--it is usually around line 6, <font id=...>
Make sure you are using that exact font id name here AFTER the hashtag (#):
url('Sree Krushnadevaraya-webfont.svg#sree_krushnadevarayaregular') format('svg');
Then make sure all your fonts and css is uploaded again.
I am working on a webfonts server and I got the api to spit out the css with the correct mime types.They are also getting linked to the page.
#font-face {
font-family: 'Pagul';
src: url('http://localhost:5000/api/webfonts/static/Pagul.eot');
src: local('☺'), url('http://localhost:5000/api/webfonts/static/Pagul.woff') format('woff'),
url('http://localhost:5000/api/webfonts/static/Pagul.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
The ttf,eot files can be downloaded manualy using the links, for some reason these fonts are
not loaded by the browser what am I doing wrong here ? The font files dont have proper mimetypes is that the issue ?
I tried font-squirells syntax also,it's not working.
PS: The Css is dynamically generated and added to the head ?
Use relative paths instead of absolutes. For example, if your CSS is in site/css/style.css and your fonts are in the site/api/webfonts/static/ directory:
#font-face {
font-family: Pagul;
src: url('../api/webfonts/static/Pagul.eot');
src: url('../api/webfonts/static/Pagul.woff') format('woff'),
url('../api/webfonts/static/Pagul.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
Alternatively, use a service like Google Fonts and either link their CSS on your HTML or import it directly into your CSS
In one of my website I have used Ænigma Scrawl 4 BRK font(as it is showing in my photoshop font family box). Now I want the same font in my page. So for that I just went to FontSquiirel site for generate css style. There I got my css file with the font with different extensions like .svg, .ttf, .woff. I just paste all the fonts in my folder then I used the same converted css in my style.css file. The generated css was like this
font-family: 'nigma_scrawl_4_brkregular';
src: url('aescrawl-webfont.eot');
src: url('aescrawl-webfont.eot?#iefix') format('embedded-opentype'),
url('aescrawl-webfont.woff') format('woff'),
url('aescrawl-webfont.ttf') format('truetype'),
url('aescrawl-webfont.svg#nigma_scrawl_4_brkregular') format('svg');
font-weight: normal;
font-style: normal;
But after all that my font style has not been changed. I am checking in both firefox and chrome. I have cleared all the cache and cookies from my browser. Can someone kindly tell me what is the wrong here? Any help and suggestions will be appreciable. Thanks
#font-face {
font-family: 'nigma_scrawl_4_brkregular';
.
.
.
.
font-style: normal;
}
Try this
#font-face{
font-family : "myCustomFont";
src:url(aescrawl-webfont.ttf);
}
body{
font-family:"myCustomFont", Arial;
}
This is CSS code
#font-face {
font-family: 'FuturaStdBook';
src: url('site/font-face/futurastd-medium-webfont.eot');
src: local('☺'), url('site/font-face/futurastd-medium-webfont.woff') format('woff'), url('site/font-face/futurastd-medium-webfont.ttf') format('truetype'), url('site/font-face/futurastd-medium-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
h2 {font-family:'FuturaStdBook', sans-serif}
Can it be related to mime type?
How can i ensure my path is right?
If you're using IIS, you'll need to register a MIME type for the .eot extension.
In IIS Manager, in the IIS section, open the MIME Types configuration
Under "Actions", click "Add..."
Enter .otf in the extension box, and application/octet-stream in the MIME type box.
Click OK
You'll need to do this for each non-standard extension you use (.ttf is already registered, .woff is not), but that should do it!
Try using Font Squirrel to get a bullet-proof CSS declaration for your custom font.
The problem are the definitions of font-weight and font-style in your font-face declaration. Since h2 elements are defined in a bold face by default, the font-face declaration is not taken into account for these elements (because the browser thinks, the font file is for normal weighted weight only, which is most probably true).
Solution: You need a second font-face declaration with font-weight: bold in it or you set h2 elements to have font-weight:normal and font-style: normal.