I'm working on an online store project and it needs a custom font. I'm using Materialize CSS framework in Angular 7, but btn class doesn't apply correctly custom font, anything else does. any help please friends!
I have tried custom btn class apply to style with !important, it does apply but damaged ways.
#font-face {
font-family: 'AcadNusx';
src: url('./assets/fonts/AcadNusx.woff') format('woff2'),
url('./assets/fonts/AcadNusx.woff2') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'AcadNusx' !important;
padding: 0;
margin: 0;
}
a {
font-family: 'AcadNusx' !important;
}
.btn {
font-family: 'AcadNusx' !important;
}
and the template code is:
registracia
when I delete btn class from the button font apply correctly but there is no styling
please help, I need just to apply this font but btn style is making me headache. thanks for your attention.
best regards
AcadNusx is an 'unusual' Georgian typeset _
To display it correctly needs more #font-face information than you currently have in your CSS code _
According to the Fonts2U resource_ you need to upload (or install via Angular cli?) all 4 versions of the font to your fonts folder_ including .ttf,.woff,.eot,.svg _ then copy / paste the accompanying CSS code into your main CSS file or import the code as separate CSS _
The 4 versions of the font_ the CSS code_ and all the instructions you need_ are all included in the downloadable resource from: https://fonts2u.com/acadnusx.font
Related
I'm currently in the process of updating all my websites from using webfonts to hosting the fonts locally by myself. This process is a little bit frustrating, because I often can't find the css classes of the webfonts. At the moment, it's more a "try and error" kind of thing, where I'm just klicking trough the google chrome dev tools and looking for the corresponding css classes. So I was wondering if there is a simple way to look in a published website via browser for the css classes of a specific font family? (I cannot search for the classes in the IDE, because in this use case the websites where developed with webflow)
EDIT: The websites in question were created with a "building block" system called "Webflow". There, the fonts are selected via graphical interfaces. Now the problem is that somewhere in these old and huge web pages there are CSS classes that use the "Lato webfont". I want to replace this font, but I can't search for used fonts in this graphical interface. What I can search for are the CSS classes. So my idea was to use the Chrome Dev Tools to find out which CSS classes used the Lato font to ultimately replace it.
Find css rules by properties
If you can't edit you site's css files globally you might at least get some sort of "cheat sheet" containing all selectors matching certain property values.
let cssRules = getCssRules();
let filterLato400 = findRulesByProperties(cssRules, {
"font-family": "Lato",
});
console.log(filterLato400);
let filterLato400Italic = findRulesByProperties(cssRules, {
"font-family": "Lato",
"font-weight": 400,
"font-style": "italic"
});
console.log(filterLato400Italic);
//get all css rules in document
function getCssRules() {
let cssText = "";
let rules = [
...(document.styleSheets[0].rules || document.styleSheets[0].cssRules)
];
let cssArr = [];
rules.forEach(function(rule) {
let selector = rule.selectorText;
let cssText = rule.cssText;
if (selector && cssText) {
let properties = cssText
.replace(selector, "")
.replace(/[{}]/g, "")
.split(";")
.map((val) => {
return val.trim();
})
.filter(Boolean)
.map((vals) => {
return vals.split(":");
});
cssArr.push({
selector: selector,
properties: properties
});
}
});
return cssArr;
}
//filter css rules by properties
function findRulesByProperties(css, filters) {
let classList = [];
css.forEach(function(rule) {
let selector = rule.selector;
let props = rule.properties;
let vals = [];
let valsFilter = [];
for (let key in filters) {
let filterName = key;
let filterValue = filters[key];
valsFilter.push(filterValue.toString());
}
for (let i = 0; i < props.length; i++) {
let prop = props[i];
let propName = prop[0];
let propValue = prop[1].trim();
if (valsFilter.indexOf(propValue) != -1) {
vals.push(propValue);
}
}
if (vals.length == valsFilter.length) {
classList.push(selector)
}
});
return `results ${classList.length}: ${classList.join(", ")} || match: ${JSON.stringify(filters)}`;
}
body {
font-family: Georgia;
}
h1 {
font-family: "Lato";
font-weight: 700;
}
h2 {
font-family: "Lato";
font-weight: 400;
}
.classLato400 {
font-family: "Lato";
font-weight: 400;
}
.classLato400italic {
font-family: "Lato";
font-weight: 400;
font-style: italic;
}
.classLato700 {
font-family: "Lato";
font-weight: 700;
}
.classRoboto400 {
font-family: "Roboto";
font-weight: 400;
}
In the above example we're searching for all rules containing font-family:Lato (and other filters like font-weight or font-style).
You could paste your main css file in the snippet to get a list of selectors matching all criteria.
Replace external #font-face rules
If I got you right and your ultimate goal is to replace externally hosted font files with local ones (e.g. to improve GDPR compliance), you don't need to get every css font-family class reference.
The most important part are the #font-face rules that are actually responsive for downloading font files.
OK that's not perfectly correct since a font file won't be downloaded unless some DOM element uses this particular font-family.
In other words, your css might actually contain a plethora of unused font-families – on the other hand if they aren't used anywhere they won't be downloaded (so browsers have a default lazyloading method for fonts).
Example: you need to replace google webfonts with locally hosted fonts
Open your devTools and switch to the "Font" tab
Now you can see a list of all downloaded font files as well as their origin (URL) and their "Initiator" – the source file, that initiated the file download. Usually this would be a <link> stylesheet reference or an #import rule within your css, but it can also be a javaScript font loader method.
By inspecting the "URL" column, we can clearly see if a font is loaded from an external host.
Clicking the "Initiator" row/entry will open the file triggering the download – this will either be a file (like a .css) you want to completely remove or just a portion of a css file (take a closer look at #font-face rules, especially the src properties).
Following the google webfonts use case/example
(actually pretty similar to other font delivery services)
obviously we need to get local copies of my previously externally hosted font files –
google web font helper might be helpful to get a ready-to-go #font-face css and a download package including all needed font files.
we need to delete all css files or #font-face or #import rules that are still referring to external file sources and replace them with custom local font file urls.
Possible shortcuts to remove external font file references:
Check your HTML/template head for undesired elements like these
(so containing an external URL like "fonts.googleapis.com"):
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700" rel="stylesheet">
or within inline <style> tags for #import rules like #import url('https://fonts.googleapis.com/css2?family=Roboto:wght#400;700')
or similar #import rules within your main css file – they should usually be found at the top of your css code.
Delete these references and replace with custom #font-face rules like so (example is based on google web font helper output using "Roboto" font-family and font-weights 400+700 ... regular and bold).
/* roboto-regular - latin */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('fonts/roboto-v30-latin-regular.woff2') format('woff2');
}
/* roboto-700 - latin */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: url('fonts/roboto-v30-latin-700.woff2') format('woff2');
}
Inspect the network tab once again
If everthing is working fine we should see the locally retrieved font files for each style (e.g. regular, bold, italic, bold italic etc.)
If not: double check your file paths!
Seriously, this is probably the most common source of errors. (e.g "../fonts/" or "./fonts/" or just "fonts/").
I'am trying to add a custom icon set to a joomla3 cms webpage, which uses the Nextend Smart Slider 3 Pro (V: 3.3.27-pro-r6010). On default the SmartSlider-backend only shows the built-in icon sets (Font Awesome 4, Icoomon, Linear, Material, Typicons).
What I've done so far:
I've already combined all custom-designed icons to an icon font (via IcoMoon App) and added al files locally like the default icons (./media/n2/n/icons/customicon/files/...).
Also added a manifest.json and readme.txt in the /customicon-folder (using code from /fontawesome as a template & customising them):
{
"id": "cicn",
"label": "CustomIcon",
"class": "cicn",
"isLigature": 0,
"prefix": "cicn-",
"data": {
"chefron_up": {
"name": "chefron_up",
"kw": "chefron_up, arrow"
}
}
}
Furthermore is added a customicon.css within ./media/nextend/customicon/... like:
#font-face {
font-family: 'customicon';
src: url(/webpage/media/n2/n/icons/customicon/files/customicon.eot?b8n2oe);
src: url(/webpage/media/n2/n/icons/customicon/files/hicustomicon.eot?b8n2oe#iefix) format('embedded-opentype'),
url(/hwebpage/media/n2/n/icons/customicon/files/customicon.ttf?b8n2oe) format('truetype'),
url(/webpage/media/n2/n/icons/customicon/files/customicon.woff?b8n2oe) format('woff'),
url(/webpage/media/n2/n/icons/customicon/files/customicon.svg?b8n2oe#hicustomicon) format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div .n2i.cicn {
display: inline-block;
font: 1em/1 hicustomicon;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.cicn-chefron_up:before {
content: "\e900";
}
And there I start struggeling:
Right now in my smartslider-backend, I can see the customicon-title in my icon-list & there is the 'chefron_up'-title to choose (also visible in debugger), but the image/icon won't visually show.
Also I'am getting an warning message: Warning: filemtime(): stat failed for /Applications/XAMPP/xamppfiles/htdocs/webpage/media/n2/n/icons/customicon/files/customicon.min.css in /Applications/XAMPP/xamppfiles/htdocs/webpage/libraries/nextend2/nextend/library/libraries/assets/cache.php on line 66, which states:
protected function makeFileHash($file) {
return $file . filemtime($file);
}
I can't wrap arround my head, how to add the icon(s) to the backend/frontend of the Smart Slider Pro, to display them. Digged through the code (especially ./media/n2/n/dist/...) & also saw, that there is a icon.css.manifest within the /nextend-folder for every default icon-font, which includes a hash.
I'am personally a ux-designer and not a developer, so Iam quite stuck on this. Maybe somebody can help me, to get this working or can tell me, if there is an easier way to add an custom icon set to the SmartSlider3.
Appreciate any help.
Cheers.
I it possible to use an flat icon with different content name ? I want to add new icon to existing project so I download flaticon as font icon. But its conflict previous icon set.
.flaticon-alert:before { content: "\f100"; }
Is there any way to fix it ?
The icon fonts are fonts, so for 2 icon sets that use the same character ("content") you just have to ensure that the class name also specifies the font-face:
styles.css
.flaticon-alert:before {
font-family: flaticon; // or name given in flaticon's #font-face css
}
flaticon.css example:
#font-face {
font-family: flaticon;
src: url(flaticon.woff);
}
I am using Icomoon in an application - I am having a problem with a small number of icons which will not display. I have downloaded all the icons via the Icomoon App and this is the latest version - all 450 are selected.
I have tried on just a blank page with no other CSS and they still don't work in case it was some CSS in my application causing it.
<link rel="stylesheet" type="text/css" href="/css/icons/icomoon/style.css" media="screen" />
<i class="icon-user"></i> User
<i class="icon-bars"></i> Bars
<i class="icon-search"><i> Search
In the above, bars displays fine but user and search do not.
Here is my style.css file (truncated):
#font-face
{
font-family: 'IcoMoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.svg#IcoMoon') format('svg'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="icon-"],
[class*=" icon-"]
{
display: inline-block;
vertical-align: middle;
line-height: 1;
}
[class^="icon-"]:before,
[class*=" icon-"]:before
{
font-family: 'IcoMoon';
font-weight: normal;
font-style: normal;
speak: none;
-webkit-font-smoothing: antialiased;
}
.icon-users:before {
content: "\92";
}
.icon-bars:before {
content: "\b8";
}
.icon-search:before {
content: "\a0";
}
If I open up icomoon.svg (the only one I can "edit") then 92 and a0 are both there:
<glyph unicode="" d="M734.994 154.626c-18.952 2.988-19.384 54.654-19.384 54.654s55.688 54.656 67.824 128.152c32.652 0 52.814 78.138 20.164 105.628 1.362 28.94 41.968 227.176-163.598 227.176-205.564 0-164.958-198.236-163.598-227.176-32.654-27.49-12.488-105.628 20.162-105.628 12.134-73.496 67.826-128.152 67.826-128.152s-0.432-51.666-19.384-54.654c-61.048-9.632-289.006-109.316-289.006-218.626h768c0 109.31-227.958 208.994-289.006 218.626zM344.054 137.19c44.094 27.15 97.626 52.308 141.538 67.424-15.752 22.432-33.294 52.936-44.33 89.062-15.406 12.566-27.944 30.532-35.998 52.602-8.066 22.104-11.122 46.852-8.608 69.684 1.804 16.392 6.478 31.666 13.65 45.088-4.35 46.586-7.414 138.034 52.448 204.732 23.214 25.866 52.556 44.46 87.7 55.686-6.274 64.76-39.16 140.77-166.454 140.77-205.564 0-164.958-198.236-163.598-227.176-32.654-27.49-12.488-105.628 20.162-105.628 12.134-73.496 67.826-128.152 67.826-128.152s-0.432-51.666-19.384-54.654c-61.048-9.634-289.006-109.318-289.006-218.628h329.596c4.71 3.074 9.506 6.14 14.458 9.19z" />
<glyph unicode=" " d="M992.262 88.604l-242.552 206.294c-25.074 22.566-51.89 32.926-73.552 31.926 57.256 67.068 91.842 154.078 91.842 249.176 0 212.078-171.922 384-384 384-212.076 0-384-171.922-384-384 0-212.078 171.922-384 384-384 95.098 0 182.108 34.586 249.176 91.844-1-21.662 9.36-48.478 31.926-73.552l206.294-242.552c35.322-39.246 93.022-42.554 128.22-7.356s31.892 92.898-7.354 128.22zM384 320c-141.384 0-256 114.616-256 256s114.616 256 256 256 256-114.616 256-256-114.614-256-256-256z" />
Additionally, in the demo html file created from the icomoon app all the icons from 7f (download) to a0 (search) show as blank - both the icons I am trying to use fall into this range.
Any idea why some will show but others will not?
The problem I encountered in IE11 & edge was that the uppercase variant was shown instead of the lowercase icon. This is because IE11/edge ignores the case when dealing with css-applied characters and just searches for the first 'match' in the font file.
As you can see in this picture, the lowercase 'g' maps to a trashbin-icon whilst the uppercase 'G' maps to a play-icon. IE11 & edge erroneously used the first uppercase variant.
You can test this possible cause by inspecting your font file using font forge and by explicitly declaring a "text-transform: lowercase/uppercase" in the css on the icon itself and see if that fixes it.
To ultimately fix this, I removed all uppercase letters from the icon font and re-mapped everything to other unicode characters and everything worked as expected. I found my solution in this article: Icon font behaving strangely in IE11
Did you try the solutions proposed in previous stackoverflow answers?
IcoMoon icons not working in Internet Explorer 8
Why does one of these font-face render in IE8, but the others don't?
Also, see http://adactio.com/journal/6555/
I found the solution. My problema was that just a few icons were not displaying at all, but after opening the html file that comes on the zip I saw those same icons were displaying correctly. So I saw the html and css and saw that to call the icon through a class the file was using to classes. The first one appears below the #font-face call that basically sets the style and family of the font, everything needed for the font to display correctly so call this class. The next example is using my classes and icomoon font files.
#font-face {
font-family:"icomoon";
src: url('fonts/icomoon.eot');
#font-face {
/*All the urls*/
}
/*THIS IS THE ONE YOU NEED TO CALL*/
.icomoon {
font-family: "icomoon";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/*Better font rendering ======*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
When you create a new icon with icomoon you get a preview before download. If an icon has a label of 'multicolor' will not display. I created some icons in illustrator and imported them to the app. As I had silhouettes in white and backgrounds in white, the icons were kind of broken and couldn't be used.
Had to use pathfinder to fix them and make it just one color, also having line strokes kills your icons.
i have a imported css font with the following code:
#font-face
{
font-family: font;
src: url('myriad pro/myriad pro/MyriadWebPro.ttf'),
url('myriad pro/myriad pro/MyriadWebPro.ttf');
}
The problem is that online doesn't work but locally works.What is causeing the problem
Try renaming the file path, for example ---> "myriad-pro/myriad-pro/MyriadWebPro.ttf". Is your css file in the folder with the font. Check if your path is right.
P.S: Remove the bottom url (that on the third line.). When I use font-face I use only two. Example: font-family: Consolas;
src: url('Consolas.ttf');
#font-face
{
font-family: MyriadPro; /* just declares a font in your stylesheet */
src: url('myriad pro/myriad pro/MyriadWebPro.ttf'),
url('myriad pro/myriad pro/MyriadWebPro.ttf');
}
body
{
/* now you need to use it */
font-family: MyriadPro, sans-serif;
/* so name it something useful, instead of just "font" */
}
answering old questions
for those who come looking after