Sposób jak ustawić polską czcionkę w Wordpressie

Często się zdarza, że korzystając z szablonów zagranicznych Wordpress jesteśmy niejako "skazani" na czcionki bez polskich znaków. W takiej sytuacji polskie znaki wyświetlają się w innej czcionce i wyglądają nieestetycznie. W takiej sytuacji mamy do wyboru, albo zrezygnować z eleganckiej czcionki na rzecz najpopularniejszych dla polskiej lokalizacji, albo.. skorzystać z naszego tricku!

Przykład niepoprawnie wyglądającej czcionki w Wordpressie i jej poprawa po zastosowaniu porady:



Do dzieła!

Najprostszym rozwiązaniem i często wykorzystywanym w szablonach jest pobieranie czcionki z Google API Fonts, w takiej sytuacji w pliku style.CSS(w lokalizacji: wp-content/themes/nazwa-skórki) znajdziemy taki mniej więcej odnośnik:

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:400,700);

gdzie "Open+Sans+Condensed" to nasza egzotyczna czcionka..

Google API Fonts to potężne narzędzie i wbrew pozorom zawiera również polski odpowiednik danej czcionki. Aby wymusić ładowanie polskiej wersji czcionki wystarczy do końcówki zapytania dodać: &subset=latin-ext
Gotowy kod wygląda tak:

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:400,700&subset=latin-ext);

Po podmianie zawartości i zapisaniu zmian nasza strona wygląda znów profesjonalnie - prawda, że proste?

Niestety niektóre skórki korzystają z CUFON i ładują czcionki osobno np. poprzez plik js. W tej sytuacji pozostaje skorzystać nam ze strony Cufón Fonts - Free Cufon Font Library [BETA] i tam pobrać paczkę czcionek uzupełnioną o polskie znaki. Niestety sam proces i lokalizacja czcionek jest troszkę trudniejsza i nadaje się następny poradnik

Używam wordpressa 3.7.1 z motywem Graphene i w tej wersji w pliku style.css nie ma tych wpisów. Fonty są załadowane do osobnego folderu: 

 

Kod:

@font-face {

font-family: 'Genericons';
src: url('fonts/genericons/genericons-regular-webfont.eot');
src: url('fonts/genericons/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/genericons/genericons-regular-webfont.woff') format('woff'),
url('fonts/genericons/genericons-regular-webfont.ttf') format('truetype'),
url('fonts/genericons/genericons-regular-webfont.svg#genericonsregular') format('svg');
font-weight: normal;
font-style: normal;
}

Nie wiem co tu by zmienić aby poprawić Polskie znaki:

 

a wyglądają one tak jak podałeś w newsu. 

Użytkownik pawel315 edytował ten post 14 11 2013 - 17:49

Witam, czy moglby Pan wyjasnic jak zrobic to w nowszej wersji wordpressa? Obecnie mam WP 3.8 i ten sam problem z brakiem Polskiej czcionki. Nie mniej jednak w pliku STYLE.CSS nie ma informacji o czcionke. Prosze o pomoc- odwdziecze sie.

Ostatnio się bawiłem w dodawanie czcionek CUFON do styli, które nie mają domyślnie takiej funkcjonalności. Procedura skraca się do:

1. Umieszczenia plików czcionki w folderze z Wordpressem np. z FontSquirel
2. Dodania odpowiednich styli w pliku CSS np.
   

   ol, ul { list-style: none inside none; font-family: "robotobold", Verdana, sans-serif;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility; }
   

   tzw. font family

3. Dodanie do custom.css (może też być default.css, zależy od skórki) deklaracji użycia czcionek CUFON:

   @font-face {
       font-family: 'robotobold';
       src: url('Roboto-Bold-webfont.eot');
       src: url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
            url('Roboto-Bold-webfont.woff') format('woff'),
            url('Roboto-Bold-webfont.ttf') format('truetype'),
            url('Roboto-Bold-webfont.svg#robotobold') format('svg');
       font-weight: normal;
       font-style: normal;
   }
   

 

I tyle! Na tej stronie co podałem wyżej masz przykład zastosowania - plik HTML, CSS, pliki czcionek i ich prawidłowe użycie.

Hey właśnie mam taki problem i google mnie tu przywiał

 

Mam taki theme:

 

http://themeforest.net/item/medicenter-responsive-medical-wordpress-theme/4718613

 

Niestety w css brak odniesień do czcionki googla. Znalazłem chyba odpowiednie zapisy w pliku functions.php.

Tylko że totalnie nie wiem jak się za to zabrać

 

Pozdrawaim

 

Adam 

//style
	if($theme_options["header_font"]!="")
		wp_enqueue_style("google-font-header", "http://fonts.googleapis.com/css?family=" . urlencode($theme_options["header_font"]));
	else
		wp_enqueue_style("google-font-droid-sans", "http://fonts.googleapis.com/css?family=PT+Sans");
	if($theme_options["subheader_font"]!="")
		wp_enqueue_style("google-font-subheader", "http://fonts.googleapis.com/css?family=" . urlencode($theme_options["subheader_font"]));
	else
		wp_enqueue_style("google-font-droid-serif", "http://fonts.googleapis.com/css?family=Volkhov:400italic");
	wp_enqueue_style("reset", get_template_directory_uri() . "/style/reset.css");
	wp_enqueue_style("superfish", get_template_directory_uri() . "/style/superfish.css");
	wp_enqueue_style("jquery-fancybox", get_template_directory_uri() . "/style/fancybox/jquery.fancybox.css");
	wp_enqueue_style("jquery-qtip", get_template_directory_uri() . "/style/jquery.qtip.css");
	wp_enqueue_style("jquery-ui-custom", get_template_directory_uri() . "/style/jquery-ui-1.9.2.custom.css");
	wp_enqueue_style("main-style", get_stylesheet_uri());
	if((int)$theme_options["responsive"])
		wp_enqueue_style("responsive", get_template_directory_uri() . "/style/responsive.css");
	else
		wp_enqueue_style("no-responsive", get_template_directory_uri() . "/style/no_responsive.css");
	wp_enqueue_style("custom", get_template_directory_uri() . "/custom.css");
	//js

Nikt za ciebie nie wykona czarną robotę. Zobacz najpierw w panelu admina jaką masz domyślną czcionkę i sprawdź jej polski odpowiednik, ewentualnie w kodzie:

    wp_enqueue_style("google-font-header", "http://fonts.googleapis.com/css?family=" . urlencode($theme_options["header_font"]));

zamień na:

    wp_enqueue_style("google-font-header", "http://fonts.googleapis.com/css?family=" . urlencode($theme_options["header_font"] . "&subset=latin-ext"));

Nie każda czcionka w theme ma polski odpowiednik..

Nikt za ciebie nie wykona czarną robotę. Zobacz najpierw w panelu admina jaką masz domyślną czcionkę i sprawdź jej polski odpowiednik, ewentualnie w kodzie:

    wp_enqueue_style("google-font-header", "http://fonts.googleapis.com/css?family=" . urlencode($theme_options["header_font"]));

zamień na:

    wp_enqueue_style("google-font-header", "http://fonts.googleapis.com/css?family=" . urlencode($theme_options["header_font"] . "&subset=latin-ext"));

Nie każda czcionka w theme ma polski odpowiednik..

 

Hey dzięki za odpowedź ale niestey nie pomogło

Używam czcionki Comfortaa i z tego co widzę w necie powinna mieć poprawne ąę Zresztą chyba theme jest na tyle sprytny że nie pozwala mi użyć niktórych czcionek i przełącza się na jakąś standarową w razie brak ąę

 

Aktualnie mam tak:

if($theme_options["header_font"]!="")
		wp_enqueue_style("google-font-header", "http://fonts.googleapis.com/css?family=" . urlencode($theme_options["header_font"] . "&subset=latin-ext"));
	else
		wp_enqueue_style("google-font-droid-sans", "http://fonts.googleapis.com/css?family=PT+Sans");
	if($theme_options["subheader_font"]!="")
		wp_enqueue_style("google-font-subheader", "http://fonts.googleapis.com/css?family=" . urlencode($theme_options["subheader_font"]));
	else

ok pomogło tak jeszcze raz dzięki za pomoc:

global $themename;
	global $theme_options;
	    //style
        if($theme_options["header_font"]!="")
            wp_enqueue_style("google-font-header", "http://fonts.googleapis.com/css?family=" . urlencode($theme_options["header_font"]) . "&subset=latin,latin-ext");
        else
            wp_enqueue_style("google-font-droid-sans", "http://fonts.googleapis.com/css?family=PT+Sans&subset=latin,latin-ext");
        if($theme_options["subheader_font"]!="")
            wp_enqueue_style("google-font-subheader", "http://fonts.googleapis.com/css?family=" . urlencode($theme_options["subheader_font"]) . "&subset=latin,latin-ext");
        else
            wp_enqueue_style("google-font-droid-serif", "http://fonts.googleapis.com/css?family=Volkhov:400italic&subset=latin,latin-ext");

No właśnie nie dopowiedziałem

Jak ktoś się na tym zna, to chętnie zlecę poprawienie dla moich 2. Bo moje csss jest do *** niestety

Witam, 

Mam problem z innym wyglądem polskich czcionek na moim blogu. Sytuacja ma jedynie miejsce w przeglądarce Mozilla Firefox, w Chromie wszystko działa jak należy. Próbowałam się zastosować do rad, które znalazłam na paru forach, jednak bez skutku. Prawdę powiedziawszy próbuję rzeczy na chybił trafił, w nadziei, że nie popsuję wszystkiego jeszcze bardziej, bo kompletnie się na tym nie znam.

 

Mój blog: www.polkawnz.pl

 

Proszę o pomoc.

Z góry bardzo dziękuję.