úterý 5. července 2016

Jak na správný font

úterý, července 05, 2016 8 komentářů
Často vidím na jiných blozích, že v šabloně je nastavené písmo, které ale nepodporuje všechny znaky, tudíž písmena s čárkami a háčky nemusí fungovat. Takže dnes mám pro vás návod, jak správně do šablony zakomponovat font, aby fungoval tak, jak má...


Můj návod.

Kopírovat se zdrojem! 


Fonty si vybírám přímo na googlu. A abych si zajistila, že mi půjde diakritika, vyplním si do zkušebního textu následující text

ěščřžýáíéťďňĚŠČŘŽÝÁÍÉŤĎŇ



V pravém menu si opět hledáte nastavení a typy písma. Široké, tenké, ručně psané a podobně. Můžete si navolit opět Latin extended, ale už to není stoprocentní, že vám to ukáže jen písma, kde diaktirika půjde...


Zvolený text, tedy moje kouzelná písmenka, vložíte přímo do typu písma, které se vám líbí... A u toho, co chcete kliknete na plus... Zobrazí se vám šedá lišta, kde uvidíte všechny písma, která se vám uloží. Po ukončení výběru na ni kliknete.



V záložce Customize pro jistotu zaškrtněte obě položky - Latin i Latin extended, pokud jsou a pokud vám to šablona povolí. Pokud bude šablona vyhazovat hlášky o chybě, Latin Extended nepoužívejte ... Tuhle část obvykle ignoruji.


V záložce Embed zvolíte buď Standart a text zkopírujete, vložíte za <head>, až nad css styly


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
<meta content='...' name='keywords'/>
<meta content='...' name='author'/>
<meta content='...' name='description'/>
<meta content='index, follow' name='robots'/>
<meta content='text/html; charset=utf-8' http-equiv='content-type'/>

<link href="https://fonts.googleapis.com/css?family=Modak&subset=latin-ext" rel="stylesheet"> 


Druhá možnost je použít @import, a to se vkládá jako v předcházející verzi hned za </b:skin>, tedy pod css styly


<style>
@import 'https://fonts.googleapis.com/css?family=Modak&subset=latin-ext';
</style>

A pak už to zůstává stejné,  v posledním kroku na google fonts si už jen zkopírujete název fontu font-family: ..., který použijete v css stylu tam, kde potřebujete. V textu, nadpisech a podobně, například takto:



A to je vše... :-) Už by to mělo fungovat správně.



Sdílení článku:
Sdílet emailem Sdílet gmailem Sdílet Facebookem Sdílet Googlem Plus Sdílet Twitterem Sdílet Pinterestem Sdílet Tumblrem Sdílet Bloggerem Sdílet Wordpressem Sdílet whatsappem

Autorka článku:

Lucy Lillianne Vždycky mě bavilo hrát si s grafikou, dělat blogy a jejich vzhledy. Nikdy jsem se nepovažovala za nějakého experta a ani nikdy nebudu. To, co sem publikuji jsou věci, které by se mohly někomu do budoucna hodit nebo i mě samotné, pokud bych nějaký postup zapomněla... Každopádně jsem ráda, že sem tam si nějaký článek najde svého čtenáře nebo rovnou uplatnění :-)

štítky

8 komentářů:

  1. Tohle je super! Dík za návod! :) S těmi háčky občas docela bojuju a přenastavovat font posedmé se mi většinou nechce.

    OdpovědětVymazat
    Odpovědi
    1. Obvykle se tam dá najít písmo, které blbne, ale když se to udělá tímto postupem, mělo by to být ok :-)

      Vymazat
  2. Velká škoda, že to platí jen pro blogspot, jinak je to skvělý návod! :)

    http://boook-planet.webnode.cz/

    OdpovědětVymazat
  3. Tyhle tipy pro blogery jsou perfektní! S řadou věcí se bezradně potýkám, protože opravdu nejsem žádný IT expert, a tohle je fat nápomocné, tak jen tak dál :-)

    OdpovědětVymazat
  4. Děkuju moc :) Ono je to pak hrozně nevzhledné :p

    OdpovědětVymazat
    Odpovědi
    1. jj, to znam, kdyz jsem zacinala, nasla jsem si treba nadhernou sablonu, ale to pismo me odradilo...

      Vymazat


  • Tutorial na šablony

    Krok za krokem, jak si vytvořit vlastní blogovou šablonu po svém...

  • Tipy pro blogery

    Nápady a postřehy, odkoukané fígle, prostě vše, co by se vám mohlo hodit při práci na vašem vlastním blogu...

  • Moje grafika

    Amatérské pokusy o grafiku, mnohdy vytvořené s obrovským štěstím nebo díky volně stažitelné předchystané práci...

  • Calibre program

    Pár návodů s postupy, které jsem objevila díky experimentům s programem nebo diskuzním fórům na netu. Calibre slouží ke správě elektronických knih...