I have this as style used in google app script webapp where we setup style sheet also as html page (with style tags included) and include them in main html page. It uses default font instead of snippet below.
#font-face
{
font-family: myFirstFont;
src: url('https://dl.dropbox.com/s/g2lk505elj1aamj/MISTV___.TTF')
}
div.happy {
font-family: 'myFirstFont';
}
Regards,
Miten.
Font-faces are not allowed with HTMLService and Caja Sanitization, ran into the same problem last week myself.
https://groups.google.com/forum/#!topic/google-caja-discuss/WhqEZqfFn6g
Related
So, I'm brand new to web development, and I am trying to learn all about CSS right now. I noticed not many font-family's come with VSCode so I wanted to download some to get in VSCode to use in my CSS. Question is; how do I do that? I downloaded the .ttf file of the font I want to use in my CSS but I'm unsure how to get VSCode to recognize the font-family.
You can use https://fonts.google.com/ to find the font you want, than select it and it should give u a link, paste it on top of your css file
ex :
link: <link href="https://fonts.googleapis.com/css2?family=Antonio:wght#100&display=swap" rel="stylesheet">
using it: font-family: 'Antonio', sans-serif;
First of all the fonts you use have nothing to do with VS Code. What you want to do is integrate your downloaded font directly in your CSS code which can be done like so:
#font-face {
font-family: myFirstFont;
src: url(your_font.tff);
}
body {
font-family: myFirstFont;
}
You have to specify the #font-face CSS at-rule:
#font-face {
font-family: myfont;
src: url("myfont.ttf");
}
and then you can use it like so:
* {
font-family: myfont
}
I have specifics fonts that will be tied to user layouts. When a user logs in, they will see their selected fonts which will be loaded from the server.
I will be using Angular to style the specific elements. How can I use #font-face in ng-style? Is it possible?
font-family works if I type all the possible font-faces prior which is tedious and hard to maintain. the CSS is the section I want to load dynamically based on the user's fonts
**CSS**
#font-face {
font-family: CustomFontName;
src: url('CustomFont.ttf');
}
#font-face {
font-family: CustomFontName2;
src: url('CustomFont2.ttf');
}
**JS**
textbox.style = {
'font-family': CustomFontName
}
**HTML**
<p ng-style="textbox.style">{{ textbox.placeholder }}</p>
The website is here, you can test it out with validation code "ImprintPlus" and then change templates. the user will want their customized fonts in there.
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;
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