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
Related
i have this template to edit and i want to change the font
here's what i have
#import url(font-awesome.min.css);
#import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
i want to use this font: https://fonts.google.com/specimen/Playfair+Display?selection.family=Playfair+Display
then i have like five places in the css code where the it shows
font-family: FontAwesome;
what i did was i downloaded the PlayfairDisplay and pasted in the "font" folder, then i changed all the "font-family:" to the name of the new font, but that did not change anything.. am i missing something?
If you want to use font files instead of the google import, you will have to use #font-face in css and point it to the font file. For example:
#font-face {
font-family: your font name;
src: url(sansation_light.woff);//add your font file here
}
div {
font-family: myFirstFont;
}
you can refer to the following example from w3 schools for more examples: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
I am trying to add some custom font in my site but unable to do. I am not sure if I am using a right or wrong path. Kindly help.
#font-face {
font-family: XfinityStandard
src: url('landingpage/fonts/XfinityStandard-Light.woff2') format("woff2");
where landingpage is folder name.
There are two main ways to check:
Is the font actually working (i.e. can you see it rendering properly), and
Inspect your page (e.g. in Chrome, right-click the text you expect the font to render on, and select Inspect from the drop-down menu. In your Styles tab, at the right-hand bottom of the page, there should be a section called Rendered Fonts. If you have implemented your font correctly, it should show here (in addition to the css hierarchy applied, where your font should be listed).
If your font is not showing here, make sure you follow the following:
The #font-face rule should be added to your css before any styles
Use your rule in your css by specifying the font as XfinityStandard and provide a fall-back like sans-serif, e.g. body { font-family: 'XfinityStandard', sans-serif; }
Make sure you have wide support, so when you specify your font, add an additional source for format('woff')
As Devansh J mentioned, make sure your font is relative to the css file
If you are still having issues, maybe consider a hosted font like Google Fonts, as follows: #import url(///fonts.googleapis.com/css?family=Montserrat which you can use as body { font-family: 'Montserrat', sans-serif; }
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;
now, i want to use Monotype Corsiva. i add the font in my theme ,then in css file using font-family:Monotype Corsiva ,but some one tips me: font used for site title and headings is not working if it's not installed on users system. You should either remove font file from theme directory or include it in css file in apropriate way.
how to include it in css file in apropriate way? thank you
You need to use #font-face with your font in either .ttf or .eot
Below is an example
#font-face {
font-family: 'RieslingRegular';
src: url('fonts/riesling.eot');
src: local('Riesling Regular'), local('Riesling'), url('fonts/riesling.ttf') format('truetype');
}
h1 {
font-family: 'RieslingRegular', Arial, sans-serif;
}
For more details, look here http://bavotasan.com/2010/embedding-fonts-web-site-css-font-face/
Monotype Corsiva is a copyrighted font. Check out http://www.fonts.com for conditions and instructions for use. They have a policy that allows a limited number of page views (25,000) for free. The instructions and procedures might be a bit confusing, but in the end you will have a script element generated by them to add to your pages, and then you will just use the font under the name they give you (it seems to be Corsiva W01).
Alternative, try and find a suitably similar free font from Google Web Fonts, for example.
Here is a sample CSS
h1 {
font-family: 'header-font', arial, sans-serif;
}
p {
font-family: 'paragraph-font', arial, serif;
}
Is it possible to load any remote Google Font (let say 'Lato') so that it's family name in CSS would be 'header-font'?
Edit: The idea behind this is to be able to easily swap fonts in a WP theme. Unfortunately using variables in CSS preprocessors is not an option in my case.
I don't think you can to be honest. The Google font has a predefined name when you view the google font. See this for example: http://fonts.googleapis.com/css?family=Akronim
Its name is set as 'Akronim' and I dont think you can reference it by any other name.
Yes, very easily. Once you located the font at Google, eg.
#import url('https://fonts.googleapis.com/css?family=Lato:400&subset=latin-ext');
just direct your browser to the url specified:
https://fonts.googleapis.com/css?family=Lato:400&subset=latin-ext
What you get back is the #font-face CSS item for the font (or fonts). Simply use this verbose version in your CSS instead of the original #import specification. You can freely rename the font-family item in any of these descriptions. Yes, you have to make sure there are no clashes with other fonts but the naming is completely up to you.
Yes, you can give any name you want when you define the font family in the #font-face style declaration and use that name to reference it later in the stylesheet.
#font-face
{
font-family: whateverYouWant;
src: url('example.ttf'),
url('example.eot');
... /* and so on */
}
Whatever you name the style as in the font-family property is how it will be referred to from the rest of the document. However I don't know how it competes with local font files (so if you tried to name a custom font Arial I'm not sure what you would get - the custom font or the real Arial). I don't know why you would do that anyway though.