I'm running sassLib/bourbon to building out my CSS. It builds fine, and adds the main.css file to my frontend folder in the clientlib-site folder. I also have a fonts folder in there too, but can't get the path set correctly. I'm getting 404 errors for each of my font files.
here's my scss code snippet:
/* base fonts */
$fontPath: '../../frontend/fonts/';
// Helvectica Neauve Medium
#include font-face('Helvetica Neavue Medium', '#{$fontPath}HelveticaNeueLTW02-65Medium');
// Helvetica Neavue Light
#include font-face('Helvetica Neavue Light', '#{$fontPath}HelveticaNeueW02-45Light');
My clientLibs is like this
/apps//clientlibs/clientlib-site/frontend
If there is more information needed, please let me know.
Thanks!
You can define font family by "Day Commons GFX Font Helper"
Please follow this link
https://docs.adobe.com/docs/en/aem/6-1/develop/platform/adding-fonts.html
For using:
p {
font-family: "Times New Roman", Georgia, Serif;
}
Related
I created a Github.io blog using JekyllNow. JekyllNow allows you to create it fully on the web itself without having git or Ruby installed locally. i.e. everything was done without any local operation.
I am using the minimal theme. My page is created but the font seems very big. How do I change the font sizes on the page?
If there is a way to make it proportional, that would be even better - i.e. i.e. not just the default font size but also, H1, H2 etc sizes also are proportionally smaller.
Normally we edit the file style.scss located at the root of the jekyll instance.
body {
font-family: "Times New Roman", Times, serif;
}
But, if you are using the default Jekyll theme "Minima", you will have to edit the file minima.scss instead of the style.scss.
So, To change the default font size definition you need to reset the value of `$base-font-size'
$base-font-size: 16px !default;
Also you can change the default font definition itself by resetting the value of $base-font-family variable,
$base-font-family: "PT Serif", serif;
You will also need to remove the !default; suffix at the end of this setting for the new font to be applicable.
I’m new with Ionic React and I’m looking for the correct way to integrate custom fonts and a custom icon set into my project, so that it’s working on all platforms as intended.
Custom Icon set
My goal is to make my custom icons work with IonIcon so that I can use the default styling options like “size” and the CSS variables (e…g --ioinc-stroke-weight).
What I did so far:
I added the icon set (all icons are svgs) into “public/assets/customicons/”
I imported IonIcon into my components where needed
Integrated the (e.g. )
So far the icons are displayed as intended and custom attributes “size” is working.
But, I’m not able to set the icon color or stroke-width programmatically. All the icons have set a default attributes (e.g. < g fill=“none” fill-rule=“evenodd” stroke="#092A5E" stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“8” >). Even if I remove those default attributes, I’m not able to set them via CSS variables
Question 1: Is “public/assets/customicons/” the correct folder to store the icons?
Question 2: How can I make it work that I can change the color of the icon via CSS?
Custom Font
Goal: I want that the custom font is shown on all platforms
What I did so far:
Added the custom fonts in “src/assets/fonts/”
Created a “fonts.css” in “src/theme/” where I integrated the font via “#font-face”
#font-face {
font-family: ‘FONTNAME’;
src: url(’…/assets/fonts/FONTNAME.ttf’);
font-style: normal;
font-weight: 400;
font-display: swap;
}
assigned the font to differnet elements
Question 1: Is this the correct folder to store the custom fonts? (I wasn’t able to do the same when the custom font was saved under “public/assets/fonts/” like the icon set)
Unfortunately, I wasn’t able to find any docs, tutorials or posts on any of these topics.
Thanks for your help!
I'm trying to create icon buttons. I've downloaded them from flaticon.com and had them exported as icon font files, which includes a TTF file.
In my css file I specify the external font as:
#font-face {
font-family: flaticon;
src: url('/flaticon/flaticon.ttf');
}
I've defined a button class that should use this font as follows:
.flaticon-button {
-fx-font-size: 90px;
-fx-font-family: flaticon;
-fx-padding: 10px;
}
My code applies the styleclass as follows:
Button button = new Button("\ue000");
button.getStyleClass().add("flaticon-button");
But unfortunately it doesn't show the expected icon.
When I load the font in my code and set it explicitly the correct icon is shown:
Font font = Font.loadFont(this.getClass().getResource("/flaticon/flaticon.ttf").toExternalForm() , 90d);
Button button = new Button("\ue000");
button.setFont(font);
I'm obviously overlooking something small, but despite how many examples I browse on the internet, or how long I stare at Oracle's CSS documentation I can't see what.
So, what is wrong with my CSS declaration and usage?
Thanks to the comment of rossum, I realized it it might have something to do with the URL not resolving to the class, as Class.getResource() does.
By loading the font in the main, before it is references by the code, it seems to be resolved. I guess there is no other way, but it seems to be a bit of a hack to me.
How can i add custom icons to ionicons?
I could not yet find a step by step instruction what to do.
There are many really basic icons (like the paragraph icon
for example) which are not provided by ionicons, so i somehow
have to add them by my own.
Download the fonts to include in our project. Go ahead and download the latest Font Awesome release and extract them. Copy the following font files into your www/fonts directory:
ontawesome-webfont.ttf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont-woff
fontawesome-webfont.otf
Next we need to edit www/css/style.css to include this new font set for use in our project. Add the following lines:
#font-face {
font-family: 'fontawesome';
src:url('../fonts/fontawesome-webfont.eot');
src:url('../fonts/fontawesome-webfont.eot') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff') format('woff'),
url('../fonts/fontawesome-webfont.ttf') format('truetype'),
url('../fonts/fontawesome-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Every time we want to use the Font Awesome set we just set our font family as fontawesome.
Get More custom icons https://icomoon.io/
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Non-Standard fonts in web?
I have created a Unicode font and I would like to use it on my webpage. I want people to see and read the font. Can they do it without installing the font? Something like run the font from server?
If I remember correctly, I have seen this long time back.
You may do this using CSS3's #font-face feature. But you have to provide the necessary font formats.
FontSquirrel's #font-face Generator is a nice web tool that does all the dirty work for you. It is very easy to use and creates all the necessary files, including CSS stylesheets and a HTML example file.
What's really valuable is that it includes all formats and hacks needed to display the font in all major browsers, something which is not so easy to get right.
You can use #font-face
In your css you the font would be declared using the #font-face rule.You can specify the font family, specify the links to the fonts in the different formats.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype'),
url('webfont.svg#svgFontName') format('svg');
}
In your html you then call it using font-family
body
{
font-family: 'MyWebFont', Fallback, sans-serif;
}