I would like to use a font I've paid from webtype.com on my wordpress blog. I don't own the blog so I can't change anything in the main php files as function.php. So, the only solution I've found is to add this content in the css customization file :
#font-face {
font-family: "Scout Normal";
src: url("http://the/url/of/the/file") format("woff");
font-style: normal;
font-weight: normal;
}
.block p {
font-family: "Scout Normal";
}
The problem is that everytime i save the file, Wordpress remove the url in the loading of the font, that means
src: url("http://the/url/of/the/file") format("woff");
become
src: format("woff");
Do you have any ideas to force the loading of the font, or an other idea to load it ?
Thank you for your help.
You can add it to functions by change it from wordpress backend here: Appearance > Editor
http://prntscr.com/4ddfn4
Related
With the node modules i have this file added to my theme. But it is showing in the "Google Pagespeed Insight". Consider using <link rel=preload> to prioritize fetching resources that are currently requested later in page load.
In my CSS file it is import like this.
#font-face {
font-family: 'Graphik Web';
src: local('Graphik Web'), url('#{$spirit-font-path}Graphik-Regular-Web.woff2') format('woff2'),
url('#{$spirit-font-path}Graphik-Regular-Web.woff') format('woff');
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-display: swap;
}
But still it is not working as in the report from Google Pagespeed Insight. Please let me know if i think missed anything or to add something.
To get rid of that error, you have to get rid of the #import (which here translates to src url). The #import directive blocks parallel downloads. You have to change the code to import the woff in the main html with a link tag.
I'm trying to make the below code work to upload the font TrashHand to my website in Wordpress. I have edited out the website name but otherwise the code remains the same.
The code is contained in my style.css file and I know that Wordpress is reading the file because when I change the color line below, it changes the color of the text.
I also know that my url is correct because if I paste the url into my browser, the font downloads automatically.
I may be making a dumb mistake as I am a novice at css, but any help would be much appreciated.
#font-face {
font-family: TrashHand;
src: url(##websitename##.com/wp-content/themes/twentyseventeen-
child/fonts/TrashHand.ttf);
}
p {
font-family: TrashHand;
color: green;
}
h1 {
font-family: TrashHand;
}
change these lines
src: url(##websitename##.com/wp-content/themes/twentyseventeen-child/fonts/TrashHand.ttf);
}
to
src: url(/wp-content/themes/twentyseventeen-child/fonts/TrashHand.ttf);
}
No websitename is needed as the src is looking for an absolute URL
you should use .woff and .woff2 font format with .ttf
#font-face {
font-family: 'TrashHand';
url('##websitename##.com/wp-content/themes/twentyseventeen-child/fonts/TrashHand.woff2') format('woff2'),
url('##websitename##.com/wp-content/themes/twentyseventeen-child/fonts/TrashHand.woff') format('woff'),
url('##websitename##.com/wp-content/themes/twentyseventeen-child/fonts/TrashHand.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
you can generate woff and woff2 online using your .ttf file.
I am using Duster as my theme. I want to change the default font. Is there any way to do that?
You can use Easy Google Fonts Plugin
Step 1 install plugin and then go to => setting => google fonts . Add a css selector like if you want to change the whole website font family change , then add a body css selector .
step 2 Go to => Apperance => customize => Typography => Theme Typography => add a font family you want to use .
...or, if you don't like plugins, simply do this and add stylesheet with it after all the other stylesheets in header:
body {
font-family:Whatever, "Whatever In Space", sans-serif; /* Actual fonts of course chosen by you */
}
If this doesn't work and is overriden change to font-family:Whatever, "Whatever In Space", sans-serif !important;, but using !important is generally considered a last resort.
If you want to change the font without using any plugin, you can follow the steps below:
For example if you want to change fonts to BYekan or any other fonts, you have to create a font folder in wp-content->themes->my theme->font.
Upload the fonts to this folder.
In beginning of the CSS file, add these lines:
#font-face {
font-family: 'BYekan';
src: url('font/WebYekan.eot');
src: url('font/WebYekan.eot?#iefix') format('embedded-opentype'),
url('font/WebYekan.woff') format('woff'),
url('font/WebYekan.ttf') format('truetype'),
url('font/WebYekan.svg#WebYekan') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'BKoodakBold';
src: url('font/BKoodakBold.eot');
src: url('font/BKoodakBold.eot?#iefix') format('embedded-opentype'),
url('font/BKoodakBold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
-moz-font-feature-settings: "calt=0,liga=0";
}
Change font-family to:
font-family:"BKoodakBold",BKoodak,byekan,Arial,Helvetica Neue,sans-serif;
everywhere you want to change the font.
I am not sure what is wrong, but my phone was unable to show my blog post using this font. It reverts back to the standard font used in blogspot again
#font-face{
font-family: 'citystencilregular';
src: url('https://www.dropbox.com/s/3p2opgb34hqtabs/citystencil-webfont.woff2?dl=0') format('woff2'),
url('https://www.dropbox.com/s/0vrf25i02ol7qpz/citystencil-webfont.woff?dl=0') format('woff');
font-weight: normal;
font-style: normal;
}
Of course you can not. If I use your link, I do not get the font file, but an HTML which offers me download the file to load page.
Get this to work needs the font file being send back, not a html page.
Like here: https://fonts.googleapis.com/css?family=Open+Sans
i understand its a bit rude to ask a question from scratch however i have done my research and tried a few examples with no sucess.
im trying to display a font from my local servers.
ex. DigitaldreamNarrow.ttf
which is located in :
css/fonts/DigitaldreamNarrow.ttf
i have tried placing it in my css file in the following manner:
#font-face {
font-family: DigitaldreamNarrow;
src: url(‘css/fonts/DigitaldreamNarrow.ttf’);
}
.top {
font-family: DigitaldreamNarrow;
font-size: 0.2%;
}
however at this point im lost and i dont see any results in my display.
help?
Deploying fonts via CSS is generally unsupported. Take a look at Cufon.
#font-face {
font-family: 'ArvoRegular';
src: url('Arvo-Regular-webfont.eot');
src: local('☺'), url('Arvo-Regular-webfont.woff') format('woff'), url('Arvo-Regular-webfont.ttf') format('truetype'), url('Arvo-Regular-webfont.svg#webfontau9vOdrl') format('svg');
font-weight: normal;
font-style: normal;
}
You're going to have different results from different browsers (not all browsers support/use 'eot' for example). Check out font squirrel, and download an #face kit. Very helpful resource. http://www.fontsquirrel.com/fontface
This is more than likely the direction fonts will take, and Cufon will likely become "Gif Builder"...IMO.
#trey, write this
#font-face {
font-family: 'DigitaldreamNarrow';
src: url(‘../css/fonts/DigitaldreamNarrow.ttf’);
}
may there is a problem with your url please it.
May be you have to add inverted comma to the font .