I added the stylesheet in the .info file and pasted in the url for the google font but in firebug it just shows the entire page indicating that it is not linked correctly. How are google font linked in drupal 7?
Add this in your template.php file (located in theme folder) :
function YOURTHEMENAME_preprocess_html(&$variables) {
drupal_add_css('http://fonts.googleapis.com/css?family=Raleway:400,100,700', array('type' => 'external'));
}
(replace YOURTHEMENAME with the real name of your theme).
And then the correct css code in your css file.
Something like :
body {
font-family: 'Raleway', sans-serif;
}
You could make you life a lot easier by just using the contributed Google Fonts module...it does everything for you and has been proven to work many times.
Related
I use Joomla v3.9.8 stable on my website with a template named AS002066 and i want to use some additional fonts provided by the google API.
I found some code in a file from my template called 'fonts.php' and added there code as it is written for other fonts from google too.
I also added the needed code in 'mod_as_menu.xml' but nothing does work.
May i missed some thing?
This is what i added to my fonts.php. It's the same sheme like the entrys brought by the template:
case 'UnifrakturCook':
$font_arr['fontlink'] = "<link href='https://fonts.googleapis.com/css?family=UnifrakturCook&subset=latin,cyrillic,greek' rel='stylesheet' type='text/css'>";
$font_arr['fontfamily'] = "font-family: 'UnifrakturCook', Arial, serif !important;";
break;
And here what i added to my mod_as_menu.xml:
<option value="UnifrakturCook">Google:UnifrakturCook</option>
But it doesn't matter what i choose. It will not change any font.
I hope someone can help me with this.
I'm trying to use a custom font on my blog which is I haven't make it work yet. Maybe you guys can help me out on this.
I just want my blog title to have its own font. here's the HTML structure
http://prntscr.com/curez2
First thing I did was I uploaded my ttf font in my asset folder
http://prntscr.com/cura4a
Next, import the font in CSS "main_style.css"
http://prntscr.com/curfro
here's the class on my blog-title
http://prntscr.com/curgr8
did I miss something? can someone help me out please. thanks!!
You need to include the full path to the .ttf file on http://prnt.sc/curfro
It looks like you have everything right, however not seeing a live example makes it a little hard to isolate. But there are a few things to consider. For example:
Did you try publishing the site?
Are you ONLY trying the Blog Title?
IF you have set your Font Settings for the Title and Blog Post
Title, to a specific font, it's going to override the Theme's design
and your custom Font. In that case edit the Font Settings and choose
"Default". Then try to see if it works(dont forget to publish). See: https://hc.weebly.com/hc/en-us/articles/201505666-Edit-Fonts
Is the 'Content Area' a div with an ID of content <div id="content"></div> (IF not that could be the issue.) Note: #content h2.blog-title could also be written as .blog-post .blog-header h2.blog-title
Have you tried a different font file(try a different font type/file)
With that, you should at least be able to isolate the issue, if not resolve it.
I'am trying to solve a font issue on heroku using PDFkit since few days and nothing seem to work for me....
I've already did few solutions such as :
Convert LucidaHW from Squirrel and do as follow ...
#font-face {
font-family: 'lucida_handwritingitalic';
src: url(data:application/x....
or this solution with .font on that website: http://www.mobalean.com/blog/2011/08/02/pdf-generation-and-heroku
or using :
kit.stylesheets << "#{Rails.root.join("public","stylesheets", "pdf", "pdf.css.scss")}"
I also moved my pdf.css.scss into vendor folder, into public folder and nothing ...
Right now, i am a bit confused because almost all of it work in dev mode (on my localhost) but nothing on heroku.
I'am aware this is not the first ticket about that issue but nobody found a solution that worked for me.
I ran into a similar issue a few months back.
This is what I'm doing right now and it has been working great for me:
1.Serve assets in base64:
add this helper method:
def asset_data_base64(path)
asset = Rails.application.assets.find_asset(path)
throw "Could not find asset '#{path}'" if asset.nil?
base64 = Base64.encode64(asset.to_s).gsub(/\s+/, "")
"data:#{asset.content_type};base64,#{Rack::Utils.escape(base64)}"
end
and in your template, include assets like this: (the example uses haml)
= stylesheet_link_tag(asset_data_base64('pdf/pdf.css'))
= javascript_include_tag(asset_data_base64('pdf/pdf.js'))
2.custom fonts
move all your fonts to a folder in your project. (I put mine under vendor/assets/fonts) then add a new initializer file in your config/initializers
if Rails.env.production?
font_dir = File.join(Dir.home, ".fonts")
Dir.mkdir(font_dir) unless Dir.exists?(font_dir)
Dir.glob(Rails.root.join("vendor","assets","fonts", "*")).each do |font|
target = File.join(font_dir, File.basename(font))
File.symlink(font, target) unless File.exists?(target)
end
end
replace Rails.root.join("vendor","assets","fonts", "*") withe the path to the folder where you put all your font files.
then in your css, do not use font-face, use the font name directly, e.g. font-family: Gotham;
Also, do not user fallback fonts! In some versions of wkhtmltopdf, it always uses the fallback font if one is provided.
=============================================
I learned the base64 trick from here: https://github.com/mileszs/wicked_pdf/issues/257
Custom fonts solution was found here: http://www.mobalean.com/blog/2011/08/02/pdf-generation-and-heroku
Try putting the font in a .fonts folder in you app root and push it to Heroku - just refer to the font via the font family and not with a src. That's how I use custom fonts on Heroku with wkhtmltopdf and it works for me.
I am not a programmer. The language is foreign. I am creating a WordPress website. I created a child-theme.
I read the theme documentation. Understood very little.
sent an email to the theme owner. No answer (2 weeks ago)
searched the web - found many websites - i.e. http://www.w3schools.com/ - http://css-tricks.com/sans-serif/ & others - me, no speak the language. Can you place html code in a CSS file?
The child-theme consists of a new style.css file. The top section of the style.css file is what was needed to create the child-theme. Then there are color changes which I inserted & that has gone very well.
Changing the font family is confusing. Poking around the parent theme and also using 'Firebug' the font(s) seem(s) to be ('inherited'?). .genericon, 'Roboto Condensed', Sans-serif, Arimo, Arial and a few other standard MS Word fonts. I saw on the Google font site a couple of fonts I would prefer to use for my website.
How do I (or even can I) download the Google fonts to the Style.css file?
What do I need to insert in the child style.css file to override the parent fonts?
In case this is important, the theme has more than one template (PHP?) option. I am using W7 OS.
The Google Fonts site is really direct and helpful.
In your example, you mention Roboto. Here's the page for that font.
You would check the varieties of Roboto that you want to be able to use on your site under Step 1.
Step 2 allows you to select additional character sets -- for example if you were likely to be displaying text in Russian.
Step 3 gives you three ways to "enable" the font on your site. You'll be placing a line of code somewhere, telling users' browsers to go and get the font from Google when called for. The easiest way to do this is probably the #import option. Copy and paste the code under that tab into your style.css at the top (that's important -- it should go before any of the stuff describing the layout or type on your stylesheet). Your sub-theme likely has a bunch of other #import lines up there already.
Step 4 shows what specifically you need to tell your stylesheet to look for.
Good luck!
External style sheets have the highest hierarchy, so just specify your styles with the id, class or element name.
Google is your friend here.
To use google fonts, go to the google font page and search for your font with the search box on the left, then click add to collection. Once in your collection, go to your collection and click "use".
You should get an "#import()" code, place this at the top of your external sheet.
Is there a way to copy (from Firebug for example) the absolute instead of the relative URL of a web font specified within an #font-face rule?
Example:
I'm viewing the main.css file for a site in Firebug and I get this:
#font-face {
font-family: "myfont";
src: url("myfont__-webfont.eot");
}
How would I find the absolute path for this font?
I know that it should be next to the CSS file in this case, but I can't seem to find it.
Firebug's CSS panel currently doesn't offer an option to copy the URL of the webfont yet. So I created an issue, which was copied over to GitHub as issue #7320 asking for this feature.
Though there's another way to reach this:
Switch to the Net panel and enable it
Reload the page via Ctrl+F5 (or ⌘+F5 on Mac OS X, I guess; circumvents the fonts cache)
Click the Fonts filter
Right-click the request for the font and choose Copy Location
Step 1- Go myfont_-webfont.eot
Step 2- Go Font-Face Generator service
Step 3- myfont_-webfont.eot convert to web font.