How can I embed a custom bitmap font into my website using CSS? I've tried the following but it just reverts to the fallback font:
#font-face {
font-family:'AgendaSemibold';
src: url('Agenda-Semibold.bmap') format('bitmap');
}
I'm trying to call it using the usual way:
font-family: 'AgendaSemibold', Times New Roman, Sans-Serif;
The font has been uploaded to my webspace but it's just reverting to Times.
Related
I want to use a specific font on a website. I don't want to use any type of plugin, and the font I want, I don't find it free to add through a link, so I have decided with the #font-face method
1 - I add the following code to the styles.css file:
#font-face {
font-family: university-roman;
src: url(https://myWebsite.com/wp-content/themes/my-Theme/fonts/university-roman.otf);
font-weight: normal;
}
2 - I have created the fonts folder in the following path of my directories:
wp-content/themes/my-Theme/fonts/university-roman.otf
3 - I have added the css corresponding to the text where I want to add the new fonts:
.site-title-main {
font-family: "university-roman", Arial, sans-serif;
}
But the text does not display the University fonts.
What am I doing wrong ?
How can I make the new fonts work?
I hope I have described the problem that I cannot solve.
Thank you
In your #font-face css declaration. An e is missing in your path /my-Them/ should be /my-Theme/ isn't it?
I am using two webfonts in a page that I convert to a PDF using dompdf. I have this in the header:
<link href='http://fonts.googleapis.com/css?family=Signika:600|Roboto+Condensed' rel='stylesheet' type='text/css'>
I then use them in CSS rules like
body {
font-family: "Roboto Condensed", sans-serif;
[ ... ]
}
h1 {
font-family:'Signika', Arial, Helvetica, sans-serif;
[ ... ]
}
Now, when I generate the PDF, the h1 is displayed with the "Signika" font, but "Roboto Condensed" is replaced by Helvetica or some other standard sans-serif font.
If I open the "preview" file (i.e. the php page which I then include in the PDF generation script), "Roboto Condensed" is displayed as expected, but it doesn't make it into the PDF. But as I wrote, "Signika" is there in the PDF, and that's somehow odd to me. BTW, I also tried to include the font-face rule directly in CSS rules for p, div, li etc. but that wouldn't change anything.
Any suggestions how I could fix that?
EDIT/ADDITION:
Thinking about it, a difference between the two fonts is that Roboto Condensed has a space in its name. I wonder if that could cause the problem (i.e. dompdf not being able to handle such a font name)? But I can't change that as long as I am fetching the fonts from the Google server.
I found the solution myself:
As I had added to my question in an edit, the reason obviously was that the font-family name "Roboto Condensed" contains a space, which dompdf doesn't seem to like.
I downloaded the font, created three versions of it with the font generator on Fontsquirrel and put them on my server, together with this stylesheet:
#font-face {
font-family: 'roboto_condensedregular';
src: url('robotocondensed-regular-webfont.woff2') format('woff2'),
url('robotocondensed-regular-webfont.woff') format('woff'),
url('RobotoCondensed-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Then, in my CSS rules I used that new font name roboto_condensedregular in font-family: roboto_condensedregular, sans-serif;
Now it works, also in the PDF.
You don't need to actually do all of this. Simply use the #importoption to embed the font in your html. Works like a charm using laravel-dompdf.
screenshot
I want to use Montserrat with a font-weight of 200 exactly like they have on the image text on this website: http://www.cohabs.com/
I have the font working using this method
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
and
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 200;
}
But the font weight can only be regular or bold according to google fonts, so where/how did that website use it with a font-weight of 200?
Montserrat light version isn't available on Google Fonts.
Google Fonts only has 'Regular' and 'Bold' version of Montserrat.
You can download more Montserrat types here: https://www.fontsquirrel.com/fonts/montserrat
it seems like they are loading font from their server
go to their main.css and ctrl+f url(../assets/fonts/montserrat-light.woff) u'll see ur self
you can find same font here, u can also load it from ur server if needed
to use any font which u want to host on server, u need to download that font and host it to ur server I suggest to place them in fonts folder and refer below code
you can replace lovelyFont with ur own font name
#font-face {
font-family: 'lovelyFont';
src: url(../'fonts/lovely_font.eot');
src:
local('lovelyFont'),
local('lovelyFont'),
url('fonts/lovelyFont.otf')
format('opentype');
}
div { font-family: 'lovelyFont', sans-serif; }
for more details refer this or this links
They are using Montserrat Hairline font for the thin letters.
For some reason the font I'm trying to add won't add itself to my website. I'd rather not do this with an image, so is it possible the font is broken? Would it be possible to fix it with just the otf or ttf?
My code (in case I'm missing something):
#font-face {
font-family: urbanJungle;
src: url('UrbanJungleDEMO.ttf');
}
h1 {
font-family: urbanJungle;
font-size: 100px;
color: #34495e;
}
Additional details: This is in the latest Chrome, other custom fonts work.
In the network console the font is red and it says cancelled.
Live URL: http://codestack.co.uk/website/
The font was from Dafont, no extra processing applied by myself, it's in the same directory as the index page. All the relevant CSS is included.
You should use Font Squirrel font-face generator for this: http://www.fontsquirrel.com/tools/webfont-generator
Different browsers need different font formats, you only provided one. The generator will convert your font to all the formats needed and give you a CSS file too, with no hassles.
You are using only TrueType font, IE support only *.eot fonts. And you are missing a lot informations. It is always better to use font stack instead of using single font, if first font went missing css use immediate next font on the list (called font-stack).
Here is an interesting article about #font-face by Paul Irish : Bulletproof #font-face Syntax
#font-face{
font-family:MyFont;
src:url(../font/MyFont.eot);
src:local('?'),
url(../font/MyFont.woff) format("woff"),
url(../font/MyFont.otf) format("opentype"),
url(../font/MyFont.ttf) format("Truetype"),
url(../font/MyFont.svg#myfont) format("svg");
font-weight: normal;
font-size:normal;
}
body{
font-family: "MyFont", Verdana, sans-serif; /* Font stack */
}
I'm using the Google Web font "Buenard" and having a difficult time getting it to display on Chrome. I know there are issues with font rendering and hinting across the various browers, but this is something else altogether. Instead of the intended font, Chrome is displaying some other dingbat font on my system. It looks great in Safari.
I can't share a link, because the site in question is behind a protected login. However, check out this screenshot to see what I'm looking at:
http://bit.ly/ImiiDM
In the CSS, I am using a font stack of '"Buenard", Georgia, "Times New Roman", serif;' I tried also just using '"Buenard", serif;' No effect.
Any ideas?
Instead of using stylesheets to attach the font just search the web for your desired font and download it and attach it like so:
#font-face {
font-family: buenard;
src: url('buenard.ttf');
}
After that you can use it just like a normal CSS declaration:
p.custom_font{
font-family: buenard; /* no .ttf */
}