I have a wordpress blog " www.freelancing4arab.com", I want to change the theme font, I edit the css but nothing changed, obviously my blog is in Arabic so I want to use a cool arabic font.
So what do you think ? what was the problem? why the changes didn't take place ?
And can I use a special font I mean a font that the user doesn't have on there machine but it's uploaded on my server - I know it's possible but I want to know how -
This is my website css file : http://freelancing4arab.com/wp-content/themes/WebColors/style.css
To use non web-font, please check out font-face: http://sixrevisions.com/css/font-face-guide/
I am not sure what you'd changed in your css. But the font isnt changing is because:
font-family: HelveticaNeue, Tahoma, Geneva, sans-serif;
HelveticaNeue is not a web font. so if you dont have HelveticaNeue installed in your computer, you wont see text appear in that font.
#font-face { font-family: ArabicFont; src: url('ArabicFont.otf'); }
Related
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; }
This morning my webpage and whole website looked totally different.
Although I didn't even touched anything. I found other people on the Google product forum who complain about the same thing. But I want a solid solution.
I use a css file from where I import the font
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
This is used on every page.
Now it seems that Google changed the font this night into a, for me, horrible looking font.
Now I found another font, which I want to download and use on my server, so this kind of google jokes never effect me anymore.
But I can't if I can do this and how.
My question is: can I download a font store it on my server and use it in my CSS?
Sure, you just need to define the font in your CSS and where it is located
You can define a font with
#font-face { font-family: 'myfont';
src: url('path/to/yourfont.ttf') format('truetype'); }
and then use it like this (with a Fallback to a default font):
.classname {
font-family: 'myfont', Arial, Helvetica, sans-serif;
}
I found a 'fast' solution for this
The 'thin' version was used here, but was not specified. Google changed the options and you need to specify with specific font version you want. In my case it was
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300);
My website looks 'normal' again :)
The Google blog forum discribes some other solution
Google blog
I tried to copy the font of this website menu but when I put the style in my own WordPress CSS theme I still get the bold version of it. Is there a special trick so I can get the light version of the font?
Got the font the same way loaded in what they have.
If you are indeed looking for the font Montserrat and you want the light version, you can use this import reference:
#import url(http://allfont.net/allfont.css?fonts=montserrat-light);
And you can use it like this in css:
font-family: 'Montserrat Light', arial;
More information about this font can be found here: http://allfont.net/download/montserrat-light/
It looks like the Google font Montserrat:
http://www.google.com/fonts/specimen/Montserrat
It seems this font only comes in Normal (400) and Bold (700):
http://www.google.com/fonts#UsePlace:use/Collection:Montserrat
For the Normal version of the font, try adding:
font-weight: 400;
to your CSS. Also, make sure you're referencing the font correctly by importing it first:
#import url(http://fonts.googleapis.com/css?family=Montserrat);
then adding the style to the correct element:
font-family: 'Montserrat', sans-serif;
As title already says: font-face does not work with my Chinese fonts.
I have downloaded some Chinese fonts, but for some reason these are not recognized by my css.
This is the css I use:
#font-face
{
font-family: 'chinese';
src: url('chinese.ttf') format('truetype');
}
html {
height:100%;
font-family:"chinese";
}
Now, if I change the url to a 'normal' font, it works; also for downloaded fonts (I tested it with Din). Unfortunately the 'normal' fonts do not support Chinese, so the characters will stay unaffected.
Both fonts are located in the same folder as the css file, so the url is not the problem. Also all character sets are correct (or else I couldn't see the default Chinese at all).
Is there maybe some extra thing I have to do for Chinese? Or what is it?
When declaring a Chinese font family, it’s typically a good idea to type out the romanization of the font (for example, “SimHei”) and declare the Chinese characters as a separate font in the same declaration. What this does is help reference the font file regardless of weather it’s been stored in the local system under its Chinese or western name – you’re covering all your bases here.
Example :
font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
For Your Reference : Good Rules for Using Chinese fonts in CSS
I think this may help you to resolve your problem.
refer this post,
I think you need the same answer :)
http://stackoverflow.com/questions/15756093/is-the-css-right/15756147#15756147
convert fonts to "woff"
that will solve your purpose..
Sample :
#font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: 700;
src: local('Droid Serif Bold'), local('DroidSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/droidserif/v3/QQt14e8dY39u-eYBZmppwTqR_3kx9_hJXbbyU8S6IN0.woff) format('woff');
}
you need to modify font name and url :)
As far as I know, there's a service based in Taiwan can help you use different Chinese font.
http://en.justfont.com/fonts
Due to the large size of Chinese font file, it's recommended to use Google cloud service. But there's no appropriate Chinese font on it. So you can give it a try on this justfont web font service.
Select any font you want for specific font weight. Then it'll be added to your project.
Choose your selector like .notosans, #notosans or h2
Click "JS" button and get your code for your setting
Add it befor <body>
Insert your class or id.
Give it a try and get your beautiful Chinese font. :)
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.