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.
Related
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 currently building a website for a language with another person and there is a problem, because a font is necessary to show the alphabet of this language, for which normal characters don't exist. But apparently, however I can view the font, he can't. It is possible for us to put a download-link to the font at our homepage, but I would prefer every user to see it immediately. The CSS is:
#font-face {
font-family: gothicw;
src: url("gothic.eot") /* EOT file for IE */
}
#font-face {
font-family: gothicw;
src: url("gothic.ttf") /* TTF file for CSS3 browsers */
I am working on a web layout template which I have downloaded, and I noted on some CSS files there are references to external links to load fonts and themes, such as the following line of code at the beginning of a .css file:-
#import url(https://fonts.googleapis.com/css?family=Karla|Ubuntu)
When I open the link inside my browser I noted it will load the following:-
#font-face {
font-family: 'Karla';
font-style: normal;
font-weight: 400;
src: local('Karla'), local('Karla-Regular'), url(https://themes.googleusercontent.com/static/fonts/karla/v2/azR40LUJrT4HaWK28zHmVA.woff) format('woff');
}
#font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
src: local('Ubuntu'), url(https://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff) format('woff');
}
My problem is that I am using this template for our intranet, so users might access the intranet even if they do not have access to the internet. So my question is how I can add these fonts and themes inside my asp.net mvc project , so that the contents will be loaded from our server and not from Google site ?
Thanks ?
EDIT
I replaced the following :-
#import url(https://fonts.googleapis.com/css?family=Karla|Ubuntu);
with :-
#font-face {
font-family: 'Karla';
font-style: normal;
font-weight: 400;
src: local('Karla'), local('Karla-Regular'), local('/Content/fonts/azR40LUJrT4HaWK28zHmVA.woff');
}
#font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
src: local('Ubuntu'), local('/Content/fonts/_xyN3apAT_yRRDeqB3sPRg.woff');
}
but i did not get the font effect ?
BR
You may want to see this section from the Google FAQ on the subject
Can I download the fonts on Google Fonts to my own computer?
Yes. To
download the fonts, simply add fonts to your collection and click the
"Download your Collection" link. You can download the fonts to use
them for your mockups, in your documents or to host them on your own
server.
This article goes into further step by step detail about how to do this, it should solve any issue with end users not having access to the internet- as long as you're local references to the fonts are correctly defined in your CSS.
You should download the font from the Google site, then process it with a font file generator like the FontSquirrel generator, which also produces a CSS file you can use.
The point is that different browsers need different font formats, served using a suitably crafted #font-face rule.
When you use the fonts using a URL like https://fonts.googleapis.com/css?family=Karla|Ubuntu, the Google server recognizes the browser and sends just CSS code tailored for that browser. If you just copy that onto your page, it will only work on that browser and sufficiently similar browsers.
You can self-host Google Fonts, read Self-host web fonts quick guide:
https://fonts.google.com/knowledge/using_type/self_hosting_web_fonts
Here you can find a practical example of how this can be done:
https://developers.google.com/fonts/docs/material_icons
Setup Method 1. Using via Google Fonts - provides an example of how the Google Material Icons font can be used via fonts.googleapis.com.
Setup Method 2. Self hosting - provides an example of how the same Google Material Icons font can be self hosted.
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
How can I create a custom font family that can be used inside of <span></span> tags, and only within those tags and not site wide?
My end goal is to be able to use this within a specific area of the site, and not anywhere else.
Give the span a class and assign font-family css properties to it, IE:
<span class="specialFont">Hello</span>
then in your css:
.specialFont {
font-family: verdana;
}
As per your comment, to use custom fonts you can use this, HOWEVER keep in mind this isn't supported in all browsers:
#font-face {
font-family: CustomFont;
src: URL('/fonts/myfont.otf');
}
.specialFont {
font-family: CustomFont;
}