Don't know how to load ttf font types on css files for twig in symfony2 app. Any suggestions? The ttf are inside a folder in resources. Thanks
Load font in twig? You probably want to have some custom fonts in you CSS file that defines styling of the twig.
#font-face {
font-family: GiveItSomeName;
src: url(locationToYourFont.ttf);
// you can add stuff like font-style, or font-weight...
}
And then later in your CSS file, use it like there was a font named GiveItSomeName in those classes you wish, like this
.someClass {
font-family: GiveItSomeName;
}
Related
I have a project where I need to use custom fonts. But I have no idea how to use this in my HTML. I have searched online how to do this, but all examples use a font that is contained in one file. My font is contained in multiple files.
How do I specify which specific font of the CircularStd I want to use on each element?
This is a screenshot of my index.scss file which contains the tailwind imports and the definition of my font:
An approach to this would be creating a custom font class in your tailwindconfig.js and extending it to your default tailwind theme. For example, if you're using Google Fonts and you want to use the font Manrope for a specific header, you can extend the fontFamily variant like so:
module.exports = {
theme: {
extend: {
fontFamily: {
'manrope': 'Manrope',
}
}
}
}
Now, to use this custom class declare it in your html by following the syntax font-{fontFamily}. So in this case, we're going to use font-manrope.
<h4 class="font-manrope">I'm a header using the font Manrope</h4>
If you think that your font has many files and you need them all then why not create a #fontface for each one although this is not the best practice, you are supposed to for example to choose the file with the light and standard font and you create the #fontface based on it and include it's file the others like the bold and italics can eventually be done using CSS but the most important thing is that you have your font implemented.
so for example you will add your font:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
and if you want it to be bold and italic use
p{
font-weight:600;
font-style: italic;
}
I hope that would help!
I'm using the open-iconic library that comes with the default Blazor template in Visual Studio.
It's referenced in the css file #import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
I added some custom ttf fonts to my root folder. When referencing them in the css file like this:
#font-face {
font-family: ALittlePot;
src: url('../fonts/ALittlePot.ttf') format('truetype');
}
then the open-iconic icons disappear. I even tried removing the content and just putting #font-face { } the same thing happened. It obviously has something to do with using #font-Face.
I tried adding my font using #import url('../fonts/ALittlePot.ttf'); but then the font didn't render.
Where am I going wrong?
I have added a custom font to my project in the src/main/resources folder (RobotoMono.ttf). Then I try to load it from my css file like this:
#font-face {
font-family: 'RobotoMono';
src: url('RobotoMono.ttf');
}
but when I try to set this font to something it doesn't work:
.column-header-label {
-fx-label-padding: 0;
-fx-text-overrun: clip;
-fx-font-family: 'RobotoMono';
}
If I set the font to something which is present on my system I can see that the font changes but the one included by me does not work.
What am I doing wrong?
In your css, you have to specify a font-face with a url. Then, in your css element you have to use the name of the font from inside the ttf file, not the name of the font file itself. For instance, if you open the ttf file from Windows you see "Roboto Mono".
#font-face {
src: url('RobotoMono.ttf');
}
.column-header-label {
-fx-label-padding: 0;
-fx-text-overrun: clip;
-fx-font-family: 'Roboto Mono';
}
You declared where the font exists using the src property:
src: url('RobotoMono.ttf');
This is an instruction to look for RobotoMono.ttf in the same folder where the CSS file exists. If you created your JavaFX application using Maven, the style files should be in
src/main/resources/styles
So make sure the project's folder structure looks like:
just add the font to your java build path libraries
for example in eclipse you have to right click on the project->properties->java build path->add JARs and then add your ttf font.
after you have done this you need to just add the line below to your css
-fx-font-family: 'name of the font you have added to library without .tff';
make sure that your ttf font is inside the folder of your project
I have a web application that uses Glyphicons, but the client is restricted from downloading fonts.
I found a page that says you can convert to uri the Glyphicon files and embed them in the Bootstrap CSS, which I did.
(partial listing)
#font-face {
font-family: 'Glyphicons Halflings';
src: "data:application/octet-stream;base64,n04AAEFNAAAC.......
When I test it on the server, I get only a box where the glyph should be. Did I miss a step?
The application does use SASS-- could this be the problem?
There are few errors in your listing snippet:
src dataURI value must be inside url() 'function',
it must have either correct mime type instead of application/octet-stream: e.g. application/font-woff,
or corresponding format() declaration: e.g. format('woff'). Or better both.
Correct template should look like
#font-face {
font-family: '[name]';
src: url(data:font/[mime-format];base64,...) format('[css-format]');
/* font-weight, font-style, ... */
}
SASS should not be the problem for resulting snippet as long file is .scss and not .sass.
i want to change semantic-ui default font with #font-face but no matter...
i tried change in less file(site.variables) but I do not know how change it
i tried add my font with other custom css file but it not work
#font-face {
font-family: 'fontname';
src:url('themes/basic/assets/fonts/fontname.eot');
src:url('themes/basic/assets/fonts/fontname.eot?#') format('eot'),
url('themes/basic/assets/fonts/fontname.woff') format('woff');
}
body{
font-family: 'fontname';
}
I know two ways to change font-face, using google fonts or offline fonts:
Using google fonts:
We need to have the resources of Semantic UI, you can get here:
https://semantic-ui.com/introduction/getting-started.html
It is required to create the file site.variables in semantic/src/site/globals/
We search for the source that we like most at https://fonts.google.com/ and copy the name.
In the file site.variables we add the name of the font to the variable #fontName as follows:
/*******************************
User Global Variables
*******************************/
#fontName : 'Roboto';
Finally we execute the command glup build-css, the changes will be reflected in the file semantic /dist/semantic.css
Using offline fonts
We need to have the resources of Semantic UI, you can get here:
https://semantic-ui.com/introduction/getting-started.html
It is required to create the file site.variables in semantic/src/site/globals/
In the file site.variables we add the variable #importGoogleFonts with the value false;
/*******************************
User Global Variables
*******************************/
#importGoogleFonts : false;
#fontName : 'fontname';
It is required to create the file site.overrides in semantic/src/site/globals /
In the file site.overrides we add our font-face
/*******************************
Site Overrides
*******************************/
#font-face {
font-family: 'fontname';
src:url('themes/basic/assets/fonts/fontname.eot');
src:url('themes/basic/assets/fonts/fontname.eot?#') format('eot'),
url('themes/basic/assets/fonts/fontname.woff') format('woff');
}
Finally we execute the command gulp build-css, the changes will be reflected in the file semantic /dist/semantic.css
This video maked by #Aditya Giri explain how change font family from google fonts
https://www.youtube.com/watch?v=cSdKA-tZEbg
In the next issue #jlukic explain how use offline fonts
https://github.com/Semantic-Org/Semantic-UI/issues/1521
Regards
You can do the following:
Add the following to a .css file:
#font-face {
font-family: 'fontname';
src:url('themes/basic/assets/fonts/fontname.eot');
src:url('themes/basic/assets/fonts/fontname.eot?#') format('eot'),
url('themes/basic/assets/fonts/fontname.woff') format('woff');
}
Import the above code before semantic's site.min.css
Change the #fontName to 'fontname'
#importGoogleFonts should be false since you don't want to import any fonts from Google
By default the above will applied to body
It's an old question but I just wanted to add one thing.
Because all Semantic UI elements inherits the ui class you could do it like this:
.ui {
font-family: 'fontname' !important;
}
Not so elegant but it works.
This is the complicated solution https://stackoverflow.com/a/54208399/2374997 but if you want a simpler approach you could follow this example:
/*In your .css file, loaded after semantic.min.css*/
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* {
font-family: 'Montserrat' !important;
}
You can use google Link:
Add to index.html google link. For example:
<linkhref="https://fonts.googleapis.com/css2?family=Rubik+Glitch&display=swap"rel="stylesheet"/>
Add Font in semantic.ui> site> globals > site.variables. For example:
/*******************************
User Global Variables
*******************************/
/*--FONTS--*/
#pageFont: Rubik Glitch;